Sidebar Nav

import { SidebarNav, SidebarNavHeader, SidebarNavContent, SidebarNavGroup, SidebarNavItem, SidebarNavFooter } from "@/components/ui/sidebar-nav";

export default function Example() {
  return <SidebarNav />;
}

"use client";

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

const SidebarNav = forwardRef(({ className, children, ...props }, ref) => (
  <aside ref={ref} className={cn("flex w-64 flex-col border-r bg-background", className)} {...props}>
    {children}
  </aside>
));
SidebarNav.displayName = "SidebarNav";

const SidebarNavHeader = forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex h-16 items-center border-b px-4 font-semibold", className)} {...props} />
));
SidebarNavHeader.displayName = "SidebarNavHeader";

const SidebarNavContent = forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex-1 overflow-auto p-3", className)} {...props} />
));
SidebarNavContent.displayName = "SidebarNavContent";

const SidebarNavGroup = forwardRef(({ className, label, children, ...props }, ref) => (
  <div ref={ref} className={cn("mb-4", className)} {...props}>
    {label && <div className="mb-1 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">{label}</div>}
    <div className="space-y-0.5">{children}</div>
  </div>
));
SidebarNavGroup.displayName = "SidebarNavGroup";

const SidebarNavItem = forwardRef(({ className, active, ...props }, ref) => (
  <a ref={ref} className={cn("flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground", active && "bg-accent text-foreground", className)} {...props} />
));
SidebarNavItem.displayName = "SidebarNavItem";

const SidebarNavFooter = forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("border-t p-3", className)} {...props} />
));
SidebarNavFooter.displayName = "SidebarNavFooter";

export { SidebarNav, SidebarNavHeader, SidebarNavContent, SidebarNavGroup, SidebarNavItem, SidebarNavFooter };