inital commit
This commit is contained in:
KingKDot
@@ -0,0 +1,114 @@
|
||||
const MOBILE_BREAKPOINT = 768;
|
||||
|
||||
export function createAdaptiveNavController(host, refs) {
|
||||
const { toggle, panel, navLinks, navUtility } = refs;
|
||||
if (!toggle || !panel || !navLinks || !navUtility) {
|
||||
return { applyAdaptiveNavLayout: () => {} };
|
||||
}
|
||||
|
||||
const navOverflows = () =>
|
||||
panel.scrollWidth > panel.clientWidth + 1 || host.scrollWidth > host.clientWidth + 1;
|
||||
|
||||
function resetInlineStyles() {
|
||||
panel.style.display = "";
|
||||
panel.style.flexDirection = "";
|
||||
panel.style.alignItems = "";
|
||||
panel.style.gap = "";
|
||||
navLinks.style.flexDirection = "";
|
||||
navLinks.style.flexWrap = "";
|
||||
navLinks.style.alignItems = "";
|
||||
navLinks.style.justifyContent = "";
|
||||
navUtility.style.display = "";
|
||||
navUtility.style.width = "";
|
||||
navUtility.style.justifyContent = "";
|
||||
navUtility.style.flexWrap = "";
|
||||
}
|
||||
|
||||
function applyAdaptiveNavLayout() {
|
||||
if (window.innerWidth < MOBILE_BREAKPOINT) {
|
||||
host.dataset.navMode = "mobile";
|
||||
panel.classList.add("hidden");
|
||||
resetInlineStyles();
|
||||
panel.dataset.open = "false";
|
||||
toggle.style.display = "";
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
return;
|
||||
}
|
||||
|
||||
host.dataset.navMode = "desktop";
|
||||
panel.classList.remove("hidden");
|
||||
panel.style.display = "flex";
|
||||
panel.dataset.open = "true";
|
||||
navUtility.style.display = "flex";
|
||||
toggle.style.display = "none";
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
|
||||
if (navOverflows()) {
|
||||
host.dataset.navMode = "desktop-compact";
|
||||
navUtility.style.display = "none";
|
||||
if (navOverflows()) {
|
||||
host.dataset.navMode = "compact";
|
||||
panel.style.display = "none";
|
||||
panel.dataset.open = "false";
|
||||
toggle.style.display = "inline-flex";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function openCompactPanel() {
|
||||
panel.dataset.open = "true";
|
||||
panel.classList.remove("hidden");
|
||||
panel.style.display = "flex";
|
||||
panel.style.flexDirection = "column";
|
||||
panel.style.alignItems = "stretch";
|
||||
panel.style.gap = "10px";
|
||||
|
||||
navLinks.style.flexDirection = "row";
|
||||
navLinks.style.flexWrap = "wrap";
|
||||
navLinks.style.alignItems = "center";
|
||||
navLinks.style.justifyContent = "flex-start";
|
||||
|
||||
navUtility.style.display = "flex";
|
||||
navUtility.style.width = "100%";
|
||||
navUtility.style.justifyContent = "space-between";
|
||||
navUtility.style.flexWrap = "wrap";
|
||||
|
||||
toggle.setAttribute("aria-expanded", "true");
|
||||
}
|
||||
|
||||
function closeCompactPanel() {
|
||||
panel.dataset.open = "false";
|
||||
panel.style.display = "none";
|
||||
if (host.dataset.navMode === "mobile") {
|
||||
panel.classList.add("hidden");
|
||||
}
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
|
||||
toggle.addEventListener("click", () => {
|
||||
const compact =
|
||||
host.dataset.navMode === "compact" || host.dataset.navMode === "mobile";
|
||||
if (!compact) return;
|
||||
|
||||
const isOpen = panel.dataset.open === "true";
|
||||
if (isOpen) {
|
||||
closeCompactPanel();
|
||||
return;
|
||||
}
|
||||
openCompactPanel();
|
||||
});
|
||||
|
||||
let resizeRaf = null;
|
||||
window.addEventListener("resize", () => {
|
||||
if (resizeRaf) {
|
||||
cancelAnimationFrame(resizeRaf);
|
||||
}
|
||||
resizeRaf = requestAnimationFrame(() => {
|
||||
applyAdaptiveNavLayout();
|
||||
});
|
||||
});
|
||||
|
||||
applyAdaptiveNavLayout();
|
||||
|
||||
return { applyAdaptiveNavLayout };
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
export function applyUserRoleUI(user, refs) {
|
||||
const {
|
||||
usernameDisplay,
|
||||
roleBadge,
|
||||
usersLink,
|
||||
buildLink,
|
||||
pluginsLink,
|
||||
scriptsLink,
|
||||
logsLink,
|
||||
} = refs;
|
||||
|
||||
if (!user || !usernameDisplay || !roleBadge) return;
|
||||
|
||||
usernameDisplay.textContent = user.username || "unknown";
|
||||
|
||||
const roleBadges = {
|
||||
admin: '<i class="fa-solid fa-crown mr-1"></i>Admin',
|
||||
operator: '<i class="fa-solid fa-sliders mr-1"></i>Operator',
|
||||
viewer: '<i class="fa-solid fa-eye mr-1"></i>Viewer',
|
||||
};
|
||||
|
||||
if (roleBadges[user.role]) {
|
||||
roleBadge.innerHTML = roleBadges[user.role];
|
||||
} else {
|
||||
roleBadge.textContent = user.role || "user";
|
||||
}
|
||||
|
||||
roleBadge.classList.remove(
|
||||
"bg-purple-900/50",
|
||||
"text-purple-300",
|
||||
"border",
|
||||
"border-purple-800",
|
||||
"bg-blue-900/50",
|
||||
"text-blue-300",
|
||||
"border-blue-800",
|
||||
"bg-slate-700",
|
||||
"text-slate-300",
|
||||
"border-slate-600",
|
||||
);
|
||||
|
||||
if (user.role === "admin") {
|
||||
roleBadge.classList.add(
|
||||
"bg-purple-900/50",
|
||||
"text-purple-300",
|
||||
"border",
|
||||
"border-purple-800",
|
||||
);
|
||||
} else if (user.role === "operator") {
|
||||
roleBadge.classList.add(
|
||||
"bg-blue-900/50",
|
||||
"text-blue-300",
|
||||
"border",
|
||||
"border-blue-800",
|
||||
);
|
||||
} else {
|
||||
roleBadge.classList.add(
|
||||
"bg-slate-700",
|
||||
"text-slate-300",
|
||||
"border",
|
||||
"border-slate-600",
|
||||
);
|
||||
}
|
||||
|
||||
if (user.role === "admin") {
|
||||
usersLink?.classList.remove("hidden");
|
||||
pluginsLink?.classList.remove("hidden");
|
||||
logsLink?.classList.remove("hidden");
|
||||
}
|
||||
if (user.role === "admin" || user.role === "operator") {
|
||||
buildLink?.classList.remove("hidden");
|
||||
}
|
||||
if (user.role !== "viewer") {
|
||||
scriptsLink?.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
export function mountNav(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";
|
||||
|
||||
host.innerHTML = `
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 w-full">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<a href="/" class="flex items-center gap-2 font-semibold tracking-wide">
|
||||
<i class="fa-solid fa-crown header-crown"></i> Overlord
|
||||
</a>
|
||||
<button
|
||||
id="nav-toggle"
|
||||
class="md:hidden inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800/70 border border-slate-700"
|
||||
aria-expanded="false"
|
||||
aria-controls="nav-panel"
|
||||
>
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
<span>Menu</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="nav-panel"
|
||||
class="hidden md:flex md:flex-1 md:items-center md:justify-between gap-3"
|
||||
>
|
||||
<nav id="nav-links" class="flex flex-wrap items-center gap-2 md:flex-1 md:justify-center">
|
||||
<a
|
||||
href="/"
|
||||
id="nav-clients"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900/70 border border-slate-800 hover:bg-slate-800 text-slate-300 transition-colors"
|
||||
><i class="fa-solid fa-display text-sky-400"></i> Clients</a
|
||||
>
|
||||
<a
|
||||
href="/metrics"
|
||||
id="metrics-link"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900/70 border border-slate-800 hover:bg-slate-800 text-slate-300 transition-colors"
|
||||
><i class="fa-solid fa-chart-line text-emerald-400"></i> Metrics</a
|
||||
>
|
||||
<a
|
||||
href="/logs"
|
||||
id="logs-link"
|
||||
class="hidden inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900/70 border border-slate-800 hover:bg-slate-800 text-slate-300 transition-colors"
|
||||
><i class="fa-solid fa-clipboard-list text-amber-400"></i> Logs</a
|
||||
>
|
||||
<a
|
||||
href="/scripts"
|
||||
id="scripts-link"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900/70 border border-slate-800 hover:bg-slate-800 text-slate-300 transition-colors"
|
||||
><i class="fa-solid fa-code text-cyan-400"></i> Scripts</a
|
||||
>
|
||||
<a
|
||||
href="/plugins"
|
||||
id="plugins-link"
|
||||
class="hidden inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900/70 border border-slate-800 hover:bg-slate-800 text-slate-300 transition-colors"
|
||||
><i class="fa-solid fa-puzzle-piece text-violet-400"></i> Plugins</a
|
||||
>
|
||||
<a
|
||||
href="/build"
|
||||
id="build-link"
|
||||
class="hidden inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900/70 border border-slate-800 hover:bg-slate-800 text-slate-300 transition-colors"
|
||||
><i class="fa-solid fa-hammer text-orange-400"></i> Builder</a
|
||||
>
|
||||
<a
|
||||
href="/notifications"
|
||||
id="notifications-link"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900/70 border border-slate-800 hover:bg-slate-800 text-slate-300 transition-colors"
|
||||
><i class="fa-solid fa-bell text-yellow-400"></i> Notifications</a
|
||||
>
|
||||
<a
|
||||
href="/users"
|
||||
id="users-link"
|
||||
class="hidden inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900/70 border border-slate-800 hover:bg-slate-800 text-slate-300 transition-colors"
|
||||
><i class="fa-solid fa-users text-indigo-400"></i> Users</a
|
||||
>
|
||||
</nav>
|
||||
<div id="nav-utility" class="flex flex-wrap items-center gap-2 md:w-auto md:justify-end md:shrink-0">
|
||||
<button
|
||||
id="notify-toggle"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900/70 border border-slate-800 text-slate-300 hover:bg-slate-800"
|
||||
title="Toggle notifications"
|
||||
aria-label="Toggle notifications"
|
||||
>
|
||||
<i class="fa-solid fa-bell"></i>
|
||||
<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>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<button
|
||||
id="logout-btn"
|
||||
class="group inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-red-900/40 hover:bg-red-800/60 text-red-100 border border-red-700/60 transition-colors"
|
||||
title="Logout"
|
||||
aria-label="Logout"
|
||||
>
|
||||
<i class="fa-solid fa-right-from-bracket text-rose-300 group-hover:text-rose-200 transition-colors"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return {
|
||||
toggle: document.getElementById("nav-toggle"),
|
||||
panel: document.getElementById("nav-panel"),
|
||||
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"),
|
||||
usernameDisplay: document.getElementById("username-display"),
|
||||
roleBadge: document.getElementById("role-badge"),
|
||||
usersLink: document.getElementById("users-link"),
|
||||
buildLink: document.getElementById("build-link"),
|
||||
pluginsLink: document.getElementById("plugins-link"),
|
||||
scriptsLink: document.getElementById("scripts-link"),
|
||||
logsLink: document.getElementById("logs-link"),
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user