feat: shadcn-style mobile menu

src/components/ui/avatar.tsx

@@ -23,7 +23,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn('aspect-square h-full w-full', className)}
+    className={cn('aspect-square size-full', className)}
     {...props}
   />
 ))
@@ -36,7 +36,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      'flex h-full w-full items-center justify-center bg-muted',
+      'flex size-full items-center justify-center bg-muted',
       className,
     )}
     {...props}

src/components/ui/mobile-menu.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { NAV_LINKS } from '@consts'
+import { Menu } from 'lucide-react'
+
+const MobileMenu = () => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => {
+    const handleViewTransitionStart = () => {
+      setIsOpen(false)
+    }
+
+    document.addEventListener('astro:before-swap', handleViewTransitionStart)
+
+    return () => {
+      document.removeEventListener(
+        'astro:before-swap',
+        handleViewTransitionStart,
+      )
+    }
+  }, [])
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen} modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          className="md:hidden"
+          title="Menu"
+        >
+          <Menu className="h-5 w-5" />
+          <span className="sr-only">Toggle menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="mr-4 bg-background">
+        {NAV_LINKS.map((item) => (
+          <DropdownMenuItem key={item.href} asChild>
+            <a
+              href={item.href}
+              className="w-full text-lg font-medium capitalize"
+              onClick={() => setIsOpen(false)}
+            >
+              {item.label}
+            </a>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default MobileMenu

src/components/ui/mode-toggle.tsx

@@ -40,7 +40,7 @@ export function ModeToggle() {
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="bg-background">
+      <DropdownMenuContent align="end" className="mr-4 bg-background">
         <DropdownMenuItem onClick={() => setThemeState('theme-light')}>
           <Sun className="mr-2 size-4" />
           <span>Light</span>