Basic navigation bars (#59)

* Basic navigation bar

* Added basic navigation bar

* Added styling to navigation bar

* Added sidebar navigation

* Added a dropdown menu, color corrections

* Fixed text wrapping issue

* Update gradesa/src/components/ui/sidenavigation.js

Co-authored-by: Axel Adlercreutz <39679469+DoebelnAtz@users.noreply.github.com>

* small fixes

* Fixed style issues in code with Prettier

---------

Co-authored-by: Salla Rautiainen <152855958+rautiais@users.noreply.github.com>
Co-authored-by: Axel Adlercreutz <39679469+DoebelnAtz@users.noreply.github.com>

gradesa/src/app/layout.js

@@ -1,5 +1,7 @@
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Navbar from "@/components/ui/navigation";
+import Sidebar from "@/components/ui/sidenavigation";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -20,6 +22,8 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        <Navbar />
+        <Sidebar />
         {children}
       </body>
     </html>

gradesa/src/components/ui/navbar.css

@@ -0,0 +1,23 @@
+@import "/globals.css";
+
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--bg3);
+    color: var(--secondary9);
+    padding: 1rem;
+}
+  
+.navbar-left.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    text-decoration: none;
+}
+  
+.navbar-center.nav-links {
+    display: flex;    
+    margin: 10px;
+    padding: 10px;
+    gap: 20px;
+}

gradesa/src/components/ui/navigation.js

@@ -0,0 +1,26 @@
+import Image from "next/image";
+import Link from "next/link";
+import "./navbar.css";
+
+const Navbar = () => {
+  return (
+    <nav className="navbar">
+      {/* Layout UI */}
+      <div className="navbar-left">
+        <Image
+          src="/logo_placeholder.png"
+          width={190}
+          height={140}
+          alt="Logo placeholder"
+        />
+      </div>
+
+      <div className="navbar-center nav-links">
+        <Link href="#">Benutzer</Link>
+        <Link href="#">Sich abmelden</Link>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

gradesa/src/components/ui/sidebar.css

@@ -0,0 +1,58 @@
+@import "/globals.css";
+
+.sidebar {
+    position: absolute;
+    height: 100%;
+    width: 25%;
+    padding-top: 20px;
+    padding-left: 50px;
+    z-index: 1;
+    overflow-x: hidden;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    justify-content: left;
+    background-color: var(--bg3);
+    white-space: nowrap;
+}
+  
+.sidebar-left {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--secondary9);
+    text-decoration: none;
+}
+  
+.sidebar-left.nav-links {
+    display: block;
+    background-color: var(--secondary8);    
+    margin: 10px;
+    padding: 10px;
+    gap: 20px;
+}
+
+.dropdown {
+    width: 20%;
+    font-size: var(--font-lg);
+    color: var(--secondary1);
+    flex-direction: column;
+    display: block;
+}
+
+.dropdown-button {
+    cursor: pointer;
+    background-color: var(--fg2);
+    color: var(--secondary1);
+    border: none;
+    padding: 10px;
+    text-align: left;
+
+}
+
+/* Note: this refers to the dropdown-menu 
+in sidenavigation.js */
+.menu {
+    display: none;
+    position: flex;
+}

gradesa/src/components/ui/sidenavigation.js

@@ -0,0 +1,39 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import "./sidebar.css";
+
+const Sidebar = () => {
+  const [isDropdownOpen, setDropdownOpen] = useState(false);
+
+  const toggleDropdown = () => {
+    setDropdownOpen((previousState) => !previousState);
+  };
+
+  return (
+    <nav className="sidebar">
+      {/* Layout UI */}
+      <div className="sidebar-left">
+        <h2>Lernen</h2>
+      </div>
+
+      <div className="sidebar-left nav-links">
+        <div className="dropdown">
+          <button onClick={toggleDropdown} className="dropdown-button">
+            Lektionen
+          </button>
+          {/* Dropdown list items */}
+          {isDropdownOpen && (
+            <div className="dropdown-menu">
+              <Link href="#">Grammatik 1</Link> <br />
+              <Link href="#">Grammatik 2</Link>
+            </div>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Sidebar;