class-theme/assets/js/mobile-menu.js

(function() {
    'use strict';
    
    let drawerElement = null;
    let isDrawerOpen = false;

    // 创建抽屉 (从隐藏的 div 克隆)
    function createDrawer() {
        const template = document.getElementById('mobile-drawer-template');
        if (!template) {
            console.error('Drawer template not found');
            return null;
        }
        
        const overlay = template.querySelector('#mobile-sidebar-overlay');
        if (!overlay) {
            console.error('Overlay element not found in template');
            return null;
        }
        
        const clone = overlay.cloneNode(true);
        clone.id = 'mobile-sidebar-overlay-active';
        
        // --- [新增逻辑] 自动搬运侧边栏挂件 ---
        const sidebarWidgets = document.getElementById('sidebar-widgets');
        const drawerContent = clone.querySelector('.p-5.space-y-6'); // 抽屉的内容容器

        if (sidebarWidgets && drawerContent) {
            // 创建一个专门存放侧边栏内容的容器
            const sidebarMobileContainer = document.createElement('section');
            sidebarMobileContainer.className = 'mobile-sidebar-content space-y-6 pt-4 border-t border-gray-100';
            sidebarMobileContainer.innerHTML = '<h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">实时资讯</h3>';
            
            // 克隆侧边栏所有的子元素（欢迎卡片、计时器等）
            const widgetsClone = sidebarWidgets.cloneNode(true);
            // 移除原本的 ID 避免冲突
            widgetsClone.removeAttribute('id');
            // 将侧边栏内容追加到抽屉中
            sidebarMobileContainer.appendChild(widgetsClone);
            drawerContent.appendChild(sidebarMobileContainer);
        }
        // ------------------------------------

        document.body.appendChild(clone);
        return clone;
    }

    function openDrawer() {
        if (isDrawerOpen) return;
        
        if (!drawerElement) {
            drawerElement = createDrawer();
            if (!drawerElement) return;
            bindDrawerEvents();
        }
        
        // 锁定背景滚动
        const scrollY = window.scrollY;
        document.body.style.overflow = 'hidden';
        document.body.style.position = 'fixed';
        document.body.style.top = `-${scrollY}px`;
        document.body.style.width = '100%';
        
        drawerElement.style.display = 'block';
        isDrawerOpen = true;
        
        requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                const backdrop = drawerElement.querySelector('.drawer-backdrop');
                const panel = drawerElement.querySelector('.drawer-panel');
                if (backdrop) backdrop.style.opacity = '1';
                if (panel) panel.style.transform = 'translateX(0)';
            });
        });

        // 如果克隆的内容里包含计时器，需要重新初始化计时器逻辑
        if (window.initTimers) window.initTimers(drawerElement);
    }

    function closeDrawer() {
        if (!isDrawerOpen || !drawerElement) return;
        
        const backdrop = drawerElement.querySelector('.drawer-backdrop');
        const panel = drawerElement.querySelector('.drawer-panel');
        
        if (backdrop) backdrop.style.opacity = '0';
        if (panel) panel.style.transform = 'translateX(100%)';
        
        setTimeout(() => {
            if (drawerElement) {
                drawerElement.style.display = 'none';
            }
            
            // 恢复滚动
            const scrollY = document.body.style.top;
            document.body.style.overflow = '';
            document.body.style.position = '';
            document.body.style.top = '';
            document.body.style.width = '';
            window.scrollTo(0, parseInt(scrollY || '0') * -1);
            
            isDrawerOpen = false;
        }, 300);
    }

    function bindDrawerEvents() {
        if (!drawerElement) return;
        
        const closeBtn = drawerElement.querySelector('#drawer-close-btn');
        if (closeBtn) {
            closeBtn.addEventListener('click', (e) => {
                e.preventDefault();
                closeDrawer();
            });
        }
        
        const backdrop = drawerElement.querySelector('.drawer-backdrop');
        if (backdrop) {
            backdrop.addEventListener('click', closeDrawer);
        }
        
        const links = drawerElement.querySelectorAll('.drawer-link, .mobile-nav-grid a, a');
        links.forEach(link => {
            link.addEventListener('click', () => {
                setTimeout(closeDrawer, 100);
            });
        });
    }

    document.addEventListener('DOMContentLoaded', () => {
        const trigger = document.getElementById('mobile-menu-trigger');
        if (trigger) {
            trigger.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                openDrawer();
            });
        }
        
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && isDrawerOpen) closeDrawer();
        });
    });

    window.mobileMenu = {
        open: openDrawer,
        close: closeDrawer,
        isOpen: () => isDrawerOpen
    };
})();