Autoparts-DB/dashboard/nav.js

/**
 * nav.js  --  Shared navigation component for NEXUS AUTOPARTS
 *
 * Injects a consistent header/nav bar into <div id="shared-nav"></div>.
 * Auto-highlights the current page link based on window.location.pathname.
 *
 * The injected header includes a <div id="shared-nav-extra"></div> slot
 * that pages can populate with additional header content (search bars, stats, etc.)
 * after this script runs.
 */
(function () {
    'use strict';

    var path = window.location.pathname;

    function isActive(href) {
        var h = href.replace(/\/+$/, '') || '/';
        var p = path.replace(/\/+$/, '') || '/';
        if (h === p) return true;
        if ((h === '/' || h === '/index.html') && (p === '/' || p === '/index.html')) return true;
        if ((h === '/admin.html' || h === '/admin') && (p === '/admin.html' || p === '/admin')) return true;
        if ((h === '/diagramas' || h === '/diagrams.html') && (p === '/diagramas' || p === '/diagrams.html')) return true;
        if ((h === '/customer-landing.html') && (p === '/customer-landing.html')) return true;
        if ((h === '/captura') && (p === '/captura')) return true;
        if ((h === '/pos') && (p === '/pos')) return true;
        if ((h === '/cuentas') && (p === '/cuentas')) return true;
        if ((h === '/tienda') && (p === '/tienda')) return true;
        if ((h === '/bodega') && (p === '/bodega')) return true;
        if ((h === '/demo' || h === '/demo.html') && (p === '/demo' || p === '/demo.html')) return true;
        return false;
    }

    var navLinks = [
        { label: 'Demo', href: '/demo' },
        { label: 'Tienda', href: '/tienda' },
        { label: 'Cat\u00e1logo', href: '/index.html' },
        { label: 'Captura', href: '/captura' },
        { label: 'POS', href: '/pos' },
        { label: 'Cuentas', href: '/cuentas' },
        { label: 'Bodega', href: '/bodega' },
        { label: 'Admin', href: '/admin' }
    ];

    var linksHTML = navLinks.map(function (link) {
        var baseStyle = 'text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s;';
        if (isActive(link.href)) {
            baseStyle += ' color: var(--accent);';
        } else {
            baseStyle += ' color: var(--text-secondary);';
        }
        return '<a href="' + link.href + '" style="' + baseStyle + '"'
            + ' onmouseover="this.style.color=\'var(--accent)\'"'
            + ' onmouseout="' + (isActive(link.href) ? '' : 'this.style.color=\'var(--text-secondary)\'') + '"'
            + '>' + link.label + '</a>';
    }).join('');

    var html = ''
        + '<header id="shared-nav-header" style="'
        +     'background: rgba(18, 18, 26, 0.95);'
        +     'backdrop-filter: blur(20px);'
        +     '-webkit-backdrop-filter: blur(20px);'
        +     'border-bottom: 1px solid var(--border);'
        +     'padding: 1rem 2rem;'
        +     'position: fixed;'
        +     'top: 0; left: 0; right: 0;'
        +     'z-index: 1000;'
        + '">'
        +   '<div style="'
        +       'max-width: 1600px;'
        +       'margin: 0 auto;'
        +       'display: flex;'
        +       'justify-content: space-between;'
        +       'align-items: center;'
        +       'gap: 2rem;'
        +   '">'
        // Logo
        +     '<a href="/" style="'
        +         'display: flex;'
        +         'align-items: center;'
        +         'gap: 0.75rem;'
        +         'text-decoration: none;'
        +         'flex-shrink: 0;'
        +     '">'
        +       '<div style="'
        +           'width: 42px; height: 42px;'
        +           'background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%);'
        +           'border-radius: 10px;'
        +           'display: flex; align-items: center; justify-content: center;'
        +           'font-size: 1.5rem;'
        +           'box-shadow: 0 4px 20px var(--accent-glow);'
        +       '">\u2699\uFE0F</div>'
        +       '<span style="'
        +           'font-family: Orbitron, sans-serif;'
        +           'font-size: 1.3rem;'
        +           'font-weight: 700;'
        +           'background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);'
        +           '-webkit-background-clip: text;'
        +           '-webkit-text-fill-color: transparent;'
        +           'background-clip: text;'
        +       '">NEXUS AUTOPARTS</span>'
        +     '</a>'
        // Slot for extra page-specific content (search bars, stats, etc.)
        +     '<div id="shared-nav-extra" style="display: contents;"></div>'
        // Nav links
        +     '<nav id="shared-nav-links" style="'
        +         'display: flex;'
        +         'gap: 1.5rem;'
        +         'align-items: center;'
        +         'flex-shrink: 0;'
        +     '">'
        +       linksHTML
        +     '</nav>'
        // Auth section
        +     '<div id="nav-auth" style="display:flex;align-items:center;gap:0.75rem;flex-shrink:0;">'
        +       '<span id="nav-user-name" style="color:var(--text-secondary);font-size:0.85rem;"></span>'
        +       '<a id="nav-auth-btn" href="/login.html" style="'
        +           'text-decoration:none;font-size:0.85rem;font-weight:500;'
        +           'color:var(--bg);background:var(--accent);'
        +           'padding:0.4rem 1rem;border-radius:6px;'
        +           'transition:opacity 0.2s;'
        +       '">Iniciar Sesi\u00f3n</a>'
        +     '</div>'
        +   '</div>'
        + '</header>';

    var target = document.getElementById('shared-nav');
    if (target) {
        target.innerHTML = html;
    }

    // Auth state
    var token = localStorage.getItem('access_token');
    if (token) {
        try {
            var payload = JSON.parse(atob(token.split('.')[1]));
            var nameEl = document.getElementById('nav-user-name');
            var btnEl = document.getElementById('nav-auth-btn');
            if (nameEl && payload.business_name) {
                nameEl.textContent = payload.business_name;
            } else if (nameEl) {
                nameEl.textContent = payload.role || '';
            }
            if (btnEl) {
                btnEl.textContent = 'Salir';
                btnEl.href = '#';
                btnEl.onclick = function(e) {
                    e.preventDefault();
                    localStorage.removeItem('access_token');
                    localStorage.removeItem('refresh_token');
                    window.location.href = '/login.html';
                };
            }
        } catch(e) {}
    }
})();