Kairo-Jinkendo/frontend/src/components/DesktopSidebar.jsx

import { NavLink, useLocation } from 'react-router-dom'
import { LogOut } from 'lucide-react'
import { getAppNavItems, isNavItemActive } from '../config/appNav.js'
import { ContextIndicator } from './ContextIndicator.jsx'

export function DesktopSidebar({ capabilities, user, onLogout }) {
  const loc = useLocation()
  const items = getAppNavItems(capabilities)

  const initial = (user?.display_name || user?.email || '?').trim().slice(0, 1).toUpperCase()

  return (
    <aside className="desktop-sidebar" aria-label="Hauptnavigation">
      <div className="desktop-sidebar__brand">
        <div className="desktop-sidebar__logo" aria-hidden />
        <div className="desktop-sidebar__titles">
          <div className="desktop-sidebar__title">Kairo</div>
          <div className="desktop-sidebar__subtitle">Jinkendo</div>
        </div>
      </div>

      <ContextIndicator variant="desktop" />

      <nav className="desktop-sidebar__nav">
        {items.map((item) => (
          <NavLink
            key={item.key}
            to={item.to}
            end={!!item.end}
            className={({ isActive }) =>
              'desktop-sidebar__link' +
              (isNavItemActive(loc.pathname, item, isActive)
                ? ' desktop-sidebar__link--active'
                : '')
            }
          >
            <item.Icon size={20} strokeWidth={2} aria-hidden />
            <span>{item.label}</span>
          </NavLink>
        ))}
      </nav>

      <div className="desktop-sidebar__footer">
        <div className="desktop-sidebar__user-row">
          <div className="desktop-sidebar__avatar" aria-hidden>
            {initial}
          </div>
          <span className="desktop-sidebar__user-name">{user?.display_name || user?.email}</span>
          <button
            type="button"
            className="desktop-sidebar__logout"
            onClick={onLogout}
            title="Abmelden"
            aria-label="Abmelden"
          >
            <LogOut size={18} />
          </button>
        </div>
      </div>
    </aside>
  )
}