leocrm/frontend/src/components/layout/Sidebar.tsx

import React, { useState, useEffect } from 'react';
import clsx from 'clsx';
import { NavLink, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useUIStore } from '@/store/uiStore';
import { Calendar, ChevronRight, FileText, Home, Mail, Monitor, Users } from 'lucide-react';

interface NavLeaf {
  to: string;
  labelKey: string;
}

interface NavTreeItem {
  labelKey: string;
  icon: React.ReactNode;
  children: NavLeaf[];
}

interface NavSingleItem {
  to: string;
  labelKey: string;
  icon: React.ReactNode;
}

const chevronIcon = (expanded: boolean) => (
  <ChevronRight className={clsx('w-4 h-4 flex-shrink-0 transition-transform duration-200', expanded ? 'rotate-90' : '')} aria-hidden="true" strokeWidth={2} />
);

const singleItems: NavSingleItem[] = [
  { to: '/dashboard', labelKey: 'nav.dashboard', icon: <Home className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} /> },
  { to: '/contacts', labelKey: 'nav.contacts', icon: <Users className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} /> },
];

const treeItems: NavTreeItem[] = [
  {
    labelKey: 'nav.calendar',
    icon: <Calendar className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />,
    children: [
      { to: '/calendar', labelKey: 'nav.calendar' },
      { to: '/calendar/kanban', labelKey: 'nav.calendarKanban' },
    ],
  },
  {
    labelKey: 'nav.files',
    icon: <FileText className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />,
    children: [
      { to: '/dms', labelKey: 'nav.files' },
      { to: '/dms/trash', labelKey: 'nav.filesTrash' },
    ],
  },
  {
    labelKey: 'nav.email',
    icon: <Mail className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />,
    children: [
      { to: '/mail', labelKey: 'nav.email' },
      { to: '/mail/settings', labelKey: 'nav.emailSettings' },
    ],
  },
];

const bottomItems: NavSingleItem[] = [
  { to: '/ai-assistant', labelKey: 'nav.aiAssistant', icon: <Monitor className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} /> },
];

export function Sidebar() {
  const { t } = useTranslation();
  const { sidebarOpen, setSidebarOpen } = useUIStore();
  const location = useLocation();

  const initialExpanded = treeItems
    .filter((item) => item.children.some((child) => location.pathname.startsWith(child.to)))
    .map((item) => item.labelKey);
  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set(initialExpanded));

  useEffect(() => {
    setExpandedItems((prev) => {
      const next = new Set(prev);
      treeItems.forEach((item) => {
        const isActive = item.children.some((child) => location.pathname.startsWith(child.to));
        if (isActive) next.add(item.labelKey);
      });
      return next;
    });
  }, [location.pathname]);

  const toggleExpand = (labelKey: string) => {
    setExpandedItems((prev) => {
      const next = new Set(prev);
      if (next.has(labelKey)) next.delete(labelKey);
      else next.add(labelKey);
      return next;
    });
  };

  const isChildActive = (children: NavLeaf[]) =>
    children.some((child) => location.pathname.startsWith(child.to));

  return (
    <>
      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-secondary-900/50 z-30 md:hidden"
          onClick={() => setSidebarOpen(false)}
          aria-hidden="true"
          data-testid="sidebar-overlay"
        />
      )}
      <aside
        className={clsx(
          'fixed md:static inset-y-0 left-0 z-40 w-56 bg-secondary-900 text-secondary-300',
          'flex flex-col transition-transform motion-safe:duration-300',
          sidebarOpen ? 'translate-x-0' : '-translate-x-full md:hidden'
        )}
        aria-label="Seitenleiste Navigation"
        data-testid="sidebar"
      >
        <div className="h-[58px] flex items-center px-4 border-b border-secondary-700">
          <span className="text-xl font-bold text-white">leocrm</span>
        </div>
        <nav className="flex-1 overflow-y-auto py-4" aria-label="Hauptnavigation">
          <ul className="space-y-1 px-2">
            {singleItems.map((item) => (
              <li key={item.to}>
                <NavLink
                  to={item.to}
                  className={({ isActive }) =>
                    clsx(
                      'flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium min-h-touch',
                      'motion-safe:transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
                      isActive
                        ? 'bg-primary-600 text-white'
                        : 'hover:bg-secondary-800 hover:text-white'
                    )
                  }
                  aria-label={t(item.labelKey)}
                >
                  {item.icon}
                  <span className="truncate">{t(item.labelKey)}</span>
                </NavLink>
              </li>
            ))}

            {treeItems.map((item) => {
              const expanded = expandedItems.has(item.labelKey);
              const childActive = isChildActive(item.children);
              return (
                <li key={item.labelKey}>
                  <div
                    className={clsx(
                      'flex items-center gap-2 px-3 py-2.5 rounded-md text-sm font-medium min-h-touch',
                      'motion-safe:transition-colors cursor-pointer select-none',
                      childActive
                        ? 'text-white'
                        : 'text-secondary-300 hover:bg-secondary-800 hover:text-white'
                    )}
                    onClick={() => toggleExpand(item.labelKey)}
                    role="button"
                    tabIndex={0}
                    aria-expanded={expanded}
                    aria-label={t(item.labelKey)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        toggleExpand(item.labelKey);
                      }
                    }}
                  >
                    {item.icon}
                    <span className="flex-1 truncate">{t(item.labelKey)}</span>
                    {chevronIcon(expanded)}
                  </div>
                  {expanded && (
                    <ul className="mt-1 ml-4 space-y-1 border-l border-secondary-700 pl-2" role="group">
                      {item.children.map((child) => (
                        <li key={child.to}>
                          <NavLink
                            to={child.to}
                            className={({ isActive }) =>
                              clsx(
                                'flex items-center gap-2 px-3 py-2 rounded-md text-sm min-h-touch',
                                'motion-safe:transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
                                isActive
                                  ? 'bg-primary-600 text-white font-medium'
                                  : 'text-secondary-400 hover:bg-secondary-800 hover:text-white'
                              )
                            }
                            aria-label={t(child.labelKey)}
                          >
                            <span className="truncate">{t(child.labelKey)}</span>
                          </NavLink>
                        </li>
                      ))}
                    </ul>
                  )}
                </li>
              );
            })}

            {bottomItems.map((item) => (
              <li key={item.to}>
                <NavLink
                  to={item.to}
                  className={({ isActive }) =>
                    clsx(
                      'flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium min-h-touch',
                      'motion-safe:transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
                      isActive
                        ? 'bg-primary-600 text-white'
                        : 'hover:bg-secondary-800 hover:text-white'
                    )
                  }
                  aria-label={t(item.labelKey)}
                >
                  {item.icon}
                  <span className="truncate">{t(item.labelKey)}</span>
                </NavLink>
              </li>
            ))}
          </ul>
        </nav>
      </aside>
    </>
  );
}