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/AppLayout.tsx

@@ -1,25 +1,52 @@
-import { Layout } from 'antd'
-import { Outlet } from 'react-router-dom'
+import { useState } from 'react'
+import { Outlet, useLocation } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 
-import Header from './Header'
 import Sidebar from './Sidebar'
+import Header from './Header'
 import UpdateBanner from '../UpdateBanner'
 
-const { Sider, Content } = Layout
+// PAGE_TITLES maps the pathname to an i18n nav key. Header reads
+// this to render "where you are". Empty fallback = app.title.
+const PAGE_TITLES: Record<string, string> = {
+  '/dashboard':     'nav.dashboard',
+  '/domains':       'nav.domains',
+  '/backends':      'nav.backends',
+  '/routing-rules': 'nav.routing',
+  '/networks':      'nav.networks',
+  '/ip-addresses':  'nav.ipAddresses',
+  '/cluster':       'nav.cluster',
+  '/settings':      'nav.settings',
+}
 
 export default function AppLayout() {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  const location = useLocation()
+  const { t } = useTranslation()
+
+  const titleKey = Object.entries(PAGE_TITLES)
+    .find(([p]) => location.pathname === p || location.pathname.startsWith(p + '/'))?.[1]
+  const title = titleKey ? t(titleKey) : t('app.title')
+
   return (
-    <Layout style={{ minHeight: '100vh' }}>
-      <Sider width={220} theme="dark">
-        <Sidebar />
-      </Sider>
-      <Layout>
-        <Header />
+    <div className="app-layout">
+      {sidebarOpen && (
+        <div
+          className="sidebar-overlay"
+          onClick={() => setSidebarOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+
+      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+
+      <main className="main-content">
+        <Header pageTitle={title} onMenuToggle={() => setSidebarOpen(true)} />
         <UpdateBanner />
-        <Content style={{ padding: '24px', background: '#f5f5f5' }}>
+        <div className="content-area">
           <Outlet />
-        </Content>
-      </Layout>
-    </Layout>
+        </div>
+      </main>
+    </div>
   )
 }

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

@@ -1,15 +1,18 @@
-import { LogoutOutlined, UserOutlined } from '@ant-design/icons'
-import { Dropdown, Layout, Space, Typography } from 'antd'
+import { Button, Dropdown, Select, Space } from 'antd'
+import { GlobalOutlined, LogoutOutlined, MenuOutlined, UserOutlined } from '@ant-design/icons'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
 import apiClient from '../../api/client'
 import { useAuthStore } from '../../stores/auth'
 
-const { Header: AntHeader } = Layout
+interface HeaderProps {
+  pageTitle: string
+  onMenuToggle: () => void
+}
 
-export default function Header() {
-  const { t } = useTranslation()
+export default function Header({ pageTitle, onMenuToggle }: HeaderProps) {
+  const { t, i18n } = useTranslation()
   const navigate = useNavigate()
   const user = useAuthStore((s) => s.user)
   const clear = useAuthStore((s) => s.clear)
@@ -20,25 +23,55 @@ export default function Header() {
     navigate('/login', { replace: true })
   }
 
+  const onLangChange = (value: string) => {
+    void i18n.changeLanguage(value)
+  }
+
   return (
-    <AntHeader style={{ background: '#fff', padding: '0 24px', display: 'flex', justifyContent: 'flex-end' }}>
-      <Dropdown
-        menu={{
-          items: [
-            {
-              key: 'logout',
-              icon: <LogoutOutlined />,
-              label: t('auth.logout'),
-              onClick: onLogout,
-            },
-          ],
-        }}
-      >
-        <Space style={{ cursor: 'pointer' }}>
-          <UserOutlined />
-          <Typography.Text>{user?.actor ?? '—'}</Typography.Text>
-        </Space>
-      </Dropdown>
-    </AntHeader>
+    <header className="header">
+      <div className="header-left">
+        <Button
+          type="text"
+          icon={<MenuOutlined />}
+          onClick={onMenuToggle}
+          className="header-menu-toggle"
+          aria-label="Toggle navigation"
+        />
+        <h1 className="header-title">{pageTitle}</h1>
+      </div>
+      <div className="header-actions">
+        <Select
+          size="small"
+          value={i18n.resolvedLanguage ?? 'de'}
+          onChange={onLangChange}
+          suffixIcon={<GlobalOutlined />}
+          variant="borderless"
+          options={[
+            { value: 'de', label: 'DE' },
+            { value: 'en', label: 'EN' },
+          ]}
+          popupMatchSelectWidth={false}
+        />
+        {user && (
+          <Dropdown
+            menu={{
+              items: [
+                {
+                  key: 'logout',
+                  icon: <LogoutOutlined />,
+                  label: t('auth.logout'),
+                  onClick: onLogout,
+                },
+              ],
+            }}
+            placement="bottomRight"
+          >
+            <Button type="text" className="header-user">
+              <Space><UserOutlined />{user.actor}</Space>
+            </Button>
+          </Dropdown>
+        )}
+      </div>
+    </header>
   )
 }

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>
   )
 }