// MangaVerse Dark - Navbar Component
class MangaNavbar extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
}
render() {
this.shadowRoot.innerHTML = `
`;
this.initializeEventListeners();
}
initializeEventListeners() {
// User dropdown
const userBtn = this.shadowRoot.getElementById('user-menu-btn');
const dropdown = this.shadowRoot.getElementById('user-dropdown');
if (userBtn && dropdown) {
userBtn.addEventListener('click', (e) => {
e.stopPropagation();
dropdown.classList.toggle('show');
});
// Close dropdown when clicking outside
document.addEventListener('click', () => {
dropdown.classList.remove('show');
});
}
// Mobile menu toggle
const mobileBtn = this.shadowRoot.getElementById('mobile-menu-btn');
const mobilePanel = this.shadowRoot.getElementById('mobile-panel');
if (mobileBtn && mobilePanel) {
mobileBtn.addEventListener('click', () => {
mobilePanel.classList.toggle('hidden');
});
}
// Search functionality
const searchInput = this.shadowRoot.querySelector('.search-input');
if (searchInput) {
searchInput.addEventListener('input', (e) => {
// In a real app, this would trigger search
console.log('Searching for:', e.target.value);
});
}
// Smooth scroll for anchor links
this.shadowRoot.querySelectorAll('a[href^="#"]').forEach(link => {
link.addEventListener('click', (e) => {
const href = link.getAttribute('href');
if (href !== '#home') {
e.preventDefault();
const target = document.querySelector(href);
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
});
});
}
}
customElements.define('manga-navbar', MangaNavbar);