77 lines
4.5 KiB
JavaScript
77 lines
4.5 KiB
JavaScript
// Shared Navigation Module for VaultSentinel
|
|
// Renders sidebar navigation on all pages
|
|
|
|
function createNavbar(currentPage = 'dashboard') {
|
|
const navHTML = `
|
|
<!-- SideNavBar -->
|
|
<aside class="h-screen w-56 flex flex-col bg-slate-100 dark:bg-slate-900 font-manrope text-sm font-medium border-r border-outline-variant/10 shrink-0">
|
|
<div class="flex flex-col h-full py-6">
|
|
<!-- Header -->
|
|
<div class="px-6 mb-8">
|
|
<div class="text-lg font-black text-slate-900 dark:text-slate-50 tracking-tight leading-none">VaultSentinel</div>
|
|
<div class="text-[10px] uppercase tracking-widest text-on-surface-variant mt-1.5 font-bold">Admin Console</div>
|
|
</div>
|
|
<!-- Primary Nav -->
|
|
<nav class="flex-1 px-3 space-y-1">
|
|
<a href="index.html" class="flex items-center gap-3 px-3 py-2 ${currentPage === 'dashboard' ? 'border-l-4 border-blue-600 bg-slate-200/80 dark:bg-slate-800 text-slate-900 dark:text-slate-50 font-bold' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50'} transition-all group cursor-pointer">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a href="applications.html" class="flex items-center gap-3 px-3 py-2 ${currentPage === 'applications' ? 'border-l-4 border-blue-600 bg-slate-200/80 dark:bg-slate-800 text-slate-900 dark:text-slate-50 font-bold' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50'} transition-all group cursor-pointer">
|
|
<span class="material-symbols-outlined">apps</span>
|
|
<span>Applications</span>
|
|
</a>
|
|
<a href="accounts.html" class="flex items-center gap-3 px-3 py-2 ${currentPage === 'accounts' ? 'border-l-4 border-blue-600 bg-slate-200/80 dark:bg-slate-800 text-slate-900 dark:text-slate-50 font-bold' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50'} transition-all group cursor-pointer">
|
|
<span class="material-symbols-outlined">manage_accounts</span>
|
|
<span>Accounts</span>
|
|
</a>
|
|
</nav>
|
|
<!-- Footer -->
|
|
<div class="px-6 pt-4 border-t border-outline-variant/10">
|
|
<div class="text-[10px] font-bold text-on-surface-variant/40 uppercase tracking-widest">v1.0.0</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Header Bar -->
|
|
<header class="h-14 flex items-center justify-between px-6 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl border-b border-outline-variant/10 shrink-0">
|
|
<div class="flex items-center gap-4 flex-1">
|
|
<div class="flex items-center bg-surface-container-high px-3 py-1.5 rounded-full w-64 group focus-within:ring-2 ring-primary/20 transition-all">
|
|
<span class="material-symbols-outlined text-on-surface-variant text-base">search</span>
|
|
<input id="searchInput" class="bg-transparent border-none focus:ring-0 text-xs w-full placeholder:text-on-surface-variant/60 py-0" placeholder="Search resources..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button class="p-1.5 rounded-full text-slate-500 hover:bg-slate-200 transition-colors">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
</button>
|
|
<button class="p-1.5 rounded-full text-slate-500 hover:bg-slate-200 transition-colors">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
`;
|
|
|
|
return navHTML;
|
|
}
|
|
|
|
// Function to inject navbar (call this from each page)
|
|
function injectNavbar(currentPage = 'dashboard') {
|
|
const navbarWrapper = document.createElement('div');
|
|
navbarWrapper.className = 'flex h-screen w-screen';
|
|
navbarWrapper.innerHTML = createNavbar(currentPage);
|
|
|
|
// Move body content into main section
|
|
const mainSection = document.createElement('main');
|
|
mainSection.className = 'flex-1 flex flex-col h-screen min-w-0 overflow-hidden';
|
|
mainSection.innerHTML = document.body.innerHTML;
|
|
|
|
// Clear body and rebuild structure
|
|
document.body.innerHTML = '';
|
|
document.body.classList.add('flex', 'h-screen', 'w-screen', 'antialiased');
|
|
|
|
// Insert navbar + main content
|
|
document.body.appendChild(navbarWrapper);
|
|
navbarWrapper.appendChild(mainSection);
|
|
}
|