const Components = {
navbarHTML: `
`,
footerHTML: `
`,
init: function() {
// Inject Navbar
const navContainer = document.getElementById('navbar-component');
if (navContainer) {
navContainer.innerHTML = this.navbarHTML;
}
// Inject Footer
const footerContainer = document.getElementById('footer-component');
if (footerContainer) {
footerContainer.innerHTML = this.footerHTML;
}
// Setup Mobile Menu Logic
this.setupMobileMenu();
// Highlight current page
this.highlightCurrentPage();
},
setupMobileMenu: function() {
const toggle = document.getElementById('mobile-toggle');
const menu = document.getElementById('mobile-menu');
if (toggle && menu) {
const icon = toggle.querySelector('i');
// Remove old listeners if any to avoid duplicates?
// Since we just injected the HTML, there are no listeners.
toggle.addEventListener('click', () => {
menu.classList.toggle('active');
document.body.classList.toggle('menu-open');
if (menu.classList.contains('active')) {
if(icon) {
icon.classList.remove('fa-bars');
icon.classList.add('fa-times');
}
} else {
if(icon) {
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
}
});
menu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
menu.classList.remove('active');
document.body.classList.remove('menu-open');
if(icon) {
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
});
});
}
},
highlightCurrentPage: function() {
const currentPath = window.location.pathname;
const links = document.querySelectorAll('.nav-links a, .mobile-menu-links a');
links.forEach(link => {
if (link.getAttribute('href') === currentPath) {
link.classList.add('active'); // You might need to add CSS for .active
}
});
}
};
document.addEventListener('DOMContentLoaded', () => {
Components.init();
});