End of part 7

src/app/(main)/MenuBar.tsx

@@ -0,0 +1,58 @@
+import { Button } from "@/components/ui/button";
+import { Bell, Bookmark, Home, Mail } from "lucide-react";
+import Link from "next/link";
+
+interface MenuBarProps {
+  className?: string;
+}
+
+export default function MenuBar({ className }: MenuBarProps) {
+  return (
+    <div className={className}>
+      <Button
+        variant="ghost"
+        className="flex items-center justify-start gap-3"
+        title="Home"
+        asChild
+      >
+        <Link href="/">
+          <Home />
+          <span className="hidden lg:inline">Home</span>
+        </Link>
+      </Button>
+      <Button
+        variant="ghost"
+        className="flex items-center justify-start gap-3"
+        title="Notifications"
+        asChild
+      >
+        <Link href="/notifications">
+          <Bell />
+          <span className="hidden lg:inline">Notifications</span>
+        </Link>
+      </Button>
+      <Button
+        variant="ghost"
+        className="flex items-center justify-start gap-3"
+        title="Messages"
+        asChild
+      >
+        <Link href="/messages">
+          <Mail />
+          <span className="hidden lg:inline">Messages</span>
+        </Link>
+      </Button>
+      <Button
+        variant="ghost"
+        className="flex items-center justify-start gap-3"
+        title="Bookmarks"
+        asChild
+      >
+        <Link href="/bookmarks">
+          <Bookmark />
+          <span className="hidden lg:inline">Bookmarks</span>
+        </Link>
+      </Button>
+    </div>
+  );
+}

src/app/(main)/layout.tsx

@@ -1,5 +1,6 @@
 import { validateRequest } from "@/auth";
 import { redirect } from "next/navigation";
+import MenuBar from "./MenuBar";
 import Navbar from "./Navbar";
 import SessionProvider from "./SessionProvider";
 
@@ -16,7 +17,11 @@ export default async function Layout({
     <SessionProvider value={session}>
       <div className="flex min-h-screen flex-col">
         <Navbar />
-        <div className="mx-auto max-w-7xl p-5">{children}</div>
+        <div className="mx-auto flex w-full max-w-7xl grow gap-5 p-5">
+          <MenuBar className="sticky top-[5.25rem] hidden h-fit flex-none space-y-3 rounded-2xl bg-card px-3 py-5 shadow-sm sm:block lg:px-5 xl:w-80" />
+          {children}
+        </div>
+        <MenuBar className="sticky bottom-0 flex w-full justify-center gap-5 border-t bg-card p-3 sm:hidden" />
       </div>
     </SessionProvider>
   );

src/app/(main)/page.tsx

@@ -1,3 +1,7 @@
 export default function Home() {
-  return <main>Front page</main>;
+  return (
+    <main className="h-[200vh] w-full bg-red-50">
+      <div className="w-full">Front page</div>
+    </main>
+  );
 }