refactor(web): build nav and main content with css grid, adjust navbar and main section according to styleguide

Author: Manuel Proß

web/src/components/Layout/Layout.tsx

@@ -8,11 +8,15 @@ type LayoutProps = {
 
 export default function Layout({ children, pages }: PropsWithChildren<LayoutProps>) {
 	return (
-		<div className="py-4 pr-4">
-			<Navigation menu={pages} />
-			<div className="rounded-3xl ml-[15rem] bg-gray-5">
-				{children}
-				<Footer />
+		<div className="relative grid grid-cols-[1fr,3fr] gap-x-5 px-5 xl:grid-cols-[300px,auto]">
+			<div className="sticky top-0 h-screen py-4">
+				<Navigation menu={pages} />
+			</div>
+			<div className="pt-4">
+				<div className="rounded-[35px] p-12 bg-gray-5">
+					{children}
+					<Footer />
+				</div>
 			</div>
 		</div>
 	);

web/src/components/Layout/Navigation/Navigation.tsx

@@ -1,5 +1,7 @@
 "use client";
 import { IconUserCircle } from "@tabler/icons-react";
+import Image from "next/image";
+import Link from "next/link";
 
 type NavigationProps = {
 	menu: Page[];
@@ -16,12 +18,19 @@ export type Page = {
 
 export default function Navigation({ menu }: NavigationProps) {
 	return (
-		<header className="sidebar">
-			<nav className="flex flex-col items-center justify-between h-full">
-				<a className="w-3/4" href="/">
-					<img src="/vim.svg" alt="Vim Logo" />
-				</a>
-				<ul className="w-full flex flex-col gap-2">
+		<header className="h-full rounded-[35px] pt-8 bg-gray-5">
+			<nav className="flex flex-col items-center h-full">
+				<Link className="mb-8" href="/">
+					<Image src="/vim.svg" width={64} height={64} alt="Vim Logo" />
+				</Link>
+				<ul className="w-full flex flex-col gap-2 px-8">
+					<li className="block rounded-xl py-2 px-4 text-white hover:bg-gray-4 hover:cursor-pointer">
+						<Link href="#">Downloads</Link>
+					</li>
+					<li className="block rounded-xl py-2 px-4 text-white hover:bg-gray-4 hover:cursor-pointer">
+						<Link href="#">Downloads</Link>
+					</li>
+
 					{menu.map(menuItem => {
 						return (
 							<li className="nav-link" key={menuItem.id}>
@@ -31,11 +40,11 @@ export default function Navigation({ menu }: NavigationProps) {
 					})}
 				</ul>
 
-				<div>
-					<a className="flex flex-row gap-2" href="/my-account">
-						<IconUserCircle size={24} />
+				<div className="group mt-auto mb-8 hover:text-gray-2">
+					<Link className="flex items-center gap-2 text-white group-hover:text-gray-2" href="/my-account">
+						<IconUserCircle className="text-white group-hover:text-gray-2" size={40} />
 						My Account
-					</a>
+					</Link>
 				</div>
 			</nav>
 		</header>