Sidebar: narrower width (w-56), tree structure with expandable sub-menus for Calendar, Files, Email

frontend/src/components/layout/Sidebar.tsx

@@ -1,33 +1,112 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import clsx from 'clsx';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useUIStore } from '@/store/uiStore';
 
-interface NavItem {
+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 navIcon = (path: string) => (
-  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+  <svg className="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={path} />
   </svg>
 );
 
-const navItems: NavItem[] = [
+const chevronIcon = (expanded: boolean) => (
+  <svg
+    className={clsx('w-4 h-4 flex-shrink-0 transition-transform duration-200', expanded ? 'rotate-90' : '')}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    aria-hidden="true"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+  </svg>
+);
+
+const singleItems: NavSingleItem[] = [
   { to: '/dashboard', labelKey: 'nav.dashboard', icon: navIcon('M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6') },
   { to: '/contacts', labelKey: 'nav.contacts', icon: navIcon('M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6-3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z') },
-  { to: '/calendar', labelKey: 'nav.calendar', icon: navIcon('M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z') },
+];
-  { to: '/dms', labelKey: 'nav.files', icon: navIcon('M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z') },
+
-  { to: '/mail', labelKey: 'nav.email', icon: navIcon('M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z') },
+const treeItems: NavTreeItem[] = [
+  {
+    labelKey: 'nav.calendar',
+    icon: navIcon('M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'),
+    children: [
+      { to: '/calendar', labelKey: 'nav.calendar' },
+      { to: '/calendar/kanban', labelKey: 'nav.calendarKanban' },
+    ],
+  },
+  {
+    labelKey: 'nav.files',
+    icon: navIcon('M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'),
+    children: [
+      { to: '/dms', labelKey: 'nav.files' },
+      { to: '/dms/trash', labelKey: 'nav.filesTrash' },
+    ],
+  },
+  {
+    labelKey: 'nav.email',
+    icon: navIcon('M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'),
+    children: [
+      { to: '/mail', labelKey: 'nav.email' },
+      { to: '/mail/settings', labelKey: 'nav.emailSettings' },
+    ],
+  },
+];
+
+const bottomItems: NavSingleItem[] = [
   { to: '/ai-assistant', labelKey: 'nav.aiAssistant', icon: navIcon('M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z') },
 ];
 
 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 (
     <>
@@ -41,19 +120,19 @@ export function Sidebar() {
       )}
       <aside
         className={clsx(
-          'fixed md:static inset-y-0 left-0 z-40 w-64 bg-secondary-900 text-secondary-300',
+          '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-16 flex items-center px-6 border-b border-secondary-700">
+        <div className="h-16 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-3">
+          <ul className="space-y-1 px-2">
-            {navItems.map((item) => (
+            {singleItems.map((item) => (
               <li key={item.to}>
                 <NavLink
                   to={item.to}
@@ -69,7 +148,84 @@ export function Sidebar() {
                   aria-label={t(item.labelKey)}
                 >
                   {item.icon}
-                  <span>{t(item.labelKey)}</span>
+                  <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>
             ))}

frontend/src/i18n/locales/de.json

@@ -8,8 +8,11 @@
     "companies": "Firmen",
     "contacts": "Kontakte",
     "calendar": "Kalender",
+    "calendarKanban": "Kanban",
     "files": "Dateien",
+    "filesTrash": "Papierkorb",
     "email": "E-Mail",
+    "emailSettings": "E-Mail Einstellungen",
     "users": "Benutzer",
     "auditLog": "Audit-Log",
     "settings": "Einstellungen",

frontend/src/i18n/locales/en.json

@@ -8,8 +8,11 @@
     "companies": "Companies",
     "contacts": "Contacts",
     "calendar": "Calendar",
+    "calendarKanban": "Kanban",
     "files": "Files",
+    "filesTrash": "Trash",
     "email": "Email",
+    "emailSettings": "Mail Settings",
     "users": "Users",
     "auditLog": "Audit Log",
     "settings": "Settings",