/* app.js */

document.addEventListener('DOMContentLoaded', function() {
    const moreButton = document.getElementById('more-nav-button');
    const modal = document.getElementById('more-menu-modal'); 
    const overlay = document.getElementById('more-modal-overlay');

    if (moreButton && modal && overlay) {
        moreButton.addEventListener('click', function() {
            // Toggle visibility classes
            modal.classList.toggle('show');
            overlay.classList.toggle('show');
            document.body.classList.toggle('modal-open'); // Optional: Prevents body scrolling
            
            // Icon/Label Toggle (Example Logic)
            const icon = moreButton.querySelector('i');
            const label = moreButton.querySelector('span');
            
            if (modal.classList.contains('show')) {
                icon.classList.remove('fa-ellipsis-h');
                icon.classList.add('fa-times');
                label.textContent = 'Close';
            } else {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-ellipsis-h');
                label.textContent = 'More';
            }
        });

        // Close modal when tapping overlay
        overlay.addEventListener('click', function() {
            modal.classList.remove('show');
            overlay.classList.remove('show');
            document.body.classList.remove('modal-open');
            // Reset icon/label
            const icon = moreButton.querySelector('i');
            const label = moreButton.querySelector('span');
            icon.classList.remove('fa-times');
            icon.classList.add('fa-ellipsis-h');
            label.textContent = 'More';
        });
    }
});