main setup created.

2025-11-26 11:22:55 -06:00
parent 076027e8b4
commit 9eb8be207d
11 changed files with 1803 additions and 2 deletions
@@ -0,0 +1,158 @@
+// 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';
+}