+75

app/components/site-header/mobile-menu.tsx

reviewed

··· 1 1 + import Link from "next/link"; 2 2 + import type { User } from "@supabase/supabase-js"; 3 3 + 4 4 + import { signOut } from "@/actions/auth"; 5 5 + 6 6 + interface MobileMenuProps { 7 7 + user: User | null; 8 8 + open: boolean; 9 9 + onClose: () => void; 10 10 + } 11 11 + 12 12 + const mobileLinkClass = 13 13 + "block text-left text-base font-medium text-white/90 hover:text-white"; 14 14 + 15 15 + export function MobileMenu({ user, open, onClose }: MobileMenuProps) { 16 16 + if (!open) return null; 17 17 + 18 18 + return ( 19 19 + <div className="fixed right-0 top-14 z-40 max-h-[calc(100vh-3.5rem)] w-1/3 overflow-y-auto border-t border-white/10 bg-neutral-950 px-4 pb-4 pt-3 md:hidden"> 20 20 + <nav className="flex flex-col gap-2"> 21 21 + <Link 22 22 + href="/" 23 23 + className={mobileLinkClass} 24 24 + onClick={onClose} 25 25 + > 26 26 + Home 27 27 + </Link> 28 28 + {user && ( 29 29 + <Link 30 30 + href="/dashboard" 31 31 + className={mobileLinkClass} 32 32 + onClick={onClose} 33 33 + > 34 34 + Dashboard 35 35 + </Link> 36 36 + )} 37 37 + <Link 38 38 + href="/#about" 39 39 + className={mobileLinkClass} 40 40 + onClick={onClose} 41 41 + > 42 42 + About 43 43 + </Link> 44 44 + </nav> 45 45 + 46 46 + <div className="mt-3 flex flex-col gap-2"> 47 47 + {user ? ( 48 48 + <form action={signOut}> 49 49 + <button type="submit" className={mobileLinkClass}> 50 50 + Sign out 51 51 + </button> 52 52 + </form> 53 53 + ) : ( 54 54 + <> 55 55 + <Link 56 56 + href="/login" 57 57 + onClick={onClose} 58 58 + className={mobileLinkClass} 59 59 + > 60 60 + Login 61 61 + </Link> 62 62 + <Link 63 63 + href="/signup" 64 64 + onClick={onClose} 65 65 + className={mobileLinkClass} 66 66 + > 67 67 + Get started 68 68 + </Link> 69 69 + </> 70 70 + )} 71 71 + </div> 72 72 + </div> 73 73 + ); 74 74 + } 75 75 +

+13 -4

app/components/site-header/site-header.tsx

reviewed

··· 7 7 import { Button } from "@/actions/components/ui/button"; 8 8 import { ArrowUpRightIcon, MenuIcon, XIcon } from "lucide-react"; 9 9 import type { User } from "@supabase/supabase-js"; 10 10 + import { MobileMenu } from "./mobile-menu"; 10 11 11 12 interface SiteHeaderProps { 12 13 user: User | null; ··· 155 156 </div> 156 157 157 158 <button 158 158 - className="md:hidden text-white" 159 159 - onClick={() => setMobileOpen(!mobileOpen)} 159 159 + type="button" 160 160 + aria-label="Toggle navigation" 161 161 + className="inline-flex h-9 w-9 cursor-pointer items-center justify-center text-white md:hidden" 162 162 + onClick={() => setMobileOpen((open) => !open)} 160 163 > 161 164 {mobileOpen ? ( 162 162 - <XIcon className="size-5" /> 165 165 + <XIcon className="size-5" aria-hidden /> 163 166 ) : ( 164 164 - <MenuIcon className="size-5" /> 167 167 + <MenuIcon className="size-5" aria-hidden /> 165 168 )} 166 169 </button> 167 170 </div> 171 171 + 172 172 + <MobileMenu 173 173 + user={user} 174 174 + open={mobileOpen} 175 175 + onClose={() => setMobileOpen(false)} 176 176 + /> 168 177 </header> 169 178 ); 170 179 }