feat: shadcn-style mobile menu

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