159 lines
4.7 KiB
JavaScript
159 lines
4.7 KiB
JavaScript
// Shared components for PRISM application
|
|
|
|
export class MenuBar {
|
|
constructor(currentPage = 'dashboard') {
|
|
this.currentPage = currentPage;
|
|
this.injectStyles();
|
|
}
|
|
|
|
injectStyles() {
|
|
// Only inject styles once
|
|
if (document.getElementById('menubar-styles')) {
|
|
return;
|
|
}
|
|
|
|
const style = document.createElement('style');
|
|
style.id = 'menubar-styles';
|
|
style.textContent = `
|
|
.header {
|
|
background: linear-gradient(135deg, var(--gruvbox-bg2) 0%, var(--gruvbox-bg1) 100%);
|
|
color: var(--gruvbox-fg0);
|
|
padding: 1.25rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
border-bottom: 1px solid var(--gruvbox-bg3);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--gruvbox-orange);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--gruvbox-fg1);
|
|
text-decoration: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
transition: all 0.3s ease;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: var(--gruvbox-bg3);
|
|
color: var(--gruvbox-fg0);
|
|
}
|
|
|
|
.nav-link.active {
|
|
background: var(--gruvbox-blue);
|
|
color: var(--gruvbox-bg0);
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.user-info span {
|
|
color: var(--gruvbox-fg1);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.logout-btn {
|
|
background: var(--gruvbox-red);
|
|
color: var(--gruvbox-fg0);
|
|
border: 1px solid var(--gruvbox-bg3);
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.logout-btn:hover {
|
|
background: var(--gruvbox-orange);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(251, 73, 52, 0.3);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header {
|
|
padding: 1rem;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.nav-links {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
render(userName = 'Loading...') {
|
|
return `
|
|
<header class="header">
|
|
<h1>🏗️ PRISM</h1>
|
|
<nav class="nav-links">
|
|
<a href="/dashboard.html" class="nav-link ${this.currentPage === 'dashboard' ? 'active' : ''}">Dashboard</a>
|
|
<a href="/jobs.html" class="nav-link ${this.currentPage === 'jobs' ? 'active' : ''}">Jobs</a>
|
|
</nav>
|
|
<div class="user-info">
|
|
<span id="user-name">${userName}</span>
|
|
<button class="logout-btn" onclick="logout()">Logout</button>
|
|
</div>
|
|
</header>
|
|
`;
|
|
}
|
|
|
|
updateUserName(name) {
|
|
const userNameElement = document.getElementById('user-name');
|
|
if (userNameElement) {
|
|
userNameElement.textContent = name;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Utility function to initialize the menu bar
|
|
export function initMenuBar(currentPage, userName = 'Loading...') {
|
|
const menuBar = new MenuBar(currentPage);
|
|
|
|
// Insert the menu bar at the beginning of the body
|
|
const body = document.body;
|
|
const firstChild = body.firstElementChild;
|
|
|
|
// Create a temporary container for the menu HTML
|
|
const tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = menuBar.render(userName).trim();
|
|
|
|
// Insert the menu bar before the first child
|
|
if (firstChild) {
|
|
body.insertBefore(tempDiv.firstElementChild, firstChild);
|
|
} else {
|
|
body.appendChild(tempDiv.firstElementChild);
|
|
}
|
|
|
|
return menuBar;
|
|
}
|
|
|
|
// Export a function to get the current page from the URL
|
|
export function getCurrentPage() {
|
|
const path = window.location.pathname;
|
|
if (path.includes('jobs.html')) {
|
|
return 'jobs';
|
|
}
|
|
return 'dashboard';
|
|
}
|