ES6 Modules Structure

// modules/navigation.js
export class Navigation {
    constructor() {
        this.menu = document.querySelector('.site-navigation');
        this.toggleButton = document.querySelector('.menu-toggle');
        this.isOpen = false;
        
        this.init();
    }
    
    init() {
        if (!this.menu || !this.toggleButton) return;
        
        this.bindEvents();
        this.setupAccessibility();
    }
    
    bindEvents() {
        this.toggleButton.addEventListener('click', () => this.toggle());
        
        // Close on escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.isOpen) {
                this.close();
            }
        });
        
        // Close on click outside
        document.addEventListener('click', (e) => {
            if (this.isOpen && !this.menu.contains(e.target)) {
                this.close();
            }
        });
    }
    
    toggle() {
        this.isOpen ? this.close() : this.open();
    }
    
    open() {
        this.isOpen = true;
        this.menu.classList.add('is-open');
        this.toggleButton.setAttribute('aria-expanded', 'true');
        
        // Trap focus
        this.trapFocus();
    }
    
    close() {
        this.isOpen = false;
        this.menu.classList.remove('is-open');
        this.toggleButton.setAttribute('aria-expanded', 'false');
        
        // Release focus
        this.releaseFocus();
    }
    
    trapFocus() {
        const focusableElements = this.menu.querySelectorAll(
            'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
        );
        
        const firstElement = focusableElements[0];
        const lastElement = focusableElements[focusableElements.length - 1];
        
        this.menu.addEventListener('keydown', (e) => {
            if (e.key !== 'Tab') return;
            
            if (e.shiftKey && document.activeElement === firstElement) {
                e.preventDefault();
                lastElement.focus();
            } else if (!e.shiftKey && document.activeElement === lastElement) {
                e.preventDefault();
                firstElement.focus();
            }
        });
    }
    
    releaseFocus() {
        // Implementation for releasing focus trap
    }
    
    setupAccessibility() {
        // Add ARIA labels
        this.menu.setAttribute('aria-label', 'Main navigation');
        
        // Setup keyboard navigation
        const menuItems = this.menu.querySelectorAll('.menu-item-has-children > a');
        
        menuItems.forEach(item => {
            item.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    this.toggleSubmenu(item.parentElement);
                }
            });
        });
    }
    
    toggleSubmenu(menuItem) {
        const submenu = menuItem.querySelector('.sub-menu');
        if (!submenu) return;
        
        const isOpen = menuItem.classList.contains('is-open');
        
        if (isOpen) {
            menuItem.classList.remove('is-open');
            submenu.setAttribute('aria-hidden', 'true');
        } else {
            menuItem.classList.add('is-open');
            submenu.setAttribute('aria-hidden', 'false');
        }
    }
}

// modules/search.js
export class Search {
    constructor() {
        this.searchForm = document.querySelector('.search-form');
        this.searchInput = document.querySelector('.search-input');
        this.searchResults = document.querySelector('.search-results');
        this.debounceTimer = null;
        
        this.init();
    }
    
    init() {
        if (!this.searchInput) return;
        
        this.searchInput.addEventListener('input', (e) => {
            this.handleSearch(e.target.value);
        });
    }
    
    handleSearch(query) {
        clearTimeout(this.debounceTimer);
        
        if (query.length < 3) {
            this.hideResults();
            return;
        }
        
        this.debounceTimer = setTimeout(() => {
            this.performSearch(query);
        }, 300);
    }
    
    async performSearch(query) {
        try {
            const response = await fetch(
                `/wp-json/wp/v2/search?search=${encodeURIComponent(query)}&type=post&per_page=5`
            );
            
            const results = await response.json();
            this.displayResults(results);
        } catch (error) {
            console.error('Search error:', error);
        }
    }
    
    displayResults(results) {
        if (results.length === 0) {
            this.searchResults.innerHTML = '<p>No results found</p>';
            return;
        }
        
        const html = results.map(result => `
            <a href="${result.url}" class="search-result">
                <h4>${result.title}</h4>
                ${result.excerpt ? `<p>${result.excerpt}</p>` : ''}
            </a>
        `).join('');
        
        this.searchResults.innerHTML = html;
        this.showResults();
    }
    
    showResults() {
        this.searchResults.classList.add('is-visible');
    }
    
    hideResults() {
        this.searchResults.classList.remove('is-visible');
    }
}

// main.js
import { Navigation } from './modules/navigation.js';
import { Search } from './modules/search.js';

class Theme {
    constructor() {
        this.modules = {};
        this.init();
    }
    
    init() {
        // Wait for DOM ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', () => this.initModules());
        } else {
            this.initModules();
        }
    }
    
    initModules() {
        // Initialize modules
        this.modules.navigation = new Navigation();
        this.modules.search = new Search();
        
        // Initialize other features
        this.initSmoothScroll();
        this.initLazyLoading();
    }
    
    initSmoothScroll() {
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', (e) => {
                e.preventDefault();
                const target = document.querySelector(anchor.getAttribute('href'));
                
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    }
    
    initLazyLoading() {
        if ('IntersectionObserver' in window) {
            const images = document.querySelectorAll('img[data-src]');
            const imageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src;
                        img.removeAttribute('data-src');
                        imageObserver.unobserve(img);
                    }
                });
            });
            
            images.forEach(img => imageObserver.observe(img));
        }
    }
}

// Initialize theme
new Theme();