users/app/components/Sidebar.tsx

'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Home, Database, Users, Bot } from 'lucide-react'
import { cn } from '@/lib/utils'

const NAV_ITEMS = [
  { href: '/', label: '首页', icon: Home },
  { href: '/data-platform', label: '数据中台', icon: Database },
  { href: '/user-portrait', label: '画像', icon: Users },
  { href: '/ai-assistant', label: 'AI智能助手', icon: Bot },
] as const

export default function Sidebar() {
  const pathname = usePathname()

  return (
    <aside className="hidden md:block w-56 shrink-0 border-r bg-white">
      <nav className="p-3">
        <ul className="space-y-1">
          {NAV_ITEMS.map(({ href, label, icon: Icon }) => {
            const active = pathname === href || pathname.startsWith(`${href}/`)
            return (
              <li key={href}>
                <Link
                  href={href}
                  aria-current={active ? 'page' : undefined}
                  className={cn(
                    'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
                    active
                      ? 'bg-gray-900 text-white'
                      : 'text-gray-700 hover:bg-gray-100',
                  )}
                >
                  <Icon className="h-4 w-4" />
                  <span>{label}</span>
                </Link>
              </li>
            )
          })}
        </ul>
      </nav>
    </aside>
  )
}