From a885db45c496f39c8547722ee365f06f1bfba7be Mon Sep 17 00:00:00 2001
From: Nicole Rappe <nicole.rappe@bunny-lab.io>
Date: Wed, 5 Nov 2025 21:59:51 -0700
Subject: [PATCH] Refreshed Navigation Sidebar Design

---
 .../payload.json                              |  23 -
 .../payload.json                              |  23 -
 .../payload.json                              |  19 -
 .../payload.json                              |  19 -
 .../payload.json                              |  19 -
 .../payload.json                              |  19 -
 Data/Engine/Assemblies/user_created.db        | Bin 36864 -> 36864 bytes
 .../web-interface/src/Navigation_Sidebar.jsx  | 534 +++++++-----------
 8 files changed, 211 insertions(+), 445 deletions(-)
 delete mode 100644 Data/Engine/Assemblies/Payloads/1e23a1b937a74cd69fc1df16d00386e3/payload.json
 delete mode 100644 Data/Engine/Assemblies/Payloads/24d2e1f0f47f4f61a96af204175733ca/payload.json
 delete mode 100644 Data/Engine/Assemblies/Payloads/6fd2d340642f4067b69fa1c45241ce29/payload.json
 delete mode 100644 Data/Engine/Assemblies/Payloads/a449231516a645b39a4eee42ff24d009/payload.json
 delete mode 100644 Data/Engine/Assemblies/Payloads/c1d5b41722444d24b9dd4da33f462cf2/payload.json
 delete mode 100644 Data/Engine/Assemblies/Payloads/c7ac1b6cf83a4e60a48cfff9a8dfb3fc/payload.json

diff --git a/Data/Engine/Assemblies/Payloads/1e23a1b937a74cd69fc1df16d00386e3/payload.json b/Data/Engine/Assemblies/Payloads/1e23a1b937a74cd69fc1df16d00386e3/payload.json
deleted file mode 100644
index 16ee2cf0..00000000
--- a/Data/Engine/Assemblies/Payloads/1e23a1b937a74cd69fc1df16d00386e3/payload.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "category": "script",
-  "description": "Import/export test script.",
-  "files": [],
-  "name": "Import Script",
-  "script": "V3JpdGUtSG9zdCAicm91bmQgdHJpcCBleHBvcnQi",
-  "script_encoding": "base64",
-  "sites": {
-    "mode": "all",
-    "values": []
-  },
-  "timeout_seconds": 45,
-  "type": "powershell",
-  "variables": [
-    {
-      "default": "",
-      "label": "Example",
-      "name": "example",
-      "type": "string"
-    }
-  ],
-  "version": 2
-}
\ No newline at end of file
diff --git a/Data/Engine/Assemblies/Payloads/24d2e1f0f47f4f61a96af204175733ca/payload.json b/Data/Engine/Assemblies/Payloads/24d2e1f0f47f4f61a96af204175733ca/payload.json
deleted file mode 100644
index 16ee2cf0..00000000
--- a/Data/Engine/Assemblies/Payloads/24d2e1f0f47f4f61a96af204175733ca/payload.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "category": "script",
-  "description": "Import/export test script.",
-  "files": [],
-  "name": "Import Script",
-  "script": "V3JpdGUtSG9zdCAicm91bmQgdHJpcCBleHBvcnQi",
-  "script_encoding": "base64",
-  "sites": {
-    "mode": "all",
-    "values": []
-  },
-  "timeout_seconds": 45,
-  "type": "powershell",
-  "variables": [
-    {
-      "default": "",
-      "label": "Example",
-      "name": "example",
-      "type": "string"
-    }
-  ],
-  "version": 2
-}
\ No newline at end of file
diff --git a/Data/Engine/Assemblies/Payloads/6fd2d340642f4067b69fa1c45241ce29/payload.json b/Data/Engine/Assemblies/Payloads/6fd2d340642f4067b69fa1c45241ce29/payload.json
deleted file mode 100644
index 178ec60c..00000000
--- a/Data/Engine/Assemblies/Payloads/6fd2d340642f4067b69fa1c45241ce29/payload.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "description": "Import/export workflow test.",
-  "edges": [],
-  "nodes": [
-    {
-      "data": {
-        "label": "Input",
-        "value": "example"
-      },
-      "id": "node-1",
-      "position": {
-        "x": 10,
-        "y": 20
-      },
-      "type": "DataNode"
-    }
-  ],
-  "tab_name": "Import Workflow"
-}
\ No newline at end of file
diff --git a/Data/Engine/Assemblies/Payloads/a449231516a645b39a4eee42ff24d009/payload.json b/Data/Engine/Assemblies/Payloads/a449231516a645b39a4eee42ff24d009/payload.json
deleted file mode 100644
index 178ec60c..00000000
--- a/Data/Engine/Assemblies/Payloads/a449231516a645b39a4eee42ff24d009/payload.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "description": "Import/export workflow test.",
-  "edges": [],
-  "nodes": [
-    {
-      "data": {
-        "label": "Input",
-        "value": "example"
-      },
-      "id": "node-1",
-      "position": {
-        "x": 10,
-        "y": 20
-      },
-      "type": "DataNode"
-    }
-  ],
-  "tab_name": "Import Workflow"
-}
\ No newline at end of file
diff --git a/Data/Engine/Assemblies/Payloads/c1d5b41722444d24b9dd4da33f462cf2/payload.json b/Data/Engine/Assemblies/Payloads/c1d5b41722444d24b9dd4da33f462cf2/payload.json
deleted file mode 100644
index 178ec60c..00000000
--- a/Data/Engine/Assemblies/Payloads/c1d5b41722444d24b9dd4da33f462cf2/payload.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "description": "Import/export workflow test.",
-  "edges": [],
-  "nodes": [
-    {
-      "data": {
-        "label": "Input",
-        "value": "example"
-      },
-      "id": "node-1",
-      "position": {
-        "x": 10,
-        "y": 20
-      },
-      "type": "DataNode"
-    }
-  ],
-  "tab_name": "Import Workflow"
-}
\ No newline at end of file
diff --git a/Data/Engine/Assemblies/Payloads/c7ac1b6cf83a4e60a48cfff9a8dfb3fc/payload.json b/Data/Engine/Assemblies/Payloads/c7ac1b6cf83a4e60a48cfff9a8dfb3fc/payload.json
deleted file mode 100644
index 178ec60c..00000000
--- a/Data/Engine/Assemblies/Payloads/c7ac1b6cf83a4e60a48cfff9a8dfb3fc/payload.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "description": "Import/export workflow test.",
-  "edges": [],
-  "nodes": [
-    {
-      "data": {
-        "label": "Input",
-        "value": "example"
-      },
-      "id": "node-1",
-      "position": {
-        "x": 10,
-        "y": 20
-      },
-      "type": "DataNode"
-    }
-  ],
-  "tab_name": "Import Workflow"
-}
\ No newline at end of file
diff --git a/Data/Engine/Assemblies/user_created.db b/Data/Engine/Assemblies/user_created.db
index 0398a0bd247e1c4db3167ff1aefe0390f2fa4ca4..86bdfe2eb574b9caa2759b9ac8c40541756b73f5 100644
GIT binary patch
delta 426
zcmZozz|^pSX@WE_D+2=qClIp(G0Q{^b5>Rcy*AB_DRcSd`4=*<@K0mlzsG-!e;WTz
zFkHyr34@yj9fJ8M7t8Ch@Lyz*n7mY8$DjWt18;eLQFdBRemM&lvm|42a#3bM2{X`a
zahNz0ki!KL=OWn#YZ7hX<&I`x<XFqVv6f@)W*!57ZWf>~mu`-?UMj-F!up?qH;8Kq
z$6D6^8ynxVZeDA#foZdF&|;R&Ya`Y%2>{&*0wBkO0*P(2K*9(9NdYV<8aE3BVCYof
z;=9Sf!ncKiUzu+UzX$&$Ak5{@<?DyR&58o5e3M=Krm*nmGI&kC+c$xQe>;Qf<idV8
Up!*m+C-3f81Tj=5Kj>Eg0PxUw=l}o!

delta 991
zcmZozz|^pSX@WE_3j+fKClIp(G1Ej1b5<4xy)KcBDRcSdfg)V|oeccn`0w!_<6p-=
zjsGS8MgE=q3;8=iaI>I8F#qIYc|8^$W?9C`OXYR^L5%YJqU^Ms{Bjm9W=Y24<f6=i
z5@uv^CQfEaPKY=c$u?Lcn?!^Syg(aR*tRk7260Dk<}vW+W^OLwn7koEd~>OFzX%T-
zlOR}%V=ddZ%>o7QStrkq*$z~~0#Y)$uwP;G2eU#(e?wC%V`DudBU4i|Ln8wtQ(Z$t
zT?69~12ZcEGFTM1YBNvXU?ILaCw2-G&?Y9JO%jv$^vgqSGPE)>(KE0xG&i<H(~MsR
zi{e&oMvzUD9{{~^FG`as8fb#Cp1Fa6nS~Liay&9v6a#}51Q>ys6@)hnBz)i(05KW)
ze*;Md7XIHOAV{;R6QscKVq*hm2EKj<{yTjC_?7v$^KIex;Je8`i9eUG9|Sim3aIi;
icI}(OqQdOUIQeeh1PG(B-wndp-LJ@^%<Rhvif{m@4Ed`7

diff --git a/Data/Engine/web-interface/src/Navigation_Sidebar.jsx b/Data/Engine/web-interface/src/Navigation_Sidebar.jsx
index c2a7d712..c78973fd 100644
--- a/Data/Engine/web-interface/src/Navigation_Sidebar.jsx
+++ b/Data/Engine/web-interface/src/Navigation_Sidebar.jsx
@@ -1,6 +1,6 @@
-////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Navigation_Sidebar.jsx
+// Navigation_Sidebar.jsx — Clean Modern Matte + Glass Sidebar (no accent bars or header bubbles)
 
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import {
   Accordion,
   AccordionSummary,
@@ -8,7 +8,8 @@ import {
   Typography,
   Box,
   ListItemButton,
-  ListItemText
+  ListItemText,
+  Divider,
 } from "@mui/material";
 import {
   ExpandMore as ExpandMoreIcon,
@@ -16,21 +17,29 @@ import {
   FilterAlt as FilterIcon,
   Groups as GroupsIcon,
   Work as JobsIcon,
-  Polyline as WorkflowsIcon,
-  Code as ScriptIcon,
   PeopleOutline as CommunityIcon,
-  Apps as AssembliesIcon
-} from "@mui/icons-material";
-import { LocationCity as SitesIcon } from "@mui/icons-material";
-import {
+  Apps as AssembliesIcon,
+  LocationCity as SitesIcon,
   Dns as ServerInfoIcon,
   VpnKey as CredentialIcon,
   PersonOutline as UserIcon,
   GitHub as GitHubIcon,
   Key as KeyIcon,
-  AdminPanelSettings as AdminPanelSettingsIcon
+  AdminPanelSettings as AdminPanelSettingsIcon,
 } from "@mui/icons-material";
 
+const COLORS = {
+  cyan: "#7db7ff",
+  violet: "#c084fc",
+  text: "#cbd5e1",
+  textActive: "#e6f2ff",
+  matte: "#0f141c",
+  line: "rgba(125,183,255,0.14)",
+  hover: "rgba(255,255,255,0.05)",
+  itemActiveBg:
+    "linear-gradient(90deg, rgba(125,183,255,0.14) 0%, rgba(125,183,255,0.06) 55%, rgba(125,183,255,0.00) 100%)",
+};
+
 function NavigationSidebar({ currentPage, onNavigate, isAdmin = false }) {
   const [expandedNav, setExpandedNav] = useState({
     sites: true,
@@ -38,9 +47,71 @@ function NavigationSidebar({ currentPage, onNavigate, isAdmin = false }) {
     automation: true,
     filters: true,
     access: true,
-    admin: true
+    admin: true,
   });
 
+  const groupActive = useMemo(
+    () => ({
+      sites: currentPage === "sites",
+      devices: [
+        "devices",
+        "ssh_devices",
+        "winrm_devices",
+        "agent_devices",
+        "admin_device_approvals",
+        "admin_enrollment_codes",
+      ].includes(currentPage),
+      automation: ["jobs", "assemblies", "community"].includes(currentPage),
+      filters: ["filters", "groups"].includes(currentPage),
+      access: [
+        "access_credentials",
+        "access_users",
+        "access_github_token",
+      ].includes(currentPage),
+      admin: ["server_info"].includes(currentPage),
+    }),
+    [currentPage]
+  );
+
+  const Section = ({ title, k, children }) => (
+    <Accordion
+      expanded={expandedNav[k]}
+      onChange={(_, e) => setExpandedNav((s) => ({ ...s, [k]: e }))}
+      square
+      disableGutters
+      sx={{
+        "&:before": { display: "none" },
+        m: 0,
+        bgcolor: "transparent",
+        border: 0,
+      }}
+    >
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon sx={{ color: COLORS.cyan }} />}
+        sx={{
+          minHeight: 38,
+          "& .MuiAccordionSummary-content": { m: 0, py: 0.5 },
+          backgroundColor: "rgba(255,255,255,0.02)",
+          borderTopRightRadius: 8,
+          borderBottomRightRadius: 8,
+          px: 1.5,
+        }}
+      >
+        <Typography
+          sx={{
+            fontSize: "0.85rem",
+            color: COLORS.cyan,
+            fontWeight: 700,
+            letterSpacing: 0.3,
+          }}
+        >
+          {title}
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails sx={{ p: 0 }}>{children}</AccordionDetails>
+    </Accordion>
+  );
+
   const NavItem = ({ icon, label, pageKey, indent = 0 }) => {
     const active = currentPage === pageKey;
     return (
@@ -49,47 +120,28 @@ function NavigationSidebar({ currentPage, onNavigate, isAdmin = false }) {
         sx={{
           pl: indent ? 4 : 2,
           py: 1,
-          color: active ? "#e6f2ff" : "#ccc",
+          color: active ? COLORS.textActive : COLORS.text,
           position: "relative",
-          background: active
-            ? "linear-gradient(90deg, rgba(88,166,255,0.10) 0%, rgba(88,166,255,0.03) 60%, rgba(88,166,255,0.00) 100%)"
-            : "transparent",
-          borderTopRightRadius: 0,
-          borderBottomRightRadius: 0,
-          boxShadow: active
-            ? "inset 0 0 0 1px rgba(88,166,255,0.25)"
-            : "none",
-          transition: "background 160ms ease, box-shadow 160ms ease, color 160ms ease",
+          background: active ? COLORS.itemActiveBg : "transparent",
+          borderTopRightRadius: 10,
+          borderBottomRightRadius: 10,
+          transition:
+            "background 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 120ms ease",
           "&:hover": {
-            background: active
-              ? "linear-gradient(90deg, rgba(88,166,255,0.14) 0%, rgba(88,166,255,0.06) 60%, rgba(88,166,255,0.00) 100%)"
-              : "#2c2c2c"
-          }
+            background: active ? COLORS.itemActiveBg : COLORS.hover,
+          },
+          "&:active": { transform: "translateY(0.5px)" },
         }}
         selected={active}
       >
-        <Box
-          sx={{
-            position: "absolute",
-            left: 0,
-            top: 0,
-            bottom: 0,
-            width: active ? 3 : 0,
-            bgcolor: "#58a6ff",
-            borderTopRightRadius: 2,
-            borderBottomRightRadius: 2,
-            boxShadow: active ? "0 0 6px rgba(88,166,255,0.35)" : "none",
-            transition: "width 180ms ease, box-shadow 200ms ease"
-          }}
-        />
         {icon && (
           <Box
             sx={{
               mr: 1,
               display: "flex",
               alignItems: "center",
-              color: active ? "#7db7ff" : "#58a6ff",
-              transition: "color 160ms ease"
+              color: active ? COLORS.cyan : "#8fbfff",
+              transition: "color 160ms ease",
             }}
           >
             {icon}
@@ -97,7 +149,11 @@ function NavigationSidebar({ currentPage, onNavigate, isAdmin = false }) {
         )}
         <ListItemText
           primary={label}
-          primaryTypographyProps={{ fontSize: "0.75rem", fontWeight: active ? 600 : 400 }}
+          primaryTypographyProps={{
+            fontSize: "0.8rem",
+            fontWeight: active ? 600 : 400,
+            letterSpacing: 0.2,
+          }}
         />
       </ListItemButton>
     );
@@ -107,301 +163,133 @@ function NavigationSidebar({ currentPage, onNavigate, isAdmin = false }) {
     <Box
       sx={{
         width: 260,
-        bgcolor: "#121212",
-        borderRight: "1px solid #333",
         display: "flex",
         flexDirection: "column",
-        overflow: "hidden"
+        overflow: "hidden",
+        background:
+          "linear-gradient(180deg, rgba(64,164,255,0.05) 0%, rgba(192,132,252,0.04) 100%), " +
+          COLORS.matte,
+        borderRight: `1px solid ${COLORS.line}`,
+        backdropFilter: "blur(8px) saturate(130%)",
       }}
     >
-      <Box sx={{ flex: 1, overflowY: "auto" }}>
+      <Divider sx={{ borderColor: COLORS.line }} />
+
+      <Box sx={{ flex: 1, overflowY: "auto", p: 0.25 }}>
         {/* Sites */}
-        {(() => {
-          const groupActive = currentPage === "sites";
-          return (
-        <Accordion
-          expanded={expandedNav.sites}
-          onChange={(_, e) => setExpandedNav((s) => ({ ...s, sites: e }))}
-          square
-          disableGutters
-          sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}
-        >
-          <AccordionSummary
-            expandIcon={<ExpandMoreIcon />}
-            sx={{
-              position: "relative",
-              background: groupActive
-                ? "linear-gradient(90deg, rgba(88,166,255,0.08) 0%, rgba(88,166,255,0.00) 100%)"
-                : "#2c2c2c",
-              minHeight: "36px",
-              "& .MuiAccordionSummary-content": { margin: 0 },
-              "&::before": {
-                content: '""',
-                position: "absolute",
-                left: 0,
-                top: 0,
-                bottom: 0,
-                width: groupActive ? 3 : 0,
-                bgcolor: "#58a6ff",
-                borderTopRightRadius: 2,
-                borderBottomRightRadius: 2,
-                transition: "width 160ms ease"
-              }
-            }}
-          >
-            <Typography sx={{ fontSize: "0.85rem", color: "#58a6ff" }}>
-              <b>Sites</b>
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
-            <NavItem icon={<SitesIcon fontSize="small" />} label="All Sites" pageKey="sites" />
-          </AccordionDetails>
-        </Accordion>
-          );
-        })()}
+        <Section title="Sites" k="sites">
+          <NavItem
+            icon={<SitesIcon fontSize="small" />}
+            label="All Sites"
+            pageKey="sites"
+          />
+        </Section>
+
         {/* Inventory */}
-        {(() => {
-          const groupActive = ["devices", "ssh_devices", "winrm_devices", "agent_devices"].includes(currentPage);
-          return (
-        <Accordion
-          expanded={expandedNav.devices}
-          onChange={(_, e) => setExpandedNav((s) => ({ ...s, devices: e }))}
-          square
-          disableGutters
-          sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}
-        >
-          <AccordionSummary
-            expandIcon={<ExpandMoreIcon />}
-            sx={{
-              position: "relative",
-              background: groupActive
-                ? "linear-gradient(90deg, rgba(88,166,255,0.08) 0%, rgba(88,166,255,0.00) 100%)"
-                : "#2c2c2c",
-              minHeight: "36px",
-              "& .MuiAccordionSummary-content": { margin: 0 },
-              "&::before": {
-                content: '""',
-                position: "absolute",
-                left: 0,
-                top: 0,
-                bottom: 0,
-                width: groupActive ? 3 : 0,
-                bgcolor: "#58a6ff",
-                borderTopRightRadius: 2,
-                borderBottomRightRadius: 2,
-                transition: "width 160ms ease"
-              }
-            }}
-          >
-            <Typography sx={{ fontSize: "0.85rem", color: "#58a6ff" }}>
-              <b>Inventory</b>
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
-            <NavItem icon={<AdminPanelSettingsIcon fontSize="small" />} label="Device Approvals" pageKey="admin_device_approvals" />
-            <NavItem icon={<KeyIcon fontSize="small" />} label="Enrollment Codes" pageKey="admin_enrollment_codes" indent />
-            <NavItem icon={<DevicesIcon fontSize="small" />} label="Devices" pageKey="devices" />
-            <NavItem icon={<DevicesIcon fontSize="small" />} label="Agent Devices" pageKey="agent_devices" indent />
-            <NavItem icon={<DevicesIcon fontSize="small" />} label="SSH Devices" pageKey="ssh_devices" indent />
-            <NavItem icon={<DevicesIcon fontSize="small" />} label="WinRM Devices" pageKey="winrm_devices" indent />
-          </AccordionDetails>
-        </Accordion>
-          );
-        })()}
+        <Section title="Inventory" k="devices">
+          <NavItem
+            icon={<AdminPanelSettingsIcon fontSize="small" />}
+            label="Device Approvals"
+            pageKey="admin_device_approvals"
+          />
+          <NavItem
+            icon={<KeyIcon fontSize="small" />}
+            label="Enrollment Codes"
+            pageKey="admin_enrollment_codes"
+            indent
+          />
+          <NavItem
+            icon={<DevicesIcon fontSize="small" />}
+            label="Devices"
+            pageKey="devices"
+          />
+          <NavItem
+            icon={<DevicesIcon fontSize="small" />}
+            label="Agent Devices"
+            pageKey="agent_devices"
+            indent
+          />
+          <NavItem
+            icon={<DevicesIcon fontSize="small" />}
+            label="SSH Devices"
+            pageKey="ssh_devices"
+            indent
+          />
+          <NavItem
+            icon={<DevicesIcon fontSize="small" />}
+            label="WinRM Devices"
+            pageKey="winrm_devices"
+            indent
+          />
+        </Section>
 
         {/* Automation */}
-        {(() => {
-          const groupActive = ["jobs", "assemblies", "community"].includes(currentPage);
-          return (
-        <Accordion
-          expanded={expandedNav.automation}
-          onChange={(_, e) => setExpandedNav((s) => ({ ...s, automation: e }))}
-          square
-          disableGutters
-          sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}
-        >
-          <AccordionSummary
-            expandIcon={<ExpandMoreIcon />}
-            sx={{
-              position: "relative",
-              background: groupActive
-                ? "linear-gradient(90deg, rgba(88,166,255,0.08) 0%, rgba(88,166,255,0.00) 100%)"
-                : "#2c2c2c",
-              minHeight: "36px",
-              "& .MuiAccordionSummary-content": { margin: 0 },
-              "&::before": {
-                content: '""',
-                position: "absolute",
-                left: 0,
-                top: 0,
-                bottom: 0,
-                width: groupActive ? 3 : 0,
-                bgcolor: "#58a6ff",
-                borderTopRightRadius: 2,
-                borderBottomRightRadius: 2,
-                transition: "width 160ms ease"
-              }
-            }}
-          >
-            <Typography sx={{ fontSize: "0.85rem", color: "#58a6ff" }}>
-              <b>Automation</b>
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
-            <NavItem icon={<AssembliesIcon fontSize="small" />} label="Assemblies" pageKey="assemblies" />
-            <NavItem icon={<JobsIcon fontSize="small" />} label="Scheduled Jobs" pageKey="jobs" />
-            <NavItem icon={<CommunityIcon fontSize="small" />} label="Community Content" pageKey="community" />
-          </AccordionDetails>
-        </Accordion>
-          );
-        })()}
+        <Section title="Automation" k="automation">
+          <NavItem
+            icon={<AssembliesIcon fontSize="small" />}
+            label="Assemblies"
+            pageKey="assemblies"
+          />
+          <NavItem
+            icon={<JobsIcon fontSize="small" />}
+            label="Scheduled Jobs"
+            pageKey="jobs"
+          />
+          <NavItem
+            icon={<CommunityIcon fontSize="small" />}
+            label="Community Content"
+            pageKey="community"
+          />
+        </Section>
 
         {/* Filters & Groups */}
-        {(() => {
-          const groupActive = currentPage === "filters" || currentPage === "groups";
-          return (
-        <Accordion
-          expanded={expandedNav.filters}
-          onChange={(_, e) => setExpandedNav((s) => ({ ...s, filters: e }))}
-          square
-          disableGutters
-          sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}
-        >
-          <AccordionSummary
-            expandIcon={<ExpandMoreIcon />}
-            sx={{
-              position: "relative",
-              background: groupActive
-                ? "linear-gradient(90deg, rgba(88,166,255,0.08) 0%, rgba(88,166,255,0.00) 100%)"
-                : "#2c2c2c",
-              minHeight: "36px",
-              "& .MuiAccordionSummary-content": { margin: 0 },
-              "&::before": {
-                content: '""',
-                position: "absolute",
-                left: 0,
-                top: 0,
-                bottom: 0,
-                width: groupActive ? 3 : 0,
-                bgcolor: "#58a6ff",
-                borderTopRightRadius: 2,
-                borderBottomRightRadius: 2,
-                transition: "width 160ms ease"
-              }
-            }}
-          >
-            <Typography sx={{ fontSize: "0.85rem", color: "#58a6ff" }}>
-              <b>Filters & Groups</b>
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
-            <NavItem icon={<FilterIcon fontSize="small" />} label="Filters" pageKey="filters" />
-            <NavItem icon={<GroupsIcon fontSize="small" />} label="Groups" pageKey="groups" />
-          </AccordionDetails>
-        </Accordion>
-          );
-        })()}
+        <Section title="Filters & Groups" k="filters">
+          <NavItem
+            icon={<FilterIcon fontSize="small" />}
+            label="Filters"
+            pageKey="filters"
+          />
+          <NavItem
+            icon={<GroupsIcon fontSize="small" />}
+            label="Groups"
+            pageKey="groups"
+          />
+        </Section>
 
         {/* Access Management */}
-        {(() => {
-          if (!isAdmin) return null;
-          const groupActive =
-            currentPage === "access_credentials" ||
-            currentPage === "access_users" ||
-            currentPage === "access_github_token";
-          return (
-        <Accordion
-          expanded={expandedNav.access}
-          onChange={(_, e) => setExpandedNav((s) => ({ ...s, access: e }))}
-          square
-          disableGutters
-          sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}
-        >
-          <AccordionSummary
-            expandIcon={<ExpandMoreIcon />}
-            sx={{
-              position: "relative",
-              background: groupActive
-                ? "linear-gradient(90deg, rgba(88,166,255,0.08) 0%, rgba(88,166,255,0.00) 100%)"
-                : "#2c2c2c",
-              minHeight: "36px",
-              "& .MuiAccordionSummary-content": { margin: 0 },
-              "&::before": {
-                content: '""',
-                position: "absolute",
-                left: 0,
-                top: 0,
-                bottom: 0,
-                width: groupActive ? 3 : 0,
-                bgcolor: "#58a6ff",
-                borderTopRightRadius: 2,
-                borderBottomRightRadius: 2,
-                transition: "width 160ms ease"
-              }
-            }}
-          >
-            <Typography sx={{ fontSize: "0.85rem", color: "#58a6ff" }}>
-              <b>Access Management</b>
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
-            <NavItem icon={<CredentialIcon fontSize="small" />} label="Credentials" pageKey="access_credentials" />
-            <NavItem icon={<GitHubIcon fontSize="small" />} label="GitHub API Token" pageKey="access_github_token" />
-            <NavItem icon={<UserIcon fontSize="small" />} label="Users" pageKey="access_users" />
-          </AccordionDetails>
-        </Accordion>
-          );
-        })()}
+        {isAdmin && (
+          <Section title="Access Management" k="access">
+            <NavItem
+              icon={<CredentialIcon fontSize="small" />}
+              label="Credentials"
+              pageKey="access_credentials"
+            />
+            <NavItem
+              icon={<GitHubIcon fontSize="small" />}
+              label="GitHub API Token"
+              pageKey="access_github_token"
+            />
+            <NavItem
+              icon={<UserIcon fontSize="small" />}
+              label="Users"
+              pageKey="access_users"
+            />
+          </Section>
+        )}
 
-        {/* Admin */}
-        {(() => {
-          if (!isAdmin) return null;
-          const groupActive =
-            currentPage === "server_info" ||
-            currentPage === "admin_enrollment_codes" ||
-            currentPage === "admin_device_approvals";
-          return (
-        <Accordion
-          expanded={expandedNav.admin}
-          onChange={(_, e) => setExpandedNav((s) => ({ ...s, admin: e }))}
-          square
-          disableGutters
-          sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}
-        >
-          <AccordionSummary
-            expandIcon={<ExpandMoreIcon />}
-            sx={{
-              position: "relative",
-              background: groupActive
-                ? "linear-gradient(90deg, rgba(88,166,255,0.08) 0%, rgba(88,166,255,0.00) 100%)"
-                : "#2c2c2c",
-              minHeight: "36px",
-              "& .MuiAccordionSummary-content": { margin: 0 },
-              "&::before": {
-                content: '""',
-                position: "absolute",
-                left: 0,
-                top: 0,
-                bottom: 0,
-                width: groupActive ? 3 : 0,
-                bgcolor: "#58a6ff",
-                borderTopRightRadius: 2,
-                borderBottomRightRadius: 2,
-                transition: "width 160ms ease"
-              }
-            }}
-          >
-            <Typography sx={{ fontSize: "0.85rem", color: "#58a6ff" }}>
-              <b>Admin Settings</b>
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
-            <NavItem icon={<ServerInfoIcon fontSize="small" />} label="Server Info" pageKey="server_info" />
-          </AccordionDetails>
-        </Accordion>
-          );
-        })()}
+        {/* Admin Settings */}
+        {isAdmin && (
+          <Section title="Admin Settings" k="admin">
+            <NavItem
+              icon={<ServerInfoIcon fontSize="small" />}
+              label="Server Info"
+              pageKey="server_info"
+            />
+          </Section>
+        )}
       </Box>
+
+      <Divider sx={{ borderColor: COLORS.line }} />
     </Box>
   );
 }