Added Device, Script,and Workflow Tabs in new Navigation Sidebar

2025-10-27 18:01:58 -06:00 · 2025-08-07 21:11:55 -06:00
parent 720b09fa34
commit a5e2b87fc3
5 changed files with 714 additions and 683 deletions
--- a/Data/Server/WebUI/src/Navigation_Sidebar.jsx
+++ b/Data/Server/WebUI/src/Navigation_Sidebar.jsx
@@ -0,0 +1,143 @@
+////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Navigation_Sidebar.jsx
+
+import React, { useState } from "react";
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Typography,
+  Box,
+  ListItemButton,
+  ListItemText
+} from "@mui/material";
+import {
+  ExpandMore as ExpandMoreIcon,
+  Devices as DevicesIcon,
+  FilterAlt as FilterIcon,
+  Groups as GroupsIcon,
+  Work as JobsIcon,
+  AutoAwesomeMosaic as WorkflowsIcon,
+  Code as ScriptIcon,
+  PeopleOutline as CommunityIcon
+} from "@mui/icons-material";
+
+export default function NavigationSidebar({ currentPage, onNavigate }) {
+  const [expandedNav, setExpandedNav] = useState({
+    devices: true,
+    filters: false,
+    automation: true
+  });
+
+  const NavItem = ({ icon, label, pageKey, indent = 0 }) => {
+    const active = currentPage === pageKey;
+    return (
+      <ListItemButton
+        onClick={() => onNavigate(pageKey)}
+        sx={{
+          pl: indent ? 4 : 2,
+          py: 1,
+          color: "#ccc",
+          position: "relative",
+          bgcolor: active ? "#2a2a2a" : "transparent",
+          "&:hover": { bgcolor: "#2c2c2c" }
+        }}
+      >
+        <Box
+          sx={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: active ? 3 : 0,
+            bgcolor: "#58a6ff",
+            transition: "width 0.15s ease"
+          }}
+        />
+        {icon && <Box sx={{ mr: 1, display: "flex", alignItems: "center" }}>{icon}</Box>}
+        <ListItemText primary={label} primaryTypographyProps={{ fontSize: "0.95rem" }} />
+      </ListItemButton>
+    );
+  };
+
+  return (
+    <Box
+      sx={{
+        width: 260,
+        bgcolor: "#121212",
+        borderRight: "1px solid #333",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      }}
+    >
+      <Box sx={{ flex: 1, overflowY: "auto" }}>
+        {/* Devices */}
+        <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={{ backgroundColor: "#2c2c2c", minHeight: "36px", "& .MuiAccordionSummary-content": { margin: 0 } }}
+          >
+            <Typography sx={{ fontSize: "0.9rem", color: "#0475c2" }}>
+              <b>Devices</b>
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
+            <NavItem icon={<DevicesIcon fontSize="small" />} label="Devices" pageKey="devices" />
+          </AccordionDetails>
+        </Accordion>
+
+        {/* Filters & Groups */}
+        <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={{ backgroundColor: "#2c2c2c", minHeight: "36px", "& .MuiAccordionSummary-content": { margin: 0 } }}
+          >
+            <Typography sx={{ fontSize: "0.9rem", color: "#0475c2" }}>
+              <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>
+
+        {/* Automation */}
+        <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={{ backgroundColor: "#2c2c2c", minHeight: "36px", "& .MuiAccordionSummary-content": { margin: 0 } }}
+          >
+            <Typography sx={{ fontSize: "0.9rem", color: "#0475c2" }}>
+              <b>Automation</b>
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
+            <NavItem icon={<JobsIcon fontSize="small" />} label="Scheduled Jobs" pageKey="jobs" />
+            <NavItem icon={<WorkflowsIcon fontSize="small" />} label="Workflows" pageKey="workflows" />
+            <NavItem icon={<ScriptIcon fontSize="small" />} label="Scripts" pageKey="scripts" />
+            <NavItem icon={<CommunityIcon fontSize="small" />} label="Community Nodes" pageKey="community" />
+          </AccordionDetails>
+        </Accordion>
+      </Box>
+    </Box>
+  );
+}