Vertical Sidebar

import { useState } from 'react'
import Link from 'next/link'
import { Home, Users, Settings } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'

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

export function Sidebar() {
 const [active, setActive] = useState('home')

 return (
 <aside className="w-60 bg-white dark:bg-slate-900 border-r border-border-default flex flex-col h-screen">
 {/* Header */}
 <div className="h-14 px-4 border-b border-border-default flex items-center gap-2">
 <div className="w-7 h-7 rounded-lg bg-primary-default" />
 <span className="font-semibold text-foreground-default">My App</span>
 </div>

 {/* Nav */}
 <nav className="flex-1 p-3">
 <ul className="space-y-0.5">
 {navItems.map(({ id, label, icon: Icon, count }) => (
 <li key={id}>
 <button
 onClick={() => setActive(id)}
 aria-current={active === id ? 'page' : undefined}
 className={cn(
 'w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm',
 active === id
 ? 'bg-indigo-50 dark:bg-indigo-950/50 text-primary-default font-medium'
 : 'text-foreground-subtle hover:bg-slate-50 dark:hover:bg-slate-800'
 )}
 >
 <Icon className="w-4 h-4 shrink-0" />
 <span className="flex-1 text-left">{label}</span>
 {count && <span className="text-xs text-foreground-muted">{count}</span>}
 </button>
 </li>
 ))}
 </ul>
 </nav>

 {/* User */}
 <div className="p-3 border-t border-border-default">
 <div className="flex items-center gap-2 p-2">
 <Avatar size="sm">
 <AvatarFallback>JS</AvatarFallback>
 </Avatar>
 <div className="flex-1 min-w-0">
 <p className="text-sm font-medium truncate">Jens Scholtanus</p>
 <p className="text-xs text-foreground-muted truncate">jens@app.io</p>
 </div>
 </div>
 </div>
 </aside>
 )
}