Vertical Sidebar

import { useState } from 'react'
import { Home, Settings, Users, ChevronLeft, ChevronRight } from 'lucide-react'

const navItems = [
  { icon: Home, label: 'Home', href: '/' },
  { icon: Users, label: 'Team', href: '/team', count: 12 },
  { icon: Settings, label: 'Settings', href: '/settings' },
]

function Sidebar() {
  const [collapsed, setCollapsed] = useState(false)
  const [active, setActive] = useState('Home')

  return (
    <aside className={`${collapsed ? 'w-16' : 'w-64'} flex flex-col h-screen`}>
      {/* Header with collapse button */}
      <div className="flex items-center justify-between p-4 border-b">
        {!collapsed && <span className="font-semibold">App Name</span>}
        <button onClick={() => setCollapsed(!collapsed)}>
          {collapsed ? <ChevronRight /> : <ChevronLeft />}
        </button>
      </div>

      {/* Navigation items */}
      <nav className="flex-1 p-3 space-y-1">
        {navItems.map((item) => (
          <button
            key={item.label}
            onClick={() => setActive(item.label)}
            className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg ${
              active === item.label ? 'bg-indigo-50 text-indigo-600' : ''
            }`}
          >
            <item.icon className="w-5 h-5" />
            {!collapsed && <span>{item.label}</span>}
          </button>
        ))}
      </nav>

      {/* User section */}
      <div className="p-3 border-t">
        <div className="flex items-center gap-3 p-2">
          <div className="w-8 h-8 bg-indigo-500 rounded-full" />
          {!collapsed && <span>User Name</span>}
        </div>
      </div>
    </aside>
  )
}