From c4a11ed2d1b74877dc8bdb5289d5e649945bc122 Mon Sep 17 00:00:00 2001
From: warmachine028 <75939390+warmachine028@users.noreply.github.com>
Date: Tue, 3 Sep 2024 09:05:21 +0530
Subject: [PATCH] feat: added menubar

---
 client/src/app/(main)/layout.tsx  |  8 ++++++--
 client/src/components/Menubar.tsx | 30 +++++++++++++++++++++++++++---
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/client/src/app/(main)/layout.tsx b/client/src/app/(main)/layout.tsx
index 2486fca..cbcaf90 100644
--- a/client/src/app/(main)/layout.tsx
+++ b/client/src/app/(main)/layout.tsx
@@ -1,5 +1,5 @@
 import { validateRequest } from '@/auth'
-import { Navbar } from '@/components'
+import { Menubar, Navbar } from '@/components'
 import { SessionProvider } from '@/providers'
 import { redirect } from 'next/navigation'
 
@@ -11,7 +11,11 @@ const MainLayout = async ({ children }: Readonly<{ children: React.ReactNode }>)
 	return (
 		<SessionProvider value={session}>
 			<Navbar />
-			<main className="mx-auto max-w-7xl p-5">{children}</main>
+			<main className="mx-auto flex w-full max-w-7xl grow gap-5 p-5">
+				<Menubar className="bg-card sticky top-[5.25rem] hidden h-fit flex-none space-y-3 rounded-2xl px-3 py-5 shadow-sm sm:block lg:px-5 xl:w-80" />
+				{children}
+			</main>
+			<Menubar className="bg-card sticky bottom-0 flex w-full justify-center gap-5 border-t p-3 sm:hidden" />
 		</SessionProvider>
 	)
 }
diff --git a/client/src/components/Menubar.tsx b/client/src/components/Menubar.tsx
index cb45908..d0fe73a 100644
--- a/client/src/components/Menubar.tsx
+++ b/client/src/components/Menubar.tsx
@@ -3,6 +3,7 @@ import UserButton from './UserButton'
 import SearchBar from './SearchBar'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
+import { Bell, Home, Mail } from 'lucide-react'
 
 interface MenubarProps {
 	className?: string
@@ -10,9 +11,32 @@ interface MenubarProps {
 
 const Menubar = ({ className }: MenubarProps) => {
 	return (
-        <div className={cn('', className)}>
-            <Button></Button>
-        </div>
+		<div className={cn('', className)}>
+			<Button className="flex items-center justify-start gap-3" variant="ghost" title="Home" asChild>
+				<Link href="/">
+					<Home />
+					<span className="hidden lg:inline">Home</span>
+				</Link>
+			</Button>
+			<Button className="flex items-center justify-start gap-3" variant="ghost" title="Notifications" asChild>
+				<Link href="/notifications">
+					<Bell />
+					<span className="hidden lg:inline">Notifications</span>
+				</Link>
+			</Button>
+			<Button className="flex items-center justify-start gap-3" variant="ghost" title="Messages" asChild>
+				<Link href="/messages">
+					<Mail />
+					<span className="hidden lg:inline">Messages</span>
+				</Link>
+			</Button>
+			<Button className="flex items-center justify-start gap-3" variant="ghost" title="Bookmarks" asChild>
+				<Link href="/bookmarks">
+					<Home />
+					<span className="hidden lg:inline">Bookmarks</span>
+				</Link>
+			</Button>
+		</div>
 	)
 }