feat: added menubar

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>
 	)
 }

client/src/components/Menubar.tsx

@@ -3,16 +3,40 @@ 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
 }
 
 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>
 	)
 }