samsour.de / eny-space
eny.space Landingpage
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

style(mobile-menu): adjust width and position

Davor Culibrk 77058f08 b7027a9b

+23 -33
+23 -33
app/components/site-header/mobile-menu.tsx
··· 2 2 import type { User } from "@supabase/supabase-js"; 3 3 4 4 import { signOut } from "@/actions/auth"; 5 - import { Button } from "@/actions/components/ui/button"; 6 - import { ArrowUpRightIcon } from "lucide-react"; 7 5 8 6 interface MobileMenuProps { 9 7 user: User | null; ··· 11 9 onClose: () => void; 12 10 } 13 11 12 + const mobileLinkClass = 13 + "block text-left text-base font-medium text-white/90 hover:text-white"; 14 + 14 15 export function MobileMenu({ user, open, onClose }: MobileMenuProps) { 15 16 if (!open) return null; 16 17 17 18 return ( 18 - <div className="fixed inset-x-0 top-14 z-40 max-h-[calc(100vh-3.5rem)] overflow-y-auto border-t border-white/10 bg-neutral-950 px-4 pb-4 pt-3 md:hidden"> 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"> 19 20 <nav className="flex flex-col gap-2"> 20 21 <Link 21 22 href="/" 22 - className="text-sm font-medium text-white/90" 23 + className={mobileLinkClass} 23 24 onClick={onClose} 24 25 > 25 26 Home ··· 27 28 {user && ( 28 29 <Link 29 30 href="/dashboard" 30 - className="text-sm font-medium text-white/90" 31 + className={mobileLinkClass} 31 32 onClick={onClose} 32 33 > 33 34 Dashboard ··· 35 36 )} 36 37 <Link 37 38 href="/#about" 38 - className="text-sm font-medium text-white/90" 39 + className={mobileLinkClass} 39 40 onClick={onClose} 40 41 > 41 42 About 42 43 </Link> 43 44 </nav> 44 45 45 - <div className="mt-3 flex flex-col items-start gap-2"> 46 + <div className="mt-3 flex flex-col gap-2"> 46 47 {user ? ( 47 48 <form action={signOut}> 48 - <Button 49 - type="submit" 50 - size="default" 51 - className="inline-flex h-9 w-[min(33vw,200px)] min-w-0 items-center justify-center rounded-full bg-white px-4 text-xs font-medium uppercase tracking-wide text-neutral-950 hover:bg-white/90" 52 - > 53 - <span>Sign out</span> 54 - <ArrowUpRightIcon className="ml-1 size-3.5" aria-hidden /> 55 - </Button> 49 + <button type="submit" className={mobileLinkClass}> 50 + Sign out 51 + </button> 56 52 </form> 57 53 ) : ( 58 54 <> 59 - <Button 60 - variant="outline" 61 - size="default" 62 - className="inline-flex h-9 w-[min(33vw,200px)] min-w-0 items-center justify-center rounded-full border-white/20 bg-transparent px-4 text-xs font-medium uppercase tracking-wide text-white/90 hover:bg-white/10 hover:text-white" 63 - asChild 55 + <Link 56 + href="/login" 57 + onClick={onClose} 58 + className={mobileLinkClass} 64 59 > 65 - <Link href="/login" onClick={onClose}> 66 - Login 67 - </Link> 68 - </Button> 69 - <Button 70 - size="default" 71 - className="inline-flex h-9 w-[min(33vw,200px)] min-w-0 items-center justify-center rounded-full bg-white px-4 text-xs font-medium uppercase tracking-wide text-neutral-950 hover:bg-white/90" 72 - asChild 60 + Login 61 + </Link> 62 + <Link 63 + href="/signup" 64 + onClick={onClose} 65 + className={mobileLinkClass} 73 66 > 74 - <Link href="/signup" onClick={onClose}> 75 - Get started 76 - <ArrowUpRightIcon className="ml-1 size-3.5" aria-hidden /> 77 - </Link> 78 - </Button> 67 + Get started 68 + </Link> 79 69 </> 80 70 )} 81 71 </div>