🚧 Update menu looks and behaviour

frontend/src/App.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { NavLink, Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { useAuth } from "./auth";
@@ -83,33 +84,70 @@ function RestartIndicator() {
 
 function Layout({ children }: { children: React.ReactNode }) {
   const { session, logout } = useAuth();
+  const location = useLocation();
+  // Exactly ONE group is open at a time (null = all closed). The group
+  // containing the ACTIVE page auto-opens, so navigation (including the
+  // restart-needed indicator link) always reveals its section.
+  const [openSection, setOpenSection] = useState<string | null>(null);
+
+  const activeSection = NAV_SECTIONS.find((section) =>
+    section.items.some(
+      (item) =>
+        item.to &&
+        item.to.split("#")[0] === location.pathname,
+    ),
+  );
+
   return (
     <div className="layout">
       <aside className="sidebar">
         <h1>MQTT Management</h1>
         <RestartIndicator />
         <nav>
-          {NAV_SECTIONS.map((section) => (
-            <div key={section.title} className="nav-section">
-              <h2>{section.title}</h2>
-              {section.items.map((item) =>
-                item.to ? (
-                  <NavLink key={item.label} to={item.to}>
-                    {item.label}
-                  </NavLink>
-                ) : (
-                  <button
-                    key={item.label}
-                    className="nav-disabled"
-                    disabled
-                    title={item.hint}
-                  >
-                    {item.label}
-                  </button>
-                ),
-              )}
-            </div>
-          ))}
+          {NAV_SECTIONS.map((section) => {
+            const isActive = activeSection?.title === section.title;
+            const isOpen =
+              openSection === section.title ||
+              (isActive && openSection === null);
+            return (
+              <div
+                key={section.title}
+                className={`nav-section${isOpen ? " open" : ""}`}
+              >
+                <button
+                  onClick={() =>
+                    setOpenSection(
+                      openSection === section.title ? null : section.title,
+                    )
+                  }
+                  aria-expanded={isOpen}
+                >
+                  {section.title}
+                  <span className="chevron">▸</span>
+                </button>
+                <div className="nav-items">
+                  <div>
+                    {section.items.map((item) =>
+                      item.to ? (
+                        <NavLink key={item.label} to={item.to}>
+                          {item.label}
+                        </NavLink>
+                      ) : (
+                        <button
+                          key={item.label}
+                          className="nav-disabled"
+                          disabled
+                          title={item.hint}
+                        >
+                          {item.label}
+                        </button>
+                      ),
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
         </nav>
         <p style={{ marginTop: "2rem", fontSize: "0.8rem", opacity: 0.7 }}>
           {session?.username} ({session?.role})