alexohneander/sim_free
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

feat(frontend): add navigation

Browse Source
This commit is contained in:
Alex Wellnitz 2024-09-24 12:36:13 +02:00
parent f66355c835
commit f4b014e2ff
3 changed files with 60 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/layout.tsx
View File

@ -1,6 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import localFont from "next/font/local"; import localFont from "next/font/local";
import "./globals.css"; import "./globals.css";
import { Navigation } from "./ui/navigation/navigation";
const geistSans = localFont({ const geistSans = localFont({
src: "./fonts/GeistVF.woff", src: "./fonts/GeistVF.woff",
@ -26,6 +27,7 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}> <body className={`${geistSans.variable} ${geistMono.variable}`}>
<Navigation />
{children} {children}
</body> </body>
</html> </html>

31
frontend/src/app/ui/navigation/navigation.module.css Normal file
View File

@ -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;
}

27
frontend/src/app/ui/navigation/navigation.tsx Normal file
View File

@ -0,0 +1,27 @@
import Image from "next/image";
import styles from "./navigation.module.css";
export function Navigation() {
return (
<nav className={styles.nav}>
<div className={styles.navcontainer}>
<div className={styles.logocontainer}>
<a className={styles.logo} href="/">
<Image
className={styles.logo}
src={`https://sim-free.dev-null.rocks/img/warcraft-icon-22.png`}
alt="Sim-Free Logo"
width={60}
height={60}
priority
/>
</a>
</div>
<div className={styles.navlinkcontainer}>
<a href="/">Home</a> |<a href="/about">About</a>
</div>
</div>
</nav>
);
}