"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface SidebarNavItem {
  id: string;
  label: string;
  href?: string;
  icon?: React.ReactNode;
  children?: SidebarNavItem[];
}

export interface SidebarNavProps
  extends React.HTMLAttributes<HTMLElement> {
  items: SidebarNavItem[];
  activeId?: string;
  defaultExpandedIds?: string[];
  onItemSelect?: (id: string) => void;
}

const collectExpandedIds = (items: SidebarNavItem[]) => {
  const expanded = new Set<string>();

  const walk = (entries: SidebarNavItem[]) => {
    entries.forEach((entry) => {
      if (entry.children && entry.children.length > 0) {
        expanded.add(entry.id);
        walk(entry.children);
      }
    });
  };

  walk(items);
  return expanded;
};

const hasActiveChild = (
  item: SidebarNavItem,
  activeId?: string
): boolean => {
  if (!activeId) {
    return false;
  }

  if (item.id === activeId) {
    return true;
  }

  return (
    item.children?.some((child) => hasActiveChild(child, activeId)) ?? false
  );
};

export function SidebarNav({
  items,
  activeId,
  defaultExpandedIds,
  onItemSelect,
  className,
  ...props
}: SidebarNavProps) {
  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(() =>
    defaultExpandedIds
      ? new Set(defaultExpandedIds)
      : collectExpandedIds(items)
  );

  const toggleExpanded = (id: string) => {
    setExpandedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  };

  const renderItem = (item: SidebarNavItem, depth = 0) => {
    const hasChildren = Boolean(item.children && item.children.length > 0);
    const isExpanded = expandedIds.has(item.id);
    const isActive = hasActiveChild(item, activeId);

    const baseClasses = cn(
      "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
      isActive ? "bg-muted text-primary" : "text-foreground",
      depth > 0 ? "pl-10" : "pl-3",
      !isActive && "hover:bg-muted"
    );

    if (hasChildren) {
      return (
        <div key={item.id} className="space-y-2">
          <button
            type="button"
            onClick={() => toggleExpanded(item.id)}
            className={baseClasses}
            aria-expanded={isExpanded}
          >
            {item.icon ? (
              <span
                className={cn(
                  "text-muted-foreground",
                  isActive && "text-primary"
                )}
              >
                {item.icon}
              </span>
            ) : null}
            <span className="flex-1 text-left font-medium">
              {item.label}
            </span>
            <ChevronIcon
              className={cn(
                "h-4 w-4 text-muted-foreground transition-transform",
                isExpanded && "rotate-180",
                isActive && "text-primary"
              )}
            />
          </button>
          {isExpanded ? (
            <div className="space-y-1">
              {item.children?.map((child) => renderItem(child, depth + 1))}
            </div>
          ) : null}
        </div>
      );
    }

    const ItemComponent: React.ElementType = item.href ? "a" : "button";

    return (
      <ItemComponent
        key={item.id}
        {...(item.href ? { href: item.href } : { type: "button" })}
        onClick={() => onItemSelect?.(item.id)}
        className={baseClasses}
      >
        {item.icon ? (
          <span
            className={cn(
              "text-muted-foreground",
              isActive && "text-primary"
            )}
          >
            {item.icon}
          </span>
        ) : null}
        <span className="flex-1 text-left font-medium">{item.label}</span>
      </ItemComponent>
    );
  };

  return (
    <nav
      className={cn(
        "w-full max-w-xs space-y-3 rounded-xl border border-border bg-card p-4",
        className
      )}
      {...props}
    >
      {items.map((item) => renderItem(item))}
    </nav>
  );
}

function ChevronIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        d="M5 8L10 13L15 8"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}
Sidebar Nav

Dependencies

Files

Installation
