Sidebar Light

1"use client"
2 
3import * as React from "react"
4import Link from "next/link"
5import { usePathname } from "next/navigation"
6import { cn } from "@/lib/utils"
7 
8export interface NavItem {
9  title: string
10  href: string
11  icon?: React.ComponentType<{ className?: string }>
12  items?: NavItem[]
13}
14 
15interface SidebarLightProps {
16  items: NavItem[]
17  className?: string
18}
19 
20interface NavItemRendererProps {
21  item: NavItem
22  pathname: string
23  depth: number
24}
25 
26function NavItemRenderer({ item, pathname, depth }: NavItemRendererProps) {
27  const hasChildren = item.items && item.items.length > 0
28  const isActive = pathname === item.href
29 
30  // Parent item with children (section header)
31  if (hasChildren) {
32    return (
33      <div className="space-y-1">
34        <div
35          className={cn(
36            "flex items-center gap-2 text-sm",
37            depth === 0 && "px-3 py-2 font-semibold text-foreground",
38            depth > 0 && "px-3 py-1.5 font-medium text-muted-foreground"
39          )}
40        >
41          {item.icon && <item.icon className={cn(depth === 0 ? "h-4 w-4" : "h-3.5 w-3.5")} />}
42          {item.title}
43        </div>
44        <div className={cn("ml-4 space-y-1 border-l border-border pl-2")}>
45          {item.items!.map((subItem, index) => (
46            <NavItemRenderer
47              key={subItem.href !== "#" ? subItem.href : `${subItem.title}-${index}`}
48              item={subItem}
49              pathname={pathname}
50              depth={depth + 1}
51            />
52          ))}
53        </div>
54      </div>
55    )
56  }
57 
58  // Leaf item (link)
59  return (
60    <Link
61      href={item.href}
62      className={cn(
63        "flex items-center gap-2 text-sm rounded-md transition-colors",
64        depth === 0 && "px-3 py-2",
65        depth > 0 && "px-3 py-1.5",
66        isActive
67          ? "bg-muted font-medium text-foreground"
68          : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
69      )}
70    >
71      {item.icon && <item.icon className={cn(depth === 0 ? "h-4 w-4" : "h-3.5 w-3.5")} />}
72      {item.title}
73    </Link>
74  )
75}
76 
77function SidebarLight({ items, className }: SidebarLightProps) {
78  const pathname = usePathname()
79 
80  return (
81    <aside className={cn("w-full", className)}>
82      <nav className="space-y-1">
83        {items.map((item, index) => (
84          <NavItemRenderer
85            key={item.href !== "#" ? item.href : `${item.title}-${index}`}
86            item={item}
87            pathname={pathname}
88            depth={0}
89          />
90        ))}
91      </nav>
92// … truncated