From a580bfb9e11c157cdde1aee59d074a4bbae9d724 Mon Sep 17 00:00:00 2001 From: Mari Lehtikari <102165310+maritatsuko@users.noreply.github.com> Date: Wed, 5 Feb 2025 17:07:17 +0200 Subject: [PATCH] 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/public/logo_placeholder.png | Bin 0 -> 7180 bytes gradesa/src/app/layout.js | 4 ++ gradesa/src/components/ui/navbar.css | 23 ++++++++ gradesa/src/components/ui/navigation.js | 26 +++++++++ gradesa/src/components/ui/sidebar.css | 58 ++++++++++++++++++++ gradesa/src/components/ui/sidenavigation.js | 39 +++++++++++++ 6 files changed, 150 insertions(+) create mode 100644 gradesa/public/logo_placeholder.png create mode 100644 gradesa/src/components/ui/navbar.css create mode 100644 gradesa/src/components/ui/navigation.js create mode 100644 gradesa/src/components/ui/sidebar.css create mode 100644 gradesa/src/components/ui/sidenavigation.js diff --git a/gradesa/public/logo_placeholder.png b/gradesa/public/logo_placeholder.png new file mode 100644 index 0000000000000000000000000000000000000000..a190d2053a5d1c1ddc3cbcf9d38d6558102a5245 GIT binary patch literal 7180 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 + + {children} diff --git a/gradesa/src/components/ui/navbar.css b/gradesa/src/components/ui/navbar.css new file mode 100644 index 0000000..17e006d --- /dev/null +++ b/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; +} diff --git a/gradesa/src/components/ui/navigation.js b/gradesa/src/components/ui/navigation.js new file mode 100644 index 0000000..b75908b --- /dev/null +++ b/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 ( + + ); +}; + +export default Navbar; diff --git a/gradesa/src/components/ui/sidebar.css b/gradesa/src/components/ui/sidebar.css new file mode 100644 index 0000000..ee168aa --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/gradesa/src/components/ui/sidenavigation.js b/gradesa/src/components/ui/sidenavigation.js new file mode 100644 index 0000000..3752ac9 --- /dev/null +++ b/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 ( + + ); +}; + +export default Sidebar;