75 lines
3.2 KiB
JavaScript
75 lines
3.2 KiB
JavaScript
// ================================================================
|
|
// AMS — Shared Sidebar (single source of truth)
|
|
// Include AFTER data.js and BEFORE app.js on every authenticated
|
|
// page. Renders into <aside class="sidebar" id="appSidebar">.
|
|
// Editing the NAV array here updates the menu on ALL pages.
|
|
// ================================================================
|
|
|
|
(function () {
|
|
const NAV = [
|
|
{ section: 'Overview' },
|
|
{ href: 'dashboard.html', icon: 'layout-dashboard', label: 'Dashboard' },
|
|
{ section: 'Assets' },
|
|
{ href: 'assets.html', icon: 'boxes', label: 'All Assets' },
|
|
{ href: 'asset-create.html', icon: 'plus-circle', label: 'Add Asset' },
|
|
{ href: 'renewals.html', icon: 'clock', label: 'Renewals & Alerts' },
|
|
{ section: 'Operations' },
|
|
{ href: 'maintenance.html', icon: 'wrench', label: 'Maintenance', badge: true },
|
|
{ href: 'reports.html', icon: 'bar-chart-3', label: 'Reports & Audit' },
|
|
{ section: 'Administration' },
|
|
{ href: 'users.html', icon: 'users', label: 'Users & Roles' },
|
|
{ href: 'settings.html', icon: 'settings', label: 'Settings' },
|
|
];
|
|
|
|
// Pages that aren't nav targets but should highlight a parent item.
|
|
const ACTIVE_ALIAS = { 'asset-detail.html': 'assets.html' };
|
|
window.NAV_ACTIVE_ALIAS = ACTIVE_ALIAS;
|
|
|
|
function currentActive() {
|
|
const page = location.pathname.split('/').pop() || 'dashboard.html';
|
|
return ACTIVE_ALIAS[page] || page;
|
|
}
|
|
|
|
function renderSidebar() {
|
|
const host = document.getElementById('appSidebar');
|
|
if (!host) return;
|
|
|
|
const active = currentActive();
|
|
const u = (window.AMS && AMS.currentUser) || { name: 'Arjun Sharma', role: 'Asset Manager', avatar: 'AS' };
|
|
const badgeCount = (window.AMS && AMS.stats) ? AMS.stats.pendingTickets : 12;
|
|
const esc = (s) => String(s).replace(/&/g, '&');
|
|
|
|
const nav = NAV.map((item) => {
|
|
if (item.section) return `<div class="nav-section-label">${item.section}</div>`;
|
|
const cls = 'nav-item' + (item.href === active ? ' active' : '');
|
|
const badge = item.badge ? ` <span class="nav-badge">${badgeCount}</span>` : '';
|
|
return `<a href="${item.href}" class="${cls}"><span class="nav-icon"><i data-lucide="${item.icon}"></i></span> ${esc(item.label)}${badge}</a>`;
|
|
}).join('\n ');
|
|
|
|
host.innerHTML = `
|
|
<div class="sidebar-logo">
|
|
<div class="logo-icon"><i data-lucide="package"></i></div>
|
|
<div><div class="logo-title">AMS</div><div class="logo-sub">Asset Management</div></div>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
${nav}
|
|
</nav>
|
|
<div class="sidebar-footer">
|
|
<div class="user-card">
|
|
<div class="user-av" id="sidebarUserAv">${esc(u.avatar || 'AS')}</div>
|
|
<div style="flex:1;min-width:0">
|
|
<div class="user-name" id="sidebarUserName">${esc(u.name)}</div>
|
|
<div class="user-role" id="sidebarUserRole">${esc(u.role)}</div>
|
|
</div>
|
|
<span style="color:var(--text-muted);font-size:14px">⋮</span>
|
|
</div>
|
|
</div>`;
|
|
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
|
|
window.renderSidebar = renderSidebar;
|
|
// Placeholder is already in the DOM (script runs at end of <body>).
|
|
renderSidebar();
|
|
})();
|