d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-02 15:10:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

slug 调整兼容已有主题

Browse Source
This commit is contained in:
tangly1024.com
2024-05-08 16:22:14 +08:00
parent 65eff434ec
commit 9b78eb499c
56 changed files with 1318 additions and 826 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
themes/starter/components/MenuList.js
View File

@@ -1,20 +1,40 @@
import { siteConfig } from '@/lib/config';
import { useGlobal } from '@/lib/global';
import { useEffect } from 'react';
import CONFIG from '../config';
import { MenuItem } from './MenuItem';
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) => {
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) }
{
icon: 'fas fa-archive',
name: locale.NAV.ARCHIVE,
href: '/archive',
show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG)
},
{
icon: 'fas fa-search',
name: locale.NAV.SEARCH,
href: '/search',
show: siteConfig('HEO_MENU_SEARCH', null, CONFIG)
},
{
icon: 'fas fa-folder',
name: locale.COMMON.CATEGORY,
href: '/category',
show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG)
},
{
icon: 'fas fa-tag',
name: locale.COMMON.TAGS,
href: '/tag',
show: siteConfig('HEO_MENU_TAG', null, CONFIG)
}
]
if (customNav) {
@@ -23,32 +43,32 @@ export const MenuList = (props) => {
useEffect(() => {
// ===== responsive navbar
const navbarToggler = document.querySelector('#navbarToggler');
const navbarCollapse = document.querySelector('#navbarCollapse');
const navbarToggler = document.querySelector('#navbarToggler')
const navbarCollapse = document.querySelector('#navbarCollapse')
// 点击弹出菜单
navbarToggler?.addEventListener('click', () => {
navbarToggler?.classList.toggle('navbarTogglerActive');
navbarCollapse?.classList.toggle('hidden');
});
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) =>
.forEach(e =>
e.addEventListener('click', () => {
navbarToggler?.classList.remove('navbarTogglerActive');
navbarCollapse?.classList.add('hidden');
navbarToggler?.classList.remove('navbarTogglerActive')
navbarCollapse?.classList.add('hidden')
})
);
)
// ===== Sub-menu
const submenuItems = document.querySelectorAll('.submenu-item');
submenuItems.forEach((el) => {
const submenuItems = document.querySelectorAll('.submenu-item')
submenuItems.forEach(el => {
el.querySelector('a')?.addEventListener('click', () => {
el.querySelector('.submenu')?.classList.toggle('hidden');
});
});
el.querySelector('.submenu')?.classList.toggle('hidden')
})
})
}, [])
// 如果 开启自定义菜单，则覆盖Page生成的菜单
@@ -60,23 +80,29 @@ export const MenuList = (props) => {
// return null
// }
return <>
<div>
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>
{/* 移动端菜单切换按钮 */}
<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>
</>
{/* 响应式菜单 */}
<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>
</>
)
}