From f4b014e2fff94e014d6a5b0f1e9843a773bd3f50 Mon Sep 17 00:00:00 2001 From: Alex Wellnitz Date: Tue, 24 Sep 2024 12:36:13 +0200 Subject: [PATCH] feat(frontend): add navigation --- frontend/src/app/layout.tsx | 2 ++ .../app/ui/navigation/navigation.module.css | 31 +++++++++++++++++++ frontend/src/app/ui/navigation/navigation.tsx | 27 ++++++++++++++++ 3 files changed, 60 insertions(+) create mode 100644 frontend/src/app/ui/navigation/navigation.module.css create mode 100644 frontend/src/app/ui/navigation/navigation.tsx diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 8cbe770..f8431d5 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import localFont from "next/font/local"; import "./globals.css"; +import { Navigation } from "./ui/navigation/navigation"; const geistSans = localFont({ src: "./fonts/GeistVF.woff", @@ -26,6 +27,7 @@ export default function RootLayout({ return ( + {children} diff --git a/frontend/src/app/ui/navigation/navigation.module.css b/frontend/src/app/ui/navigation/navigation.module.css new file mode 100644 index 0000000..782df7d --- /dev/null +++ b/frontend/src/app/ui/navigation/navigation.module.css @@ -0,0 +1,31 @@ +.nav { + position: fixed; + width: 100%; + height: 80px; + background-color: #1e1e21; +} + +.nav a { + margin: auto 20px; +} + +.nav .navcontainer { + position: relative; + margin: auto; + padding: 30px 0; + width: 100%; + max-width: 1300px; +} + +.nav .logocontainer { + margin: -20px auto; + float: left; +} + +.nav .logocontainer a { + margin: auto 0px; +} + +.nav .navlinkcontainer { + float: left; +} diff --git a/frontend/src/app/ui/navigation/navigation.tsx b/frontend/src/app/ui/navigation/navigation.tsx new file mode 100644 index 0000000..498b8aa --- /dev/null +++ b/frontend/src/app/ui/navigation/navigation.tsx @@ -0,0 +1,27 @@ +import Image from "next/image"; +import styles from "./navigation.module.css"; + +export function Navigation() { + return ( + + ); +}