79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "@/components/ui/sheet";
|
|
|
|
import { AlignJustify } from "lucide-react";
|
|
import { useParams, usePathname } from "next/navigation";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Icons } from "./icons";
|
|
import { ExpandedItem } from "./sidebar-nav";
|
|
import { Fragment, useState } from "react";
|
|
import { sideNavItems } from "@/config/nav";
|
|
import { siteConfig } from "@/config/site";
|
|
import { buttonVariants } from "./ui/button";
|
|
import { ScrollArea, ScrollBar } from "./ui/scroll-area";
|
|
|
|
export default function MobileSidebarNav() {
|
|
const [isSheetOpen, setIsSheetOpen] = useState(false)
|
|
const params = useParams<{ workspaceId: string }>();
|
|
const path = usePathname();
|
|
|
|
const pathname = path.replace(`/${params.workspaceId}`, "") || "/";
|
|
const [_, currentPath] = pathname.split("/");
|
|
|
|
return (
|
|
<div className="flex lg:hidden">
|
|
<Sheet open={isSheetOpen} onOpenChange={(v) => setIsSheetOpen(v)}>
|
|
<SheetTrigger
|
|
className={buttonVariants({ variant: "outline", size: "icon" })}
|
|
>
|
|
<AlignJustify />
|
|
</SheetTrigger>
|
|
<SheetContent side={"left"} className="p-0">
|
|
<ScrollArea className="h-screen border p-4">
|
|
<SheetHeader>
|
|
<SheetTitle className="flex items-center space-x-2">
|
|
<Icons.logo />
|
|
<span className="inline-block font-urban text-xl font-bold">
|
|
{siteConfig.name}
|
|
</span>
|
|
</SheetTitle>
|
|
<Separator className="mb-2 mt-2" />
|
|
</SheetHeader>
|
|
|
|
{sideNavItems.map((group, i) => {
|
|
return (
|
|
<Fragment key={i}>
|
|
{/* <Separator className="mb-2 mt-2" /> */}
|
|
<h4 className="rounded-md px-2 mt-2 text-sm font-semibold">
|
|
{group.group}
|
|
</h4>
|
|
<div className="flex flex-col gap-1 p-2" key={group.group}>
|
|
{group.items.map((link, idx) => {
|
|
return (
|
|
<ExpandedItem
|
|
key={link.href + idx}
|
|
item={link}
|
|
currentPath={"/" + currentPath}
|
|
onLinkClick={() => setIsSheetOpen(!isSheetOpen)}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
})}
|
|
<ScrollBar orientation="vertical" />
|
|
</ScrollArea>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
);
|
|
}
|