www/src/components/mobile-nav.tsx
2024-07-22 01:04:17 +02:00

106 lines
No EOL
3.1 KiB
TypeScript

'use client'
import { SidebarOpen } from 'lucide-react'
import type { LinkProps } from 'next/link'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import * as React from 'react'
import { Sheet, SheetContent, SheetTrigger } from './ui/sheet'
import { Button } from './ui/button'
import { ScrollArea } from './ui/scroll-area'
import Logo from './logo'
import { ny } from '@/lib/utils'
import { components } from './navigation'
export function MobileNav() {
const [open, setOpen] = React.useState(false)
return (
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild>
<Button
variant="ghost"
className="mr-2 px-0 ml-auto text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 sm:hidden"
>
<SidebarOpen className="size-6" />
<span className="sr-only">Toggle Menu</span>
</Button>
</SheetTrigger>
<SheetContent side="left" className="pr-0">
<MobileLink
href="/"
className="flex items-center"
onOpenChange={setOpen}
>
<Logo withText />
</MobileLink>
<ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
<div className="flex flex-col space-y-3">
<MobileLink
href="/download"
onOpenChange={setOpen}
>
Download
</MobileLink>
<MobileLink
href="/release-notes"
onOpenChange={setOpen}
>
Release Notes
</MobileLink>
<MobileLink
href="https://github.com/zen-browser"
onOpenChange={setOpen}
>
Source Code
</MobileLink>
<MobileLink
href="https://patreon.com/zen_browser"
onOpenChange={setOpen}
>
Donate {"<"}3
</MobileLink>
{components.map(({title, href, description}) => (
<MobileLink
href={href}
key={href}
onOpenChange={setOpen}
>
{title}
</MobileLink>
))}
</div>
</ScrollArea>
</SheetContent>
</Sheet>
)
}
interface MobileLinkProps extends LinkProps {
onOpenChange?: (open: boolean) => void
children: React.ReactNode
className?: string
}
function MobileLink({
href,
onOpenChange,
className,
children,
...props
}: MobileLinkProps) {
const router = useRouter()
return (
<Link
href={href}
onClick={() => {
router.push(href.toString())
onOpenChange?.(false)
}}
className={ny(className)}
{...props}
>
{children}
</Link>
)
}