mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 01:10:02 +02:00
106 lines
No EOL
3.1 KiB
TypeScript
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>
|
|
)
|
|
} |