Leopoldadmin/leocrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Agent Zero
2026-07-21 22:18:19 +02:00
parent 157ff7dfc9
commit 5adaee25a0
3 changed files with 175 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/layout/Sidebar.tsx
+169 -13
View File
@@ -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">
{navItems.map((item) => (
<ul className="space-y-1 px-2">
{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>
))}