Menü als flache Liste (Paket E)

Acht Einträge ohne Gruppenüberschriften: Tickets, Planboard, Roadmaps,
Projekte, Kunden, Leads, Finanzen und für Admins Admin.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed 2026-09-27 16:19:10 +00:00
1 parent 1a8604f7e6
commit 31144148d1
1 file changed
+23 -44
+23 -44
View File
@@ -26,33 +26,16 @@ export default function Sidebar() {
navigate('/login')
}
const groups = [
{
label: 'Betrieb',
links: [
{ label: 'Tickets', href: '/tickets', icon: <IconTicket /> },
{ label: 'Planboard', href: '/planboard', icon: <IconCalendar /> },
{ label: 'Roadmaps', href: '/roadmaps', icon: <IconRoute /> },
{ label: 'Projekte', href: '/projects', icon: <IconFolders /> },
],
},
{
label: 'CRM',
links: [
{ label: 'Kunden', href: '/customers', icon: <IconUsers /> },
{ label: 'Leads', href: '/leads', icon: <IconTargetArrow /> },
],
},
{
label: 'Finanzen',
links: [{ label: 'Finanzen', href: '/finance', icon: <IconReportMoney /> }],
},
{
label: 'System',
links: [
...(isAdmin ? [{ label: 'Admin', href: '/admin', icon: <IconSettings /> }] : []),
],
},
// Eine flache Liste: fuer ein kleines Team reichen acht Eintraege ohne Gruppen
const links = [
{ label: 'Tickets', href: '/tickets', icon: <IconTicket /> },
{ label: 'Planboard', href: '/planboard', icon: <IconCalendar /> },
{ label: 'Roadmaps', href: '/roadmaps', icon: <IconRoute /> },
{ label: 'Projekte', href: '/projects', icon: <IconFolders /> },
{ label: 'Kunden', href: '/customers', icon: <IconUsers /> },
{ label: 'Leads', href: '/leads', icon: <IconTargetArrow /> },
{ label: 'Finanzen', href: '/finance', icon: <IconReportMoney /> },
...(isAdmin ? [{ label: 'Admin', href: '/admin', icon: <IconSettings /> }] : []),
]
const isActive = (href) =>
@@ -69,23 +52,19 @@ export default function Sidebar() {
</div>
<nav className="side-nav">
{/* Gruppen ohne Eintrag (System fuer Nicht-Admins) nicht anzeigen */}
{groups.filter((group) => group.links.length > 0).map((group) => (
<div className="side-group" key={group.label}>
<div className="side-group-label">{group.label}</div>
{group.links.map((link) => (
<Link
key={link.href}
to={link.href}
className={`side-link ${isActive(link.href) ? 'active' : ''}`}
title={link.label}
>
{link.icon}
<span className="side-link-label">{link.label}</span>
</Link>
))}
</div>
))}
<div className="side-group">
{links.map((link) => (
<Link
key={link.href}
to={link.href}
className={`side-link ${isActive(link.href) ? 'active' : ''}`}
title={link.label}
>
{link.icon}
<span className="side-link-label">{link.label}</span>
</Link>
))}
</div>
</nav>
<div className="side-foot">