Added Navigation Breadcrumbs w/ Clickable Links

This commit is contained in:
2025-09-24 13:47:18 -06:00
parent 36411256e1
commit 3d3337d1b2

View File

@@ -110,13 +110,16 @@ export default function App() {
const items = []; const items = [];
switch (currentPage) { switch (currentPage) {
case "sites": case "sites":
items.push({ label: "Sites" }); items.push({ label: "Sites", page: "sites" });
items.push({ label: "Site List", page: "sites" });
break; break;
case "devices": case "devices":
items.push({ label: "Devices" }); items.push({ label: "Devices", page: "devices" });
items.push({ label: "Device List", page: "devices" });
break; break;
case "device_details": case "device_details":
items.push({ label: "Devices", page: "devices" }); items.push({ label: "Devices", page: "devices" });
items.push({ label: "Device List", page: "devices" });
items.push({ label: "Device Details" }); items.push({ label: "Device Details" });
break; break;
case "jobs": case "jobs":
@@ -126,11 +129,11 @@ export default function App() {
case "create_job": case "create_job":
items.push({ label: "Automation", page: "jobs" }); items.push({ label: "Automation", page: "jobs" });
items.push({ label: "Scheduled Jobs", page: "jobs" }); items.push({ label: "Scheduled Jobs", page: "jobs" });
items.push({ label: editingJob ? "Edit Job" : "Create Job" }); items.push({ label: editingJob ? "Edit Job" : "Create Job", page: "create_job" });
break; break;
case "workflows": case "workflows":
items.push({ label: "Automation", page: "jobs" }); items.push({ label: "Automation", page: "jobs" });
items.push({ label: "Workflows" }); items.push({ label: "Workflows", page: "workflows" });
break; break;
case "workflow-editor": case "workflow-editor":
items.push({ label: "Automation", page: "jobs" }); items.push({ label: "Automation", page: "jobs" });
@@ -139,27 +142,27 @@ export default function App() {
break; break;
case "scripts": case "scripts":
items.push({ label: "Automation", page: "jobs" }); items.push({ label: "Automation", page: "jobs" });
items.push({ label: "Scripts" }); items.push({ label: "Scripts", page: "scripts" });
break; break;
case "community": case "community":
items.push({ label: "Automation", page: "jobs" }); items.push({ label: "Automation", page: "jobs" });
items.push({ label: "Community Content" }); items.push({ label: "Community Content", page: "community" });
break; break;
case "admin_users": case "admin_users":
items.push({ label: "Admin Settings", page: "admin_users" }); items.push({ label: "Admin Settings", page: "admin_users" });
items.push({ label: "User Management" }); items.push({ label: "User Management", page: "admin_users" });
break; break;
case "server_info": case "server_info":
items.push({ label: "Admin Settings", page: "admin_users" }); items.push({ label: "Admin Settings", page: "admin_users" });
items.push({ label: "Server Info" }); items.push({ label: "Server Info", page: "server_info" });
break; break;
case "filters": case "filters":
items.push({ label: "Filters & Groups", page: "filters" }); items.push({ label: "Filters & Groups", page: "filters" });
items.push({ label: "Filters" }); items.push({ label: "Filters", page: "filters" });
break; break;
case "groups": case "groups":
items.push({ label: "Filters & Groups", page: "filters" }); items.push({ label: "Filters & Groups", page: "filters" });
items.push({ label: "Groups" }); items.push({ label: "Groups", page: "groups" });
break; break;
default: default:
// Fallback to a neutral crumb if unknown // Fallback to a neutral crumb if unknown
@@ -596,8 +599,7 @@ export default function App() {
}} }}
> >
{breadcrumbs.map((c, idx) => { {breadcrumbs.map((c, idx) => {
const isLast = idx === breadcrumbs.length - 1; if (c.page) {
if (!isLast && c.page) {
return ( return (
<Button <Button
key={idx} key={idx}
@@ -616,7 +618,7 @@ export default function App() {
); );
} }
return ( return (
<Typography key={idx} component="span" sx={{ color: isLast ? "#e0e0e0" : "#9aa0a6", fontSize: "0.825rem" }}> <Typography key={idx} component="span" sx={{ color: "#e0e0e0", fontSize: "0.825rem" }}>
{c.label} {c.label}
</Typography> </Typography>
); );