Responsive Sidebar Nav

1import { useState } from "react";
2                                                                                                                                                                                                             const NAV = [                                                                                                                                                                                                { group: "Main", items: [                                                                                                                                                                              
3      { label: "Dashboard", icon: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0h4", active: true },                                                                  
4      { label: "Components", icon: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6z", active: false },                    
5      { label: "Analytics", icon: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6m14 0V9a2 2 0 00-2-2h-2a2 2 0 00-2 2v10", active: false },                                                                        
6    ]},                                                                                                                                                                                                    
7    { group: "Settings", items: [                                                                                                                                                                          
8      { label: "Profile", icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z", active: false },                                                                                    
9      { label: "Billing", icon: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z", active: false },                                                                 
10    ]},                                                                                                                                                                                                    
11  ];                                                                                                                                                                                                                                                                                                                                                                                                                  
12  export default function SidebarNav() {                                                                                                                                                                   
13    const [collapsed, setCollapsed] = useState(false);
14                                                                                                                                                                                                               return (
15      <div className="flex min-h-screen bg-[#09090b]">                                                                                                                                                     
16        <aside className={`flex flex-col border-r border-zinc-800 bg-[#111113] transition-all duration-300 ${collapsed ? "w-16" : "w-60"}`}>                                                               
17          {/* Logo */}                                                                                                                                                                                     
18          <div className="flex h-14 items-center gap-2 border-b border-zinc-800 px-4">                                                                                                                     
19            <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-orange-500 text-xs font-bold text-white">F</div>                                                               
20            {!collapsed && <span className="text-sm font-semibold text-white">forged.wtf</span>}                                                                                                           
21          </div>                                                                                                                                                                                           
22                                                                                                                                                                                                                     {/* Nav */}                                                                                                                                                                                      
23          <nav className="flex-1 space-y-6 px-2 py-4">                                                                                                                                                     
24            {NAV.map((group) => (                                                                                                                                                                                        <div key={group.group}>
25                {!collapsed && <p className="mb-2 px-2 text-[10px] font-semibold uppercase tracking-wider text-zinc-500">{group.group}</p>}                                                                
26                <ul className="space-y-1">                                                                                                                                                                 
27                  {group.items.map((item) => (                                                                                                                                                             
28                    <li key={item.label}>                                                                                                                                                                                        <button className={`flex w-full items-center gap-3 rounded-lg px-2.5 py-2 text-sm transition ${                                                                                      
29                        item.active                                                                                                                                                                        
30                          ? "bg-orange-500/10 text-orange-400"                                                                                                                                                                       : "text-zinc-400 hover:bg-zinc-800 hover:text-white"                                                                                                                             
31                      }`}>                                                                                                                                                                                 
32                        <svg className="h-[18px] w-[18px] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>                                                               
33                          <path strokeLinecap="round" strokeLinejoin="round" d={item.icon} />                                                                                                                                      </svg>                                                                                                                                                                             
34                        {!collapsed && <span>{item.label}</span>}                                                                                                                                          
35                      </button>                                                                                                                                                                                                </li>
36                  ))}                                                                                                                                                                                      
37                </ul>
38              </div>
39            ))}                                                                                                                                                                                                      </nav>
40                                                                                                                                                                                                                     {/* Toggle */}                                                                                                                                                                                             <button                                                                                                                                                                                          
41            onClick={() => setCollapsed(!collapsed)}                                                                                                                                                       
42            className="border-t border-zinc-800 p-3 text-zinc-500 transition hover:text-white"
43          >                                                                                                                                                                                                            <svg className={`mx-auto h-4 w-4 transition-transform ${collapsed ? "rotate-180" : ""}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
44              <path strokeLinecap="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />                                                                                                                             
45            </svg>                                                                                                                                                                                                   </button>                                                                                                                                                                                        
46        </aside>                                                                                                                                                                                           
47                                                                                                                                                                                                                   {/* Main content placeholder */}
48        <main className="flex flex-1 items-center justify-center">                                                                                                                                         
49          <p className="text-zinc-600">Main content area</p>
50        </main>                                                                                                                                                                                                  </div>
51    );                                                                                                                                                                                                     
52  }