import Link from 'next/link'; import { useRouter } from 'next/router'; import { useEffect } from 'react'; /** * 响应式 折叠菜单 */ export const MenuList = () => { const router = useRouter() useEffect(() => { // ===== responsive navbar const navbarToggler = document.querySelector('#navbarToggler'); const navbarCollapse = document.querySelector('#navbarCollapse'); // 点击弹出菜单 navbarToggler?.addEventListener('click', () => { navbarToggler?.classList.toggle('navbarTogglerActive'); navbarCollapse?.classList.toggle('hidden'); }); //= ==== close navbar-collapse when a clicked document .querySelectorAll('#navbarCollapse ul li:not(.submenu-item) a') .forEach((e) => e.addEventListener('click', () => { navbarToggler?.classList.remove('navbarTogglerActive'); navbarCollapse?.classList.add('hidden'); }) ); // ===== Sub-menu const submenuItems = document.querySelectorAll('.submenu-item'); submenuItems.forEach((el) => { el.querySelector('a')?.addEventListener('click', () => { el.querySelector('.submenu')?.classList.toggle('hidden'); }); }); }, []) return <>
{/* 移动端菜单切换按钮 */} {/* 响应式菜单 */}
}