389 lines
17 KiB
JavaScript
389 lines
17 KiB
JavaScript
export const NAV_MODE_KEY = "sb_mode";
|
|
|
|
/* ──────────────────────────────────────────────
|
|
NAVIGATION DATA — single source of truth
|
|
────────────────────────────────────────────── */
|
|
|
|
export const NAV_GROUPS = [
|
|
{
|
|
id: "clients",
|
|
label: "Clients",
|
|
icon: "fa-display",
|
|
iconColor: "text-sky-400",
|
|
href: "/",
|
|
linkId: "nav-clients",
|
|
alwaysVisible: true,
|
|
},
|
|
{
|
|
id: "purgatory",
|
|
label: "Purgatory",
|
|
icon: "fa-user-clock",
|
|
iconColor: "text-amber-400",
|
|
href: "/purgatory",
|
|
linkId: "enrollment-link",
|
|
hasBadge: true,
|
|
},
|
|
{
|
|
id: "system",
|
|
label: "System",
|
|
icon: "fa-gear",
|
|
iconColor: "text-slate-300",
|
|
children: [
|
|
{ href: "/logs", label: "Logs", icon: "fa-clipboard-list", iconColor: "text-amber-400", linkId: "logs-link", hidden: true },
|
|
{ href: "/file-share", label: "File Share", icon: "fa-share-nodes", iconColor: "text-rose-400", linkId: "file-share-link", hidden: true },
|
|
{ href: "/users", label: "Users", icon: "fa-users", iconColor: "text-indigo-400", linkId: "users-link", hidden: true },
|
|
{ href: "/notifications", label: "Notifications", icon: "fa-bell", iconColor: "text-yellow-400", linkId: "notifications-link", hidden: true },
|
|
],
|
|
},
|
|
{
|
|
id: "management",
|
|
label: "Management",
|
|
icon: "fa-folder-open",
|
|
iconColor: "text-cyan-400",
|
|
children: [
|
|
{ href: "/scripts", label: "Scripts", icon: "fa-code", iconColor: "text-cyan-400", linkId: "scripts-link" },
|
|
{ href: "/socks5-manager", label: "Proxies", icon: "fa-network-wired", iconColor: "text-sky-400", linkId: "socks5-link" },
|
|
{ href: "/sol-publish", label: "Sol Publish", icon: "fa-link-slash", iconColor: "text-purple-400", linkId: "sol-publish-link", hidden: true },
|
|
],
|
|
},
|
|
{
|
|
id: "build",
|
|
label: "Build",
|
|
icon: "fa-wrench",
|
|
iconColor: "text-orange-400",
|
|
children: [
|
|
{ href: "/build", label: "Builder", icon: "fa-hammer", iconColor: "text-orange-400", linkId: "build-link", hidden: true },
|
|
{ href: "/plugins", label: "Plugins", icon: "fa-puzzle-piece", iconColor: "text-violet-400", linkId: "plugins-link", hidden: true },
|
|
],
|
|
},
|
|
{
|
|
id: "monitoring",
|
|
label: "Monitoring",
|
|
icon: "fa-chart-line",
|
|
iconColor: "text-emerald-400",
|
|
children: [
|
|
{ href: "/metrics", label: "Metrics", icon: "fa-chart-line", iconColor: "text-emerald-400", linkId: "metrics-link" },
|
|
{ href: "/graph", label: "Graph", icon: "fa-diagram-project", iconColor: "text-cyan-400", linkId: "graph-link" },
|
|
{ href: "/screenshots", label: "Screenshot Wall", icon: "fa-images", iconColor: "text-sky-400", linkId: "screenshots-link", hidden: true },
|
|
],
|
|
},
|
|
{
|
|
id: "plugin_apps",
|
|
label: "Plugin Apps",
|
|
icon: "fa-plug",
|
|
iconColor: "text-fuchsia-400",
|
|
hidden: true,
|
|
children: [],
|
|
}
|
|
];
|
|
|
|
/* ──────────────────────────────────────────────
|
|
TOPBAR — dropdown menus
|
|
────────────────────────────────────────────── */
|
|
|
|
export function dropdownItem(child) {
|
|
const hiddenCls = child.hidden ? " hidden" : "";
|
|
const badgeHtml = child.hasBadge
|
|
? `<span id="enrollment-badge" class="nav-dd-badge hidden"></span>`
|
|
: "";
|
|
return `<a href="${child.href}" id="${child.linkId}"
|
|
class="nav-dd-item${hiddenCls}" data-link-id="${child.linkId}">
|
|
<i class="fa-solid ${child.icon} ${child.iconColor} nav-dd-item-icon"></i>
|
|
<span>${child.label}</span>
|
|
${badgeHtml}
|
|
</a>`;
|
|
}
|
|
|
|
function dropdownGroup(group) {
|
|
if (group.href && !group.children) {
|
|
// Simple link (Clients, Purgatory)
|
|
const alwaysCls = group.alwaysVisible ? "" : " hidden";
|
|
const badgeHtml = group.hasBadge
|
|
? `<span id="enrollment-badge" class="nav-dd-badge hidden"></span>`
|
|
: "";
|
|
return `<a href="${group.href}" id="${group.linkId}"
|
|
class="nav-dd-group-btn${alwaysCls}" data-group="${group.id}">
|
|
<i class="fa-solid ${group.icon} ${group.iconColor}"></i>
|
|
<span>${group.label}</span>
|
|
${badgeHtml}
|
|
</a>`;
|
|
}
|
|
// Dropdown group — wrapper always visible, children control visibility
|
|
const items = group.children.map(dropdownItem).join("");
|
|
const groupHidden = group.hidden ? " hidden" : "";
|
|
return `
|
|
<div class="nav-dd-wrapper${groupHidden}" data-group="${group.id}">
|
|
<button class="nav-dd-group-btn" data-group="${group.id}" aria-haspopup="true" aria-expanded="false">
|
|
<i class="fa-solid ${group.icon} ${group.iconColor}"></i>
|
|
<span>${group.label}</span>
|
|
<i class="fa-solid fa-chevron-down nav-dd-chevron"></i>
|
|
</button>
|
|
<div class="nav-dd-menu">
|
|
${items}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function mountTopbar(host) {
|
|
host.className =
|
|
"sticky top-0 z-10 w-full px-5 py-3 bg-slate-950/80 backdrop-blur border-b border-slate-800";
|
|
|
|
const groupsHtml = NAV_GROUPS.map(dropdownGroup).join("");
|
|
|
|
host.innerHTML = `
|
|
<div class="topbar-grid">
|
|
<div class="topbar-left">
|
|
<a href="/" class="nav-brand-link flex items-center gap-2 font-semibold tracking-wide">
|
|
<img id="nav-brand-logo" class="nav-brand-logo" alt="Overlord logo" style="display: none" />
|
|
<i id="nav-brand-icon" class="fa-solid fa-crown header-crown"></i>
|
|
<span id="nav-brand-name">Overlord</span>
|
|
</a>
|
|
<button id="topbar-nav-toggle" class="topbar-nav-toggle" aria-label="Open navigation menu" aria-expanded="false" type="button">
|
|
<i class="fa-solid fa-layer-group"></i>
|
|
</button>
|
|
</div>
|
|
<div
|
|
id="nav-panel"
|
|
class="topbar-center"
|
|
>
|
|
<nav id="nav-links" class="nav-dd-bar">
|
|
${groupsHtml}
|
|
</nav>
|
|
</div>
|
|
<div id="nav-utility" class="topbar-right">
|
|
<div class="nav-dd-wrapper" data-group="user-actions">
|
|
<button id="user-actions-btn" class="user-actions-trigger" aria-haspopup="true" aria-expanded="false" title="Account actions" aria-label="Account actions">
|
|
<i class="fa-solid fa-bars-staggered"></i>
|
|
<span id="user-actions-dot" class="user-actions-dot hidden"></span>
|
|
</button>
|
|
<div class="nav-dd-menu user-actions-menu">
|
|
<button id="notify-toggle" class="user-actions-item"
|
|
title="Toggle notifications" aria-label="Toggle notifications">
|
|
<i class="fa-solid fa-bell user-actions-icon"></i>
|
|
<span class="user-actions-label">Notifications</span>
|
|
<span id="notify-badge" class="hidden min-w-[20px] h-5 px-1 rounded-full bg-rose-500 text-white text-xs flex items-center justify-center"></span>
|
|
</button>
|
|
<button id="nav-hide-btn" class="user-actions-item"
|
|
title="Hide navigation (Ctrl+\\)" aria-label="Hide navigation">
|
|
<i class="fa-solid fa-eye-slash user-actions-icon"></i>
|
|
<span class="user-actions-label">Hide nav</span>
|
|
<span class="user-actions-shortcut">Ctrl+\\</span>
|
|
</button>
|
|
<div class="user-actions-divider"></div>
|
|
<button id="logout-btn" class="user-actions-item user-actions-item--danger"
|
|
title="Logout" aria-label="Logout">
|
|
<i class="fa-solid fa-right-from-bracket user-actions-icon"></i>
|
|
<span class="user-actions-label">Logout</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button id="account-settings-btn"
|
|
class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-800 text-slate-100 min-w-0 max-w-full md:max-w-none border border-slate-700/70 hover:bg-slate-700 transition-colors"
|
|
title="Open settings" aria-label="Open settings" type="button">
|
|
<i class="fa-solid fa-user-shield text-sky-300"></i>
|
|
<span id="username-display" class="truncate max-w-[110px] sm:max-w-[180px] md:max-w-none">Loading...</span>
|
|
<span id="role-badge" class="text-sm px-2 py-0.5 rounded-full bg-slate-700 shrink-0"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Collect all link refs
|
|
const refs = {
|
|
toggle: null,
|
|
topbarToggle: document.getElementById("topbar-nav-toggle"),
|
|
panel: document.getElementById("nav-panel"),
|
|
collapseBtn: null,
|
|
navLinks: document.getElementById("nav-links"),
|
|
navUtility: document.getElementById("nav-utility"),
|
|
logoutBtn: document.getElementById("logout-btn"),
|
|
notifyToggle: document.getElementById("notify-toggle"),
|
|
notifyBadge: document.getElementById("notify-badge"),
|
|
accountSettingsBtn: document.getElementById("account-settings-btn"),
|
|
usernameDisplay: document.getElementById("username-display"),
|
|
roleBadge: document.getElementById("role-badge"),
|
|
enrollmentBadge: document.getElementById("enrollment-badge"),
|
|
navHideBtn: document.getElementById("nav-hide-btn"),
|
|
};
|
|
|
|
// Add individual link refs
|
|
NAV_GROUPS.forEach((g) => {
|
|
if (g.linkId) refs[g.linkId.replace(/-/g, "") + "Ref"] = document.getElementById(g.linkId);
|
|
if (g.children) {
|
|
g.children.forEach((c) => {
|
|
const key = c.linkId.replace(/-/g, "") + "Ref";
|
|
refs[key] = document.getElementById(c.linkId);
|
|
});
|
|
}
|
|
});
|
|
|
|
// Convenience refs expected by nav.js
|
|
refs.usersLink = document.getElementById("users-link");
|
|
refs.buildLink = document.getElementById("build-link");
|
|
refs.solPublishLink = document.getElementById("sol-publish-link");
|
|
refs.pluginsLink = document.getElementById("plugins-link");
|
|
refs.scriptsLink = document.getElementById("scripts-link");
|
|
refs.logsLink = document.getElementById("logs-link");
|
|
refs.notificationsLink = document.getElementById("notifications-link");
|
|
refs.enrollmentLink = document.getElementById("enrollment-link");
|
|
refs.fileShareLink = document.getElementById("file-share-link");
|
|
|
|
return refs;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────
|
|
SIDEBAR — tree-style expandable
|
|
────────────────────────────────────────────── */
|
|
|
|
export function sidebarChild(child) {
|
|
const hiddenCls = child.hidden ? " hidden" : "";
|
|
const badgeHtml = child.hasBadge
|
|
? `<span id="enrollment-badge" class="sb-badge hidden"></span>`
|
|
: "";
|
|
return `<a href="${child.href}" id="${child.linkId}"
|
|
class="sb-link sb-link-child${hiddenCls}" data-link-id="${child.linkId}" title="${child.label}">
|
|
<i class="fa-solid ${child.icon} ${child.iconColor} sb-icon"></i>
|
|
<span class="sb-text">${child.label}</span>
|
|
${badgeHtml}
|
|
</a>`;
|
|
}
|
|
|
|
function sidebarGroup(group) {
|
|
if (group.href && !group.children) {
|
|
// Simple link (Clients, Purgatory)
|
|
const alwaysCls = group.alwaysVisible ? "" : " hidden";
|
|
const badgeHtml = group.hasBadge
|
|
? `<span id="enrollment-badge" class="sb-badge hidden"></span>`
|
|
: "";
|
|
return `<a href="${group.href}" id="${group.linkId}"
|
|
class="sb-link${alwaysCls}" data-link-id="${group.linkId}" title="${group.label}">
|
|
<i class="fa-solid ${group.icon} ${group.iconColor} sb-icon"></i>
|
|
<span class="sb-text">${group.label}</span>
|
|
${badgeHtml}
|
|
</a>`;
|
|
}
|
|
// Expandable group — wrapper always visible, children control visibility
|
|
const childrenHtml = group.children.map(sidebarChild).join("");
|
|
const groupHidden = group.hidden ? " hidden" : "";
|
|
return `
|
|
<div class="sb-group${groupHidden}" data-group="${group.id}">
|
|
<button class="sb-group-btn" data-group="${group.id}" aria-expanded="false">
|
|
<i class="fa-solid ${group.icon} ${group.iconColor} sb-icon"></i>
|
|
<span class="sb-text">${group.label}</span>
|
|
<i class="fa-solid fa-chevron-right sb-chevron"></i>
|
|
</button>
|
|
<div class="sb-group-children" role="group">
|
|
${childrenHtml}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function mountSidebar(host) {
|
|
const groupsHtml = NAV_GROUPS.map(sidebarGroup).join("");
|
|
|
|
host.innerHTML = `
|
|
<div class="sb-header">
|
|
<a href="/" class="sb-logo nav-brand-link">
|
|
<img id="nav-brand-logo" class="nav-brand-logo sb-icon" alt="Overlord logo" style="display: none" />
|
|
<i id="nav-brand-icon" class="fa-solid fa-crown header-crown sb-icon"></i>
|
|
<span id="nav-brand-name" class="sb-text">Overlord</span>
|
|
</a>
|
|
<button id="sb-collapse-btn" class="sb-collapse-btn" title="Toggle sidebar" aria-label="Toggle sidebar">
|
|
<i class="fa-solid fa-chevron-left"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<nav id="nav-links" class="sb-nav">
|
|
${groupsHtml}
|
|
</nav>
|
|
|
|
<div id="nav-utility" class="sb-utility">
|
|
<button id="notify-toggle" class="sb-link"
|
|
title="Toggle notifications" aria-label="Toggle notifications">
|
|
<span class="sb-notify-wrap sb-icon">
|
|
<i class="fa-solid fa-bell"></i>
|
|
<span id="notify-badge" class="sb-notify-badge hidden"></span>
|
|
</span>
|
|
<span class="sb-text">Notifications</span>
|
|
</button>
|
|
<button id="account-settings-btn" class="sb-link"
|
|
title="Open settings" aria-label="Open settings" type="button">
|
|
<i class="fa-solid fa-user-shield text-sky-300 sb-icon"></i>
|
|
<span class="sb-text">
|
|
<span id="username-display" class="truncate">Loading...</span>
|
|
<span id="role-badge" class="text-xs px-2 py-0.5 rounded-full bg-slate-700 shrink-0"></span>
|
|
</span>
|
|
</button>
|
|
<button id="logout-btn" class="sb-link sb-link--danger"
|
|
title="Logout" aria-label="Logout">
|
|
<i class="fa-solid fa-right-from-bracket sb-icon"></i>
|
|
<span class="sb-text">Logout</span>
|
|
</button>
|
|
<button id="nav-hide-btn" class="sb-link"
|
|
title="Hide navigation (Ctrl+\\)" aria-label="Hide navigation">
|
|
<i class="fa-solid fa-eye-slash sb-icon" style="font-size:0.75rem"></i>
|
|
<span class="sb-text">Hide Nav</span>
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
// Mobile topbar
|
|
const mobileBar = document.createElement("div");
|
|
mobileBar.id = "sb-mobile-bar";
|
|
mobileBar.innerHTML = `
|
|
<button id="nav-toggle" class="sb-mobile-toggle" aria-label="Open menu">
|
|
<i class="fa-solid fa-bars"></i>
|
|
</button>
|
|
<a href="/" class="sb-mobile-brand">
|
|
<img id="nav-mobile-brand-logo" class="nav-brand-logo" alt="Overlord logo" style="display: none" />
|
|
<i id="nav-mobile-brand-icon" class="fa-solid fa-crown header-crown" style="font-size:0.85rem"></i>
|
|
<span id="nav-mobile-brand-name">Overlord</span>
|
|
</a>
|
|
`;
|
|
host.insertAdjacentElement("afterend", mobileBar);
|
|
|
|
// Mobile backdrop
|
|
const backdrop = document.createElement("div");
|
|
backdrop.id = "sb-backdrop";
|
|
document.body.appendChild(backdrop);
|
|
|
|
// Collect refs
|
|
const refs = {
|
|
toggle: document.getElementById("nav-toggle"),
|
|
collapseBtn: document.getElementById("sb-collapse-btn"),
|
|
panel: host,
|
|
navLinks: document.getElementById("nav-links"),
|
|
navUtility: document.getElementById("nav-utility"),
|
|
logoutBtn: document.getElementById("logout-btn"),
|
|
notifyToggle: document.getElementById("notify-toggle"),
|
|
notifyBadge: document.getElementById("notify-badge"),
|
|
accountSettingsBtn: document.getElementById("account-settings-btn"),
|
|
usernameDisplay: document.getElementById("username-display"),
|
|
roleBadge: document.getElementById("role-badge"),
|
|
enrollmentBadge: document.getElementById("enrollment-badge"),
|
|
navHideBtn: document.getElementById("nav-hide-btn"),
|
|
};
|
|
|
|
// Convenience refs expected by nav.js
|
|
refs.usersLink = document.getElementById("users-link");
|
|
refs.buildLink = document.getElementById("build-link");
|
|
refs.solPublishLink = document.getElementById("sol-publish-link");
|
|
refs.pluginsLink = document.getElementById("plugins-link");
|
|
refs.scriptsLink = document.getElementById("scripts-link");
|
|
refs.logsLink = document.getElementById("logs-link");
|
|
refs.notificationsLink = document.getElementById("notifications-link");
|
|
refs.enrollmentLink = document.getElementById("enrollment-link");
|
|
refs.fileShareLink = document.getElementById("file-share-link");
|
|
|
|
return refs;
|
|
}
|
|
|
|
export function mountNav(host) {
|
|
const mode = localStorage.getItem(NAV_MODE_KEY);
|
|
if (mode === "sidebar") {
|
|
return mountSidebar(host);
|
|
}
|
|
return mountTopbar(host);
|
|
}
|
|
|