mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 15:09:22 +00:00
83 lines
3.2 KiB
JavaScript
83 lines
3.2 KiB
JavaScript
import { siteConfig } from '@/lib/config';
|
||
import { useGlobal } from '@/lib/global';
|
||
import { useEffect } from 'react';
|
||
import CONFIG from '../config';
|
||
import { MenuItem } from './MenuItem';
|
||
/**
|
||
* 响应式 折叠菜单
|
||
*/
|
||
export const MenuList = (props) => {
|
||
const { customNav, customMenu } = props
|
||
const { locale } = useGlobal()
|
||
|
||
let links = [
|
||
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG) },
|
||
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEO_MENU_SEARCH', null, CONFIG) },
|
||
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG) },
|
||
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('HEO_MENU_TAG', null, CONFIG) }
|
||
]
|
||
|
||
if (customNav) {
|
||
links = customNav.concat(links)
|
||
}
|
||
|
||
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');
|
||
});
|
||
});
|
||
}, [])
|
||
|
||
// 如果 开启自定义菜单，则覆盖Page生成的菜单
|
||
if (siteConfig('CUSTOM_MENU')) {
|
||
links = customMenu
|
||
}
|
||
|
||
// if (!links || links.length === 0) {
|
||
// return null
|
||
// }
|
||
|
||
return <>
|
||
<div>
|
||
|
||
{/* 移动端菜单切换按钮 */}
|
||
<button id="navbarToggler" className="absolute right-4 top-1/2 block -translate-y-1/2 rounded-lg px-3 py-[6px] ring-primary focus:ring-2 lg:hidden">
|
||
<span className="relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all" ></span>
|
||
<span className="relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all" ></span>
|
||
<span className="relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all" ></span>
|
||
</button>
|
||
|
||
{/* 响应式菜单 */}
|
||
<nav id="navbarCollapse" className="absolute right-4 top-full hidden w-full max-w-[250px] rounded-lg bg-white py-5 shadow-lg dark:bg-dark-2 lg:static lg:block lg:w-full lg:max-w-full lg:bg-transparent lg:px-4 lg:py-0 lg:shadow-none dark:lg:bg-transparent xl:px-6">
|
||
<ul className="blcok lg:flex 2xl:ml-20">
|
||
{links?.map((link, index) => <MenuItem key={index} link={link} />)}
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
</>
|
||
}
|