Advanced pages. Model-driven controls.

web/src/components/AppSidebar.tsx

@@ -1,5 +1,5 @@
 import { NavLink } from 'react-router';
-import { Sun, Moon, Monitor, Shield, Lock, ShieldAlert, Wifi, LayoutDashboard, Globe, CloudLightning } from 'lucide-react';
+import { Sun, Moon, Monitor, Shield, Lock, ShieldAlert, Wifi, LayoutDashboard, Globe, CloudLightning, Network } from 'lucide-react';
 import {
   Sidebar,
   SidebarContent,
@@ -66,6 +66,14 @@ export function AppSidebar() {
     { to: '/central/dhcp', icon: Wifi, label: 'DHCP', daemon: 'dnsmasq' as const },
   ];
 
+  const advancedItems = [
+    { to: '/central/advanced/haproxy', icon: Network, label: 'HAProxy', daemon: 'haproxy' as const },
+    { to: '/central/advanced/dnsmasq', icon: Wifi, label: 'dnsmasq', daemon: 'dnsmasq' as const },
+    { to: '/central/advanced/nftables', icon: Shield, label: 'nftables', daemon: 'nftables' as const },
+    { to: '/central/advanced/wireguard', icon: Lock, label: 'WireGuard', daemon: 'wireguard' as const },
+    { to: '/central/advanced/crowdsec', icon: ShieldAlert, label: 'CrowdSec', daemon: 'crowdsec' as const },
+  ];
+
   return (
     <Sidebar variant="sidebar" collapsible="icon">
       <SidebarHeader>
@@ -82,7 +90,7 @@ export function AppSidebar() {
       <SidebarContent>
         {state === 'collapsed' ? (
           <SidebarMenu>
-            {[...domainsItems, ...centralItems].map((item) => {
+            {[...domainsItems, ...centralItems, ...advancedItems].map((item) => {
               const daemon = 'daemon' in item ? (item as any).daemon : undefined;
               const active = daemon ? centralStatus?.daemons?.[daemon]?.active : undefined;
               return (
@@ -149,6 +157,32 @@ export function AppSidebar() {
                 </SidebarMenu>
               </SidebarGroupContent>
             </SidebarGroup>
+
+            <SidebarGroup>
+              <SidebarGroupLabel>Advanced</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {advancedItems.map(({ to, icon: Icon, label, daemon }) => {
+                    const active = centralStatus?.daemons?.[daemon]?.active;
+                    return (
+                      <SidebarMenuItem key={to}>
+                        <NavLink to={to}>
+                          {({ isActive }) => (
+                            <SidebarMenuButton isActive={isActive}>
+                              <Icon className="h-4 w-4" />
+                              <span className="truncate">{label}</span>
+                              {active !== undefined && (
+                                <span className={`ml-auto h-1.5 w-1.5 rounded-full ${active ? 'bg-green-500' : 'bg-red-500'}`} />
+                              )}
+                            </SidebarMenuButton>
+                          )}
+                        </NavLink>
+                      </SidebarMenuItem>
+                    );
+                  })}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
           </>
         )}
       </SidebarContent>