ubiquitous-invention/apps/web/components/sidebar/sidebar-nav.tsx

"use client";

import { FileText, Home, Presentation, Search, Settings } from "lucide-react";
import { useParams, usePathname } from "next/navigation";

import { Separator } from "@/components/ui/separator";
import { useWorkspaceStore } from "@/lib/stores/workspace-store";

import { SidebarItem } from "./sidebar-item";

function NavSectionLabel({
  children,
  collapsed,
}: {
  children: React.ReactNode;
  collapsed?: boolean;
}) {
  if (collapsed) return null;
  return (
    <div className="px-2 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground first:pt-1">
      {children}
    </div>
  );
}

export function SidebarNav({
  collapsed,
  onOpenSearch,
}: {
  collapsed: boolean;
  onOpenSearch?: () => void;
}) {
  const pathname = usePathname();
  const params = useParams();
  const workspace = useWorkspaceStore((s) => s.currentWorkspace);
  const slugParam =
    typeof params?.workspaceSlug === "string" ? params.workspaceSlug : "";
  const base = workspace?.slug
    ? `/${workspace.slug}`
    : slugParam
      ? `/${slugParam}`
      : "";

  const homeActive = pathname === base || pathname === `${base}/`;

  return (
    <nav className="flex shrink-0 flex-col gap-0.5 px-2 pb-2 pt-1">
      <SidebarItem
        href={onOpenSearch ? "#" : `${base}/search`}
        icon={<Search />}
        label="Search"
        collapsed={collapsed}
        active={pathname.startsWith(`${base}/search`)}
        onClick={
          onOpenSearch
            ? (e) => {
                e.preventDefault();
                onOpenSearch();
              }
            : undefined
        }
      />

      <Separator className="my-2 bg-sidebar-border" />

      <SidebarItem
        href={base || "/"}
        icon={<Home />}
        label="Home"
        collapsed={collapsed}
        active={homeActive}
      />

      <Separator className="my-2 bg-sidebar-border" />

      <NavSectionLabel collapsed={collapsed}>Workspace</NavSectionLabel>
      <SidebarItem
        href={`${base}/documents`}
        icon={<FileText />}
        label="Documents"
        collapsed={collapsed}
        active={pathname.startsWith(`${base}/documents`)}
      />
      <SidebarItem
        href={`${base}/whiteboards`}
        icon={<Presentation />}
        label="Whiteboards"
        collapsed={collapsed}
        active={pathname.startsWith(`${base}/whiteboards`)}
      />
      <SidebarItem
        href={`${base}/settings`}
        icon={<Settings />}
        label="Settings"
        collapsed={collapsed}
        active={pathname.startsWith(`${base}/settings`)}
      />
    </nav>
  );
}