199 lines
12 KiB
JavaScript
199 lines
12 KiB
JavaScript
/**
|
|
* sidebar.js — Shared sidebar matching the design system style
|
|
* Replaces existing sidebar in each page with a consistent, themed version.
|
|
* Uses i18n t() for all labels when available.
|
|
*/
|
|
window.renderSidebar = function(modulesOverride) {
|
|
'use strict';
|
|
|
|
// i18n helper — falls back to raw string if i18n.js not loaded
|
|
var _t = typeof window.t === 'function' ? window.t : function(k) { return k; };
|
|
|
|
var u = window.POS_USER || {};
|
|
var name = u.name || 'Usuario';
|
|
var roleLabel = u.roleLabel || '';
|
|
var initials = u.initials || '?';
|
|
var currentPath = window.location.pathname;
|
|
var currentTheme = localStorage.getItem('pos_theme') || 'industrial';
|
|
var currentLang = localStorage.getItem('pos_lang') || 'es';
|
|
|
|
var modules = {};
|
|
if (modulesOverride && typeof modulesOverride === 'object') {
|
|
modules = modulesOverride;
|
|
} else {
|
|
try {
|
|
modules = JSON.parse(localStorage.getItem('pos_modules') || '{}');
|
|
} catch(e) { modules = {}; }
|
|
}
|
|
|
|
function moduleEnabled(key) {
|
|
// Default to true if not configured yet
|
|
return modules[key] !== false;
|
|
}
|
|
|
|
var navSections = [
|
|
{ label: _t('nav_main'), items: [
|
|
{ name: _t('dashboard'), href: '/pos/dashboard', icon: '<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>' },
|
|
{ name: _t('pos'), href: '/pos/sale', icon: '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>' },
|
|
moduleEnabled('catalog') ? { name: _t('catalog'), href: '/pos/catalog', icon: '<path d="M4 6h16M4 10h16M4 14h16M4 18h16"/>' } : null,
|
|
{ name: _t('inventory'), href: '/pos/inventory', icon: '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>' },
|
|
].filter(Boolean)},
|
|
{ label: _t('nav_management'), items: [
|
|
{ name: _t('customers'), href: '/pos/customers', icon: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>' },
|
|
{ name: 'Cotizaciones', href: '/pos/quotations', icon: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="15" x2="15" y2="15"/><line x1="12" y1="12" x2="12" y2="18"/>' },
|
|
moduleEnabled('marketplace') ? { name: 'Marketplace', href: '/pos/marketplace', icon: '<circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>' } : null,
|
|
moduleEnabled('meli') ? { name: 'MercadoLibre', href: '/pos/marketplace-external', icon: '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>' } : null,
|
|
{ name: _t('invoicing'), href: '/pos/invoicing', icon: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>' },
|
|
{ name: _t('accounting'), href: '/pos/accounting', icon: '<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>' },
|
|
{ name: _t('reports'), href: '/pos/reports', icon: '<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>' },
|
|
{ name: _t('fleet'), href: '/pos/fleet', icon: '<path d="M1 13h22M1 13l2-6h6l2 6M9 7h6l2 6M15 13l2-6M5 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM19 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>' },
|
|
moduleEnabled('whatsapp') ? { name: _t('whatsapp'), href: '/pos/whatsapp', icon: '<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>' } : null,
|
|
].filter(Boolean)},
|
|
{ label: _t('nav_system'), items: [
|
|
{ name: _t('config'), href: '/pos/config', icon: '<circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/>' },
|
|
]},
|
|
];
|
|
|
|
function svgIcon(paths) {
|
|
return '<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">' + paths + '</svg>';
|
|
}
|
|
|
|
// Build nav HTML
|
|
var navHtml = '';
|
|
navSections.forEach(function(sec) {
|
|
navHtml += '<div class="nav-section-label">' + sec.label + '</div>';
|
|
sec.items.forEach(function(item) {
|
|
var active = currentPath === item.href;
|
|
navHtml += '<a class="nav-item' + (active ? ' is-active' : '') + '" href="' + item.href + '"'
|
|
+ (active ? ' aria-current="page"' : '') + '>'
|
|
+ svgIcon(item.icon)
|
|
+ '<span>' + item.name + '</span></a>';
|
|
});
|
|
});
|
|
|
|
// Theme toggle buttons
|
|
var themeHtml = '<div class="sidebar__theme-toggle">'
|
|
+ '<button class="theme-toggle-btn' + (currentTheme === 'industrial' ? ' is-active' : '') + '" onclick="posSetTheme(\'industrial\');updateThemeButtons()" title="' + _t('dark_theme') + '">'
|
|
+ '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>'
|
|
+ '</button>'
|
|
+ '<button class="theme-toggle-btn' + (currentTheme === 'modern' ? ' is-active' : '') + '" onclick="posSetTheme(\'modern\');updateThemeButtons()" title="' + _t('light_theme') + '">'
|
|
+ '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>'
|
|
+ '</button>'
|
|
+ '</div>';
|
|
|
|
// Language toggle buttons
|
|
var langHtml = '<div class="sidebar__lang-toggle">'
|
|
+ '<button class="lang-toggle-btn' + (currentLang === 'es' ? ' is-active' : '') + '" onclick="setLang(\'es\')" title="Espanol">'
|
|
+ '<span class="lang-flag">MX</span> ES'
|
|
+ '</button>'
|
|
+ '<button class="lang-toggle-btn' + (currentLang === 'en' ? ' is-active' : '') + '" onclick="setLang(\'en\')" title="English">'
|
|
+ '<span class="lang-flag">US</span> EN'
|
|
+ '</button>'
|
|
+ '</div>';
|
|
|
|
window.updateThemeButtons = function() {
|
|
var t = localStorage.getItem('pos_theme') || 'industrial';
|
|
document.querySelectorAll('.theme-toggle-btn').forEach(function(b, i) {
|
|
b.classList.toggle('is-active', i === 0 ? t === 'industrial' : t === 'modern');
|
|
});
|
|
};
|
|
|
|
var sidebarHtml = ''
|
|
+ '<div class="sidebar__brand">'
|
|
+ ' <div class="brand-logo">NA</div>'
|
|
+ ' <div class="brand-name">'
|
|
+ ' <span class="brand-name__primary">Nexus</span>'
|
|
+ ' <span class="brand-name__sub">Autoparts POS</span>'
|
|
+ ' </div>'
|
|
+ '</div>'
|
|
+ '<nav class="sidebar__nav">' + navHtml + '</nav>'
|
|
+ themeHtml
|
|
+ langHtml
|
|
+ '<div class="sidebar__footer">'
|
|
+ ' <div class="sidebar__user-avatar">' + initials + '</div>'
|
|
+ ' <div class="sidebar__user-info">'
|
|
+ ' <div class="sidebar__user-name">' + name + '</div>'
|
|
+ ' <div class="sidebar__user-role">' + roleLabel + '</div>'
|
|
+ ' </div>'
|
|
+ ' <button class="sidebar__logout-btn" onclick="posLogout()" title="' + _t('logout') + '">'
|
|
+ ' <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>'
|
|
+ ' </button>'
|
|
+ '</div>';
|
|
|
|
// Replace existing sidebar
|
|
var existing = document.querySelector('aside.sidebar, .sidebar, #sidebar');
|
|
if (existing) {
|
|
existing.className = 'pos-sidebar';
|
|
existing.innerHTML = sidebarHtml;
|
|
existing.removeAttribute('style');
|
|
} else {
|
|
var el = document.createElement('aside');
|
|
el.className = 'pos-sidebar';
|
|
el.innerHTML = sidebarHtml;
|
|
document.body.insertBefore(el, document.body.firstChild);
|
|
}
|
|
|
|
// Offset main content
|
|
var main = document.querySelector('main, .main-content, #mainContent, .main, .page-content');
|
|
if (main) main.classList.add('pos-main-offset');
|
|
|
|
// ── Tablet/mobile: sidebar toggle + overlay ─────────────────────
|
|
var sidebar = document.querySelector('.pos-sidebar, .sidebar, #sidebar');
|
|
var overlay = document.getElementById('sidebar-overlay');
|
|
|
|
// Create overlay if it doesn't exist
|
|
if (!overlay && sidebar) {
|
|
overlay = document.createElement('div');
|
|
overlay.id = 'sidebar-overlay';
|
|
overlay.className = 'sidebar-overlay';
|
|
overlay.addEventListener('click', function () { closeSidebar(); });
|
|
sidebar.parentNode.insertBefore(overlay, sidebar);
|
|
}
|
|
|
|
// Create hamburger button if it doesn't exist
|
|
var hamburger = document.getElementById('hamburger-btn');
|
|
if (!hamburger) {
|
|
hamburger = document.createElement('button');
|
|
hamburger.id = 'hamburger-btn';
|
|
hamburger.className = 'hamburger-btn';
|
|
hamburger.setAttribute('aria-label', 'Menú');
|
|
hamburger.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>';
|
|
hamburger.style.cssText = 'display:none;position:fixed;top:10px;left:10px;z-index:' +
|
|
(parseInt(getComputedStyle(document.documentElement).getPropertyValue('--z-modal') || 1050) + 2) +
|
|
';background:var(--glass-bg-strong);backdrop-filter:blur(12px);border:1px solid var(--glass-border);' +
|
|
'border-radius:var(--radius-md);padding:8px;cursor:pointer;color:var(--color-text-primary);' +
|
|
'box-shadow:0 2px 8px rgba(0,0,0,0.2);';
|
|
hamburger.addEventListener('click', function () { toggleSidebar(); });
|
|
document.body.appendChild(hamburger);
|
|
}
|
|
|
|
function toggleSidebar() {
|
|
if (!sidebar) return;
|
|
var isOpen = sidebar.classList.contains('open');
|
|
sidebar.classList.toggle('open', !isOpen);
|
|
if (overlay) overlay.classList.toggle('open', !isOpen);
|
|
document.body.style.overflow = isOpen ? '' : 'hidden';
|
|
}
|
|
|
|
function closeSidebar() {
|
|
if (sidebar) sidebar.classList.remove('open');
|
|
if (overlay) overlay.classList.remove('open');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// Auto-close sidebar on window resize to desktop
|
|
window.addEventListener('resize', function () {
|
|
if (window.innerWidth >= 1024) closeSidebar();
|
|
});
|
|
|
|
// Expose globally so inline onclick handlers and page-specific JS can call them
|
|
window.toggleSidebar = toggleSidebar;
|
|
window.closeSidebar = closeSidebar;
|
|
|
|
// Reveal sidebar smoothly after replacement to avoid flash/stun
|
|
document.body.classList.add('sidebar-ready');
|
|
};
|
|
|
|
// Initial render
|
|
window.renderSidebar();
|