From 7e21fab33959819e95022755f418c3e2262f29db Mon Sep 17 00:00:00 2001
From: Debian <linux@myhorse.netcell-it.de>
Date: Tue, 12 May 2026 14:12:26 +0200
Subject: [PATCH] refactor(ui): Sidebar 1:1 an enconf-Pattern angleichen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- <aside> → <nav> als Root-Element
- Section-Label-Div NEBEN dem <ul> (vorher verschachtelt)
- <NavLink>-Callback → <Link> + location.pathname-Vergleich (Pattern
  identisch zu netcell-webpanel/management-ui/src/components/Layout/Sidebar.tsx)
- nmg-prefix CSS-Variable `--nmg-sidebar-text` entfernt, Textfarbe
  direkt #94A3B8 (enconf-Standard)

Färbung war schon enconf-konform (Gradient #0B1426→#101D33→#0D1829,
Akzent-Stab #1677ff mit color-mix tint), nur Struktur+Markup zogen
nach.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 VERSION                                       |  2 +-
 cmd/edgeguard-api/main.go                     |  2 +-
 cmd/edgeguard-ctl/main.go                     |  2 +-
 cmd/edgeguard-scheduler/main.go               |  2 +-
 .../src/components/Layout/Sidebar.tsx         | 51 +++++++++++--------
 management-ui/src/styles/enterprise.css       |  5 +-
 6 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/VERSION b/VERSION
index ed453e6..9f1a864 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-1.0.56
+1.0.57
diff --git a/cmd/edgeguard-api/main.go b/cmd/edgeguard-api/main.go
index ad8b589..a8a3d9d 100644
--- a/cmd/edgeguard-api/main.go
+++ b/cmd/edgeguard-api/main.go
@@ -48,7 +48,7 @@ import (
 	wgsvc "git.netcell-it.de/projekte/edgeguard-native/internal/services/wireguard"
 )
 
-var version = "1.0.56"
+var version = "1.0.57"
 
 func main() {
 	addr := os.Getenv("EDGEGUARD_API_ADDR")
diff --git a/cmd/edgeguard-ctl/main.go b/cmd/edgeguard-ctl/main.go
index bfc6dc8..960cfd2 100644
--- a/cmd/edgeguard-ctl/main.go
+++ b/cmd/edgeguard-ctl/main.go
@@ -9,7 +9,7 @@ import (
 	"os"
 )
 
-var version = "1.0.56"
+var version = "1.0.57"
 
 const usage = `edgeguard-ctl — EdgeGuard CLI
 
diff --git a/cmd/edgeguard-scheduler/main.go b/cmd/edgeguard-scheduler/main.go
index 0a881d0..652999a 100644
--- a/cmd/edgeguard-scheduler/main.go
+++ b/cmd/edgeguard-scheduler/main.go
@@ -24,7 +24,7 @@ import (
 	"git.netcell-it.de/projekte/edgeguard-native/internal/services/tlscerts"
 )
 
-var version = "1.0.56"
+var version = "1.0.57"
 
 const (
 	// renewTickInterval — how often we re-evaluate expiring certs.
diff --git a/management-ui/src/components/Layout/Sidebar.tsx b/management-ui/src/components/Layout/Sidebar.tsx
index 9d2de20..da00123 100644
--- a/management-ui/src/components/Layout/Sidebar.tsx
+++ b/management-ui/src/components/Layout/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { NavLink } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 import type { ReactNode } from 'react'
 import {
   ApartmentOutlined,
@@ -45,8 +45,6 @@ const NAV: NavSection[] = [
     items: [
       { path: '/domains',  labelKey: 'nav.domains',  icon: <GlobalOutlined /> },
       { path: '/backends', labelKey: 'nav.backends', icon: <DatabaseOutlined /> },
-      // /routing-rules erreichbar via Domain-Modal "Pfad-Routing"-Tab —
-      // kein eigener Nav-Eintrag mehr (war für 90% der Setups overkill).
     ],
   },
   {
@@ -77,42 +75,51 @@ const NAV: NavSection[] = [
   },
 ]
 
-const VERSION = '1.0.56'
+const VERSION = '1.0.57'
 
+// Sidebar-Pattern 1:1 aus netcell-webpanel (enconf) übernommen:
+// - <nav> als root, dunkler Gradient + Teal/Blue-Accent
+// - Section-Label-Div NEBEN dem <ul>, nicht verschachtelt
+// - <Link> + pathname-Vergleich für active-State (ein <li>.active::before
+//   rendert den Akzent-Stab links + tint die Item-Background)
+// CSS lebt in styles/enterprise.css (.sidebar*).
 export default function Sidebar({ isOpen, onClose }: SidebarProps) {
   const { t } = useTranslation()
+  const location = useLocation()
 
   return (
-    <aside className={`sidebar${isOpen ? ' open' : ''}`}>
+    <nav className={`sidebar${isOpen ? ' open' : ''}`}>
       <div className="sidebar-logo">
         <div className="sidebar-logo-icon">EG</div>
         <span className="sidebar-logo-text">{t('app.title')}</span>
       </div>
 
       {NAV.map((section) => (
-        <div key={section.labelKey} className="sidebar-section">
-          <div className="sidebar-section-label">{t(section.labelKey)}</div>
+        <div key={section.labelKey}>
+          <div className="sidebar-section">
+            <div className="sidebar-section-label">{t(section.labelKey)}</div>
+          </div>
           <ul className="sidebar-menu">
-            {section.items.map((item) => (
-              <li key={item.path} className="sidebar-menu-item">
-                <NavLink
-                  to={item.path}
-                  onClick={onClose}
-                  className={({ isActive }) =>
-                    isActive ? 'sidebar-menu-item active' : ''
-                  }
-                  end
+            {section.items.map((item) => {
+              const isActive = location.pathname === item.path
+                || location.pathname.startsWith(item.path + '/')
+              return (
+                <li
+                  key={item.path}
+                  className={`sidebar-menu-item${isActive ? ' active' : ''}`}
                 >
-                  {item.icon}
-                  <span>{t(item.labelKey)}</span>
-                </NavLink>
-              </li>
-            ))}
+                  <Link to={item.path} onClick={onClose}>
+                    {item.icon}
+                    <span>{t(item.labelKey)}</span>
+                  </Link>
+                </li>
+              )
+            })}
           </ul>
         </div>
       ))}
 
       <div className="sidebar-version">v{VERSION}</div>
-    </aside>
+    </nav>
   )
 }
diff --git a/management-ui/src/styles/enterprise.css b/management-ui/src/styles/enterprise.css
index 64ce237..596ba9a 100644
--- a/management-ui/src/styles/enterprise.css
+++ b/management-ui/src/styles/enterprise.css
@@ -136,10 +136,7 @@ h1, h2, h3, h4, h5, h6 {
   gap: 10px;
   padding: 8px 10px;
   font-size: 14px;
-  /* CSS-Variable --nmg-sidebar-text wird vom Sidebar-Komponente
-     gesetzt wenn das Branding eine eigene Textfarbe hat. Fallback:
-     #94A3B8 (Light-Slate, ursprünglicher Hardcode). */
-  color: var(--nmg-sidebar-text, #94A3B8);
+  color: #94A3B8;
   text-decoration: none;
   border-radius: 6px;
   transition: all 0.15s ease;