class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
this.initMobileMenu();
this.initScrollEffects();
}
initMobileMenu() {
const menuButton = this.shadowRoot.querySelector('button');
const closeButton = this.shadowRoot.querySelector('.close-menu');
const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
menuButton.addEventListener('click', () => {
mobileMenu.classList.add('open');
document.body.style.overflow = 'hidden';
});
closeButton.addEventListener('click', () => {
mobileMenu.classList.remove('open');
document.body.style.overflow = '';
});
// Close menu when clicking on links
this.shadowRoot.querySelectorAll('.mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.remove('open');
document.body.style.overflow = '';
});
});
}
initScrollEffects() {
let lastScrollTop = 0;
window.addEventListener('scroll', () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop && scrollTop > 100) {
this.style.transform = 'translateY(-100%)';
} else {
this.style.transform = 'translateY(0)';
}
lastScrollTop = scrollTop;
});
}
}
customElements.define('custom-navbar', CustomNavbar);