43 lines
2.2 KiB
TypeScript
43 lines
2.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||
|
|
import { Menu, X, Mic } from "lucide-react";
|
||
|
|
import type { PlanKey } from "@/lib/billing/plans";
|
||
|
|
import { SidebarNav } from "./sidebar-nav";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Left-drawer navigation for phones. Mirrors `AdminMobileNav` (radix dialog),
|
||
|
|
* wrapping the shared `SidebarNav` and closing on every link tap. Only rendered
|
||
|
|
* below the `md` breakpoint.
|
||
|
|
*/
|
||
|
|
export function AppMobileNav({ plan, workspaceName }: { plan: PlanKey; workspaceName: string }) {
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
return (
|
||
|
|
<DialogPrimitive.Root open={open} onOpenChange={setOpen}>
|
||
|
|
<DialogPrimitive.Trigger className="inline-flex h-10 w-10 items-center justify-center rounded-full text-foreground hover:bg-secondary md:hidden">
|
||
|
|
<Menu className="h-5 w-5" />
|
||
|
|
<span className="sr-only">Open menu</span>
|
||
|
|
</DialogPrimitive.Trigger>
|
||
|
|
<DialogPrimitive.Portal>
|
||
|
|
<DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 md:hidden" />
|
||
|
|
<DialogPrimitive.Content className="fixed inset-y-0 left-0 z-50 w-72 overflow-y-auto border-r border-border bg-background shadow-xl duration-200 data-[state=open]:animate-in data-[state=open]:slide-in-from-left md:hidden">
|
||
|
|
<div className="flex items-center justify-between border-b border-border px-4 py-4">
|
||
|
|
<DialogPrimitive.Title className="flex items-center gap-2 font-display font-bold tracking-tight">
|
||
|
|
<span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
|
||
|
|
<Mic className="h-4 w-4" />
|
||
|
|
</span>
|
||
|
|
<span className="truncate">{workspaceName}</span>
|
||
|
|
</DialogPrimitive.Title>
|
||
|
|
<DialogPrimitive.Close className="rounded-full p-1 text-muted-foreground hover:text-foreground">
|
||
|
|
<X className="h-5 w-5" />
|
||
|
|
<span className="sr-only">Close</span>
|
||
|
|
</DialogPrimitive.Close>
|
||
|
|
</div>
|
||
|
|
<SidebarNav plan={plan} onNavigate={() => setOpen(false)} />
|
||
|
|
</DialogPrimitive.Content>
|
||
|
|
</DialogPrimitive.Portal>
|
||
|
|
</DialogPrimitive.Root>
|
||
|
|
);
|
||
|
|
}
|