kit-ui/components/layout/AppSidebar.tsx

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { X } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import Logo from '@/components/Logo';
import { useSidebar } from './SidebarProvider';
import { Button } from '@/components/ui/button';
import { tools } from '@/lib/tools';

export function AppSidebar() {
  const pathname = usePathname();
  const { isOpen, isCollapsed, close } = useSidebar();

  return (
    <>
      {/* Mobile Overlay Backdrop */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-transparent backdrop-blur-sm z-40 lg:hidden"
          onClick={close}
        />
      )}

      <aside className={cn(
        "fixed inset-y-0 left-0 z-50 flex flex-col border-r border-border bg-background/20 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative lg:h-full",
        isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
        isCollapsed ? "lg:w-14" : "w-64"
      )}>
        {/* Sidebar Header */}
        <div className={cn(
          "flex h-16 items-center shrink-0 border-b border-border",
          isCollapsed ? "justify-center px-2" : "justify-between px-5"
        )}>
          <Link href="/" className={cn(
            "flex items-center group overflow-hidden",
            isCollapsed ? "justify-center" : "gap-3"
          )}>
            <div className="shrink-0">
              <Logo size={isCollapsed ? 20 : 28} />
            </div>
            {!isCollapsed && (
              <div className="min-w-0">
                <span className="font-bold text-lg leading-tight block text-foreground">
                  Kit
                </span>
                <span className="text-[10px] leading-tight text-muted-foreground block">
                  Browser-first toolkit
                </span>
              </div>
            )}
          </Link>
          {!isCollapsed && (
            <Button
              variant="ghost"
              size="icon"
              className="lg:hidden text-muted-foreground"
              onClick={close}
            >
              <X className="h-5 w-5" />
            </Button>
          )}
        </div>

        {/* Navigation */}
        <nav className={cn(
          "flex-1 overflow-y-auto py-2 space-y-6 mt-4 overflow-hidden scrollbar",
          isCollapsed ? "px-2" : "px-4"
        )}>
          <div className="space-y-0.5">
            {tools.map((tool) => {
              const isActive = pathname === tool.href || (tool.href !== '/' && pathname.startsWith(tool.href));
              const Icon = tool.icon;

              return (
                <div key={tool.href} className="space-y-1">
                  <Link
                    href={tool.href}
                    onClick={() => { if (window.innerWidth < 1024) close(); }}
                    className={cn(
                      "flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300 relative group/item",
                      isActive
                        ? "bg-primary/10 text-primary border-l-2 border-primary"
                        : "text-foreground/80 hover:bg-accent/50 hover:text-foreground",
                      isCollapsed ? "justify-center" : "justify-between"
                    )}
                    title={isCollapsed ? tool.navTitle : undefined}
                  >
                    <div className="flex items-center gap-3 min-w-0">
                      <span className={cn(
                        "transition-colors duration-300 shrink-0",
                        isActive ? "text-primary" : "text-foreground/80 group-hover/item:text-foreground"
                      )}>
                        <Icon className="h-4 w-4" />
                      </span>
                      {!isCollapsed && (
                        <div className="min-w-0">
                          <span className="whitespace-nowrap block">{tool.navTitle}</span>
                          <span className="text-[10px] text-muted-foreground leading-tight block line-clamp-2">{tool.description}</span>
                        </div>
                      )}
                    </div>
                  </Link>
                </div>
              );
            })}
          </div>
        </nav>

      </aside>
    </>
  );
}