Add mobile menu icons

components/app-shell/mobile-menu.tsx

@@ -1,14 +1,32 @@
 'use client'
 
-import { HomeIcon, Menu, Moon, RssIcon, Sun } from 'lucide-react'
+import {
+  HomeIcon,
+  BookTypeIcon,
+  SquareTerminalIcon,
+  FolderGit2Icon,
+  BadgeInfoIcon,
+  Menu,
+  Moon,
+  RssIcon,
+  Sun,
+} from 'lucide-react'
 import Link from 'next/link'
 import { useTheme } from 'next-themes'
+import { type ReactNode } from 'react'
 
 import { Button, buttonVariants } from '@/components/ui/button'
 import { Sheet, SheetClose, SheetContent, SheetTrigger } from '@/components/ui/sheet'
 import { SITE_NAVIGATIONAL_ITEMS } from '@/lib/constants'
 import { cn } from '@/lib/utils'
 
+const navItemIcons: Record<string, ReactNode> = {
+  blog: <BookTypeIcon className="mr-2 h-4 w-4" />,
+  about: <BadgeInfoIcon className="mr-2 h-4 w-4" />,
+  stack: <SquareTerminalIcon className="mr-2 h-4 w-4" />,
+  portfolio: <FolderGit2Icon className="mr-2 h-4 w-4" />,
+}
+
 export function MobileMenu() {
   const { theme, setTheme } = useTheme()
 
@@ -41,6 +59,7 @@ export function MobileMenu() {
                     href={navItem.href}
                     className={cn(buttonVariants({ variant: 'ghost' }), 'w-full justify-start rounded-none border-b')}
                   >
+                    {navItemIcons[navItem.value.toLowerCase()]}
                     {navItem.value}
                   </Link>
                 </SheetClose>