From 98aa7c0bcdcfd9384c395ccc1802cc43b53f0dd7 Mon Sep 17 00:00:00 2001 From: Debian Date: Sun, 31 May 2026 18:54:51 +0200 Subject: [PATCH] =?UTF-8?q?fix(sidebar):=20Navigationspunkte=20besser=20le?= =?UTF-8?q?sbar=20=E2=80=94=20Kontrast=20+=20Trennlinien?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - sidebar-section-label: #475569 → rgba(255,255,255,0.38) (Kontrast ~5:1) - Aktiver Eintrag: color: #60a5fa + font-weight 500 statt #1677ff - Hover: rgba(255,255,255,0.88) statt #CBD5E1 - Ruhige Items: rgba(255,255,255,0.6) statt #94A3B8 - Child-Items: rgba(255,255,255,0.42), eingerückt 32px - sidebar-section--bordered: Trennlinie zwischen Sektionsgruppen - Sektions-Padding leicht erhöht (18px oben) Co-Authored-By: Claude Sonnet 4.6 --- VERSION | 2 +- .../src/components/Layout/Sidebar.tsx | 4 +- management-ui/src/styles/enterprise.css | 52 ++++++++++++------- 3 files changed, 35 insertions(+), 23 deletions(-) diff --git a/VERSION b/VERSION index 44a6f3f..99188f0 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.2.49 +1.2.50 diff --git a/management-ui/src/components/Layout/Sidebar.tsx b/management-ui/src/components/Layout/Sidebar.tsx index ef1ac03..96fabb5 100644 --- a/management-ui/src/components/Layout/Sidebar.tsx +++ b/management-ui/src/components/Layout/Sidebar.tsx @@ -130,9 +130,9 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) { {t('app.title')} - {NAV.map((section) => ( + {NAV.map((section, idx) => (
-
+
0 ? ' sidebar-section--bordered' : ''}`}>
{t(section.labelKey)}
    diff --git a/management-ui/src/styles/enterprise.css b/management-ui/src/styles/enterprise.css index ba76fd2..e380939 100644 --- a/management-ui/src/styles/enterprise.css +++ b/management-ui/src/styles/enterprise.css @@ -106,15 +106,21 @@ h1, h2, h3, h4, h5, h6 { } .sidebar-section { - padding: 16px 16px 4px; + padding: 18px 16px 4px; +} + +/* Trennlinie vor jeder Sektion außer der ersten */ +.sidebar-section--bordered { + border-top: 1px solid rgba(255,255,255,0.07); + padding-top: 14px; } .sidebar-section-label { font-size: 10px; - font-weight: 600; + font-weight: 700; text-transform: uppercase; - letter-spacing: 1.5px; - color: #475569; + letter-spacing: 1.8px; + color: rgba(255,255,255,0.38); margin-bottom: 4px; } @@ -134,9 +140,9 @@ h1, h2, h3, h4, h5, h6 { display: flex; align-items: center; gap: 10px; - padding: 8px 10px; - font-size: 14px; - color: #94A3B8; + padding: 7px 10px; + font-size: 13px; + color: rgba(255,255,255,0.6); text-decoration: none; border-radius: 6px; transition: all 0.15s ease; @@ -148,8 +154,8 @@ h1, h2, h3, h4, h5, h6 { .sidebar-menu-item a:hover, .sidebar-menu-item button:hover { - background: rgba(255,255,255,0.05); - color: #CBD5E1; + background: rgba(255,255,255,0.06); + color: rgba(255,255,255,0.88); } /* Child-Item: sub-nav unter einem Parent (z.B. /firewall/live unter @@ -157,17 +163,22 @@ h1, h2, h3, h4, h5, h6 { Hierarchie sofort sichtbar ist. */ .sidebar-menu-item--child a, .sidebar-menu-item--child button { - padding-left: 28px; - font-size: 13px; + padding-left: 32px; + font-size: 12px; + color: rgba(255,255,255,0.42); +} +.sidebar-menu-item--child:hover a, +.sidebar-menu-item--child:hover button { + color: rgba(255,255,255,0.75); } .sidebar-menu-item--child::after { content: ''; position: absolute; - left: 14px; - top: 14px; - bottom: 14px; + left: 18px; + top: 10px; + bottom: 10px; width: 1px; - background: rgba(255,255,255,0.08); + background: rgba(255,255,255,0.1); } .sidebar-menu-item.active::before { @@ -185,17 +196,18 @@ h1, h2, h3, h4, h5, h6 { .sidebar-menu-item.active a, .sidebar-menu-item.active button { - background: color-mix(in srgb, var(--branding-accent, #1677ff) 10%, transparent); - color: var(--branding-accent, #1677ff); + background: color-mix(in srgb, var(--branding-accent, #1677ff) 12%, transparent); + color: #60a5fa; + font-weight: 500; } .sidebar-version { margin-top: auto; - padding: 16px; + padding: 14px 16px; font-size: 11px; - color: #475569; + color: rgba(255,255,255,0.25); text-align: center; - border-top: 1px solid rgba(255,255,255,0.06); + border-top: 1px solid rgba(255,255,255,0.07); } .sidebar-logo-img {