feat: Network/IP-Verwaltung + Mailguard-Design-Übernahme

Backend:
* Migration 0009_networks: network_interfaces (ethernet|vlan|bond|
  bridge|wireguard, role wan|lan|dmz|mgmt|cluster, parent + vlan_id
  für VLANs) + ip_addresses (interface_id FK, address+prefix, is_vip
  + vip_priority für Cluster-Failover-VIPs).
* Repos services/networkifs + services/ipaddresses + Models +
  Handler /api/v1/network-interfaces (CRUD + /:id/ip-addresses)
  und /api/v1/ip-addresses (CRUD).
* /api/v1/system/interfaces refactored auf Go-natives net.Interfaces()
  statt `ip -j addr show` shell-out — die systemd-Sandbox blockt
  AF_NETLINK auch für Go's runtime, deswegen edgeguard-api.service
  RestrictAddressFamilies um AF_NETLINK ergänzt. Output-Shape
  bleibt identisch (ifindex, ifname, flags[], mtu, link_type,
  address, addr_info[]) — Frontend muss nicht angepasst werden.

Frontend:
* Networks-Page (/networks): "System-discovered Interfaces"
  read-only Tags-Card oben, deklarierte Interfaces unten als
  Tabelle mit Modal-CRUD; Type-Switch zeigt parent+vlan_id-Felder
  bei type=vlan; Role-Tags farbig (wan blau, lan grün, dmz orange,
  mgmt purple, cluster magenta).
* IPAddresses-Page (/ip-addresses): Tabelle pro Interface, VIP-
  Toggle blendet vip_priority-Eingabe ein. Goldenes VIP-Tag in der
  Liste.
* Sidebar erweitert um Networks + IP-Adressen + section-grouping.

Design 1:1 von mail-gateway/management-ui/ übernommen:
* enterprise.css verbatim (Inter-Font via Google CDN statt local
  woff2), Sidebar 240px dunkler Gradient #0B1426→#101D33→#0D1829,
  branding-accent #1677ff für Active-State, abgerundete Cards mit
  shadow-Token, Header weiß mit subtilem backdrop-filter.
* AntD-Theme-Tokens: colorPrimary #0EA5E9, fontSize 13, fontFamily
  'Inter', controlHeight 34, borderRadius 6.
* Layout-Komponenten neu strukturiert: AppLayout/Sidebar/Header
  matchen mailguard-Klassen-Naming (.app-layout, .main-content,
  .sidebar-section, .sidebar-menu-item.active, .header-left, …).
* Sidebar mit 4 Sektionen (Übersicht / Routing / Netzwerk / System)
  + Logo-Header + Versions-Footer.

Live-deployed auf 89.163.205.6: Networks-Endpoint listet eth0
(89.163.205.6/24, MAC bc:24:11:64:29:e8) + lo, frontend zeigt sie
als System-Tags in der Networks-Page.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

management-ui/src/components/Layout/Sidebar.tsx

@@ -1,34 +1,100 @@
-import { ApartmentOutlined, BranchesOutlined, DashboardOutlined, DatabaseOutlined, GlobalOutlined, SettingOutlined } from '@ant-design/icons'
-import { Menu, Typography } from 'antd'
-import { useNavigate, useLocation } from 'react-router-dom'
+import { NavLink } from 'react-router-dom'
+import type { ReactNode } from 'react'
+import {
+  ApartmentOutlined,
+  BranchesOutlined,
+  ClusterOutlined,
+  DashboardOutlined,
+  DatabaseOutlined,
+  GlobalOutlined,
+  NodeIndexOutlined,
+  SettingOutlined,
+} from '@ant-design/icons'
 import { useTranslation } from 'react-i18next'
 
-export default function Sidebar() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
+interface SidebarProps {
+  isOpen: boolean
+  onClose?: () => void
+}
 
-  const items = [
-    { key: '/dashboard', icon: <DashboardOutlined />, label: t('nav.dashboard') },
-    { key: '/domains', icon: <GlobalOutlined />, label: t('nav.domains') },
-    { key: '/backends', icon: <DatabaseOutlined />, label: t('nav.backends') },
-    { key: '/routing-rules', icon: <BranchesOutlined />, label: t('nav.routing') },
-    { key: '/cluster', icon: <ApartmentOutlined />, label: t('nav.cluster') },
-    { key: '/settings', icon: <SettingOutlined />, label: t('nav.settings') },
-  ]
+interface NavItem {
+  path: string
+  labelKey: string
+  icon: ReactNode
+}
+
+interface NavSection {
+  labelKey: string
+  items: NavItem[]
+}
+
+const NAV: NavSection[] = [
+  {
+    labelKey: 'nav.section.overview',
+    items: [
+      { path: '/dashboard', labelKey: 'nav.dashboard', icon: <DashboardOutlined /> },
+    ],
+  },
+  {
+    labelKey: 'nav.section.routing',
+    items: [
+      { path: '/domains',       labelKey: 'nav.domains',       icon: <GlobalOutlined /> },
+      { path: '/backends',      labelKey: 'nav.backends',      icon: <DatabaseOutlined /> },
+      { path: '/routing-rules', labelKey: 'nav.routing',       icon: <BranchesOutlined /> },
+    ],
+  },
+  {
+    labelKey: 'nav.section.network',
+    items: [
+      { path: '/networks',     labelKey: 'nav.networks',    icon: <ClusterOutlined /> },
+      { path: '/ip-addresses', labelKey: 'nav.ipAddresses', icon: <NodeIndexOutlined /> },
+    ],
+  },
+  {
+    labelKey: 'nav.section.system',
+    items: [
+      { path: '/cluster',  labelKey: 'nav.cluster',  icon: <ApartmentOutlined /> },
+      { path: '/settings', labelKey: 'nav.settings', icon: <SettingOutlined /> },
+    ],
+  },
+]
+
+const VERSION = '0.0.1-dev'
+
+export default function Sidebar({ isOpen, onClose }: SidebarProps) {
+  const { t } = useTranslation()
 
   return (
-    <div>
-      <Typography.Title level={4} style={{ color: '#fff', padding: '16px', margin: 0 }}>
-        {t('app.title')}
-      </Typography.Title>
-      <Menu
-        theme="dark"
-        mode="inline"
-        selectedKeys={[location.pathname]}
-        items={items}
-        onClick={(e) => navigate(e.key)}
-      />
-    </div>
+    <aside 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>
+          <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
+                >
+                  {item.icon}
+                  <span>{t(item.labelKey)}</span>
+                </NavLink>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+
+      <div className="sidebar-version">v{VERSION}</div>
+    </aside>
   )
 }