skilld-admin/src/components/mobile-sidebar-nav.tsx

"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>
  );
}