71 lines
2.8 KiB
JavaScript
71 lines
2.8 KiB
JavaScript
// Header Component - Performance Optimized with Multi-Language Support
|
|
function createHeader() {
|
|
// Global performance optimization: Add preconnect hints for all pages
|
|
if (!document.head.querySelector('link[href="https://d3js.org"]')) {
|
|
const d3Preconnect = document.createElement('link');
|
|
d3Preconnect.rel = 'preconnect';
|
|
d3Preconnect.href = 'https://d3js.org';
|
|
d3Preconnect.crossOrigin = 'anonymous';
|
|
document.head.appendChild(d3Preconnect);
|
|
|
|
const pexelsPreconnect = document.createElement('link');
|
|
pexelsPreconnect.rel = 'preconnect';
|
|
pexelsPreconnect.href = 'https://images.pexels.com';
|
|
pexelsPreconnect.crossOrigin = 'anonymous';
|
|
document.head.appendChild(pexelsPreconnect);
|
|
}
|
|
|
|
// Get current language and labels
|
|
const lang = typeof LanguageRouter !== 'undefined' ? LanguageRouter.detectLanguage() : 'es';
|
|
const labels = typeof LanguageRouter !== 'undefined' ? LanguageRouter.getNavLabels() : {
|
|
home: 'Inicio', odoo: 'Odoo', odooIA: 'Odoo IA', hosting: 'Hosting Odoo'
|
|
};
|
|
const prefix = typeof LanguageRouter !== 'undefined' ? LanguageRouter.getLinkPrefix() : '';
|
|
|
|
// Get language switcher HTML
|
|
const langSwitcher = typeof LanguageRouter !== 'undefined'
|
|
? LanguageRouter.createLanguageSwitcher()
|
|
: '';
|
|
|
|
return `
|
|
<header class="site-header">
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<div class="nav-brand">
|
|
<a href="${prefix}/" class="logo">
|
|
<span class="logo-text">Odoo Expertos</span>
|
|
</a>
|
|
</div>
|
|
<button class="nav-toggle" aria-label="Toggle navigation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
<div class="nav-menu">
|
|
<ul class="nav-list">
|
|
<li><a href="${prefix}/">${labels.home}</a></li>
|
|
<li><a href="${prefix}/odoo/">${labels.odoo}</a></li>
|
|
<li><a href="${prefix}/odoo-ia/">${labels.odooIA}</a></li>
|
|
<li><a href="${prefix}/odoo-hosting/">${labels.hosting}</a></li>
|
|
</ul>
|
|
${langSwitcher}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
`;
|
|
}
|
|
|
|
// Mobile menu toggle
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const navToggle = document.querySelector('.nav-toggle');
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
|
|
if (navToggle) {
|
|
navToggle.addEventListener('click', function() {
|
|
navMenu.classList.toggle('active');
|
|
navToggle.classList.toggle('active');
|
|
});
|
|
}
|
|
});
|