From 72655a831779142f45579132883924ce10d08416 Mon Sep 17 00:00:00 2001
From: enscribe <jason@enscribe.dev>
Date: Thu, 12 Sep 2024 19:59:13 -0700
Subject: [PATCH] feat: shadcn-style mobile menu

---
 src/components/AuthorCard.astro   |  4 +--
 src/components/Header.astro       |  8 +++--
 src/components/ui/avatar.tsx      |  4 +--
 src/components/ui/mobile-menu.tsx | 60 +++++++++++++++++++++++++++++++
 src/components/ui/mode-toggle.tsx |  2 +-
 5 files changed, 70 insertions(+), 8 deletions(-)
 create mode 100644 src/components/ui/mobile-menu.tsx

diff --git a/src/components/AuthorCard.astro b/src/components/AuthorCard.astro
index c576f72..923007d 100644
--- a/src/components/AuthorCard.astro
+++ b/src/components/AuthorCard.astro
@@ -16,7 +16,7 @@ const { name, avatar, bio, pronouns, github, twitter, linkedin, website } =
 ---
 
 <div
-  class="rounded-xl border p-4 transition-colors duration-300 ease-in-out has-[a:hover]:bg-secondary/50"
+  class="overflow-hidden rounded-xl border p-4 transition-colors duration-300 ease-in-out has-[a:hover]:bg-secondary/50"
 >
   <div class="flex flex-wrap gap-4">
     <Link
@@ -35,7 +35,7 @@ const { name, avatar, bio, pronouns, github, twitter, linkedin, website } =
         )}
       />
     </Link>
-    <div class="flex flex-grow flex-col justify-between">
+    <div class="flex flex-grow flex-col justify-between gap-y-4">
       <div>
         <div class="flex items-center gap-2">
           <h3 class="text-lg font-semibold">{name}</h3>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 7eb1c38..fd63cdd 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -2,6 +2,7 @@
 import { ModeToggle } from '@/components/ui/mode-toggle'
 import Container from '@components/Container.astro'
 import Link from '@components/Link.astro'
+import MobileMenu from '@components/ui/mobile-menu'
 import { NAV_LINKS, SITE } from '@consts'
 import { Image } from 'astro:assets'
 import logo from '../../public/static/logo.svg'
@@ -20,8 +21,8 @@ import logo from '../../public/static/logo.svg'
         <Image src={logo} alt="Logo" class="size-8 rounded-sm" />
         {SITE.TITLE}
       </Link>
-      <div class="flex items-center gap-4">
-        <nav class="flex items-center gap-4 text-sm sm:gap-6">
+      <div class="flex items-center gap-2 md:gap-4">
+        <nav class="hidden items-center gap-4 text-sm sm:gap-6 md:flex">
           {
             NAV_LINKS.map((item) => (
               <Link
@@ -33,7 +34,8 @@ import logo from '../../public/static/logo.svg'
             ))
           }
         </nav>
-        <ModeToggle client:load />
+        <MobileMenu client:load transition:persist />
+        <ModeToggle client:load transition:persist />
       </div>
     </div>
   </Container>
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index fa44279..935b211 100644
--- a/src/components/ui/avatar.tsx
+++ b/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}
diff --git a/src/components/ui/mobile-menu.tsx b/src/components/ui/mobile-menu.tsx
new file mode 100644
index 0000000..6e77c8b
--- /dev/null
+++ b/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
diff --git a/src/components/ui/mode-toggle.tsx b/src/components/ui/mode-toggle.tsx
index 0092b0f..591f617 100644
--- a/src/components/ui/mode-toggle.tsx
+++ b/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>