mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-06-06 15:10:29 +00:00
menu
This commit is contained in:
tangly1024.com
54
themes/hexo/components/MenuItemCollapse.js
Normal file
54
themes/hexo/components/MenuItemCollapse.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import Collapse from '@/components/Collapse'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
|
||||
/**
|
||||
* 折叠菜单
|
||||
* @param {*} param0
|
||||
* @returns
|
||||
*/
|
||||
export const MenuItemCollapse = ({ link }) => {
|
||||
const [show, changeShow] = useState(false)
|
||||
const hasSubMenu = link?.subMenus?.length > 0
|
||||
|
||||
const [isOpen, changeIsOpen] = useState(false)
|
||||
|
||||
const toggleShow = () => {
|
||||
changeShow(!show)
|
||||
}
|
||||
|
||||
const toggleOpenSubMenu = () => {
|
||||
changeIsOpen(!isOpen)
|
||||
}
|
||||
|
||||
if (!link || !link.show) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <>
|
||||
<div className='w-full px-8 py-3 text-left border-b dark:bg-hexo-black-gray dark:border-black' onClick={toggleShow} >
|
||||
{!hasSubMenu && <Link
|
||||
href={link?.to}
|
||||
className="font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1">
|
||||
<span className='text-blue-400 hover:text-red-400 transition-all items-center duration-200'>{link?.name}</span>
|
||||
</Link>}
|
||||
{hasSubMenu && <div
|
||||
onClick={hasSubMenu ? toggleOpenSubMenu : null}
|
||||
className="font-extralight flex justify-between pl-2 pr-4 cursor-pointer dark:text-gray-200 no-underline tracking-widest pb-1">
|
||||
<span className='text-blue-400 hover:text-red-400 transition-all items-center duration-200'>{link?.name}</span>
|
||||
<i className='px-2 fa fa-plus text-gray-400'></i>
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
{/* 折叠子菜单 */}
|
||||
{hasSubMenu && <Collapse isOpen={isOpen}>
|
||||
{link.subMenus.map(sLink => {
|
||||
return <div key={sLink.id} className='font-extralight dark:bg-black text-left px-10 justify-start text-blue-400 bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
|
||||
<Link href={sLink.to}>
|
||||
<span className='text-xs'>{sLink.title}</span>
|
||||
</Link>
|
||||
</div>
|
||||
})}
|
||||
</Collapse>}
|
||||
</>
|
||||
}
|
||||
@@ -5,6 +5,10 @@ export const MenuItemDrop = ({ link }) => {
|
||||
const [show, changeShow] = useState(false)
|
||||
const hasSubMenu = link?.subMenus?.length > 0
|
||||
|
||||
if (!link || !link.show) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
|
||||
|
||||
{!hasSubMenu &&
|
||||
@@ -18,16 +22,16 @@ export const MenuItemDrop = ({ link }) => {
|
||||
{hasSubMenu && <>
|
||||
<div className='cursor-pointer font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
|
||||
{link?.name}
|
||||
<i className='px-2 fa fa-angle-down'></i>
|
||||
<i className={`px-2 fa fa-angle-down duration-300 ${show ? 'rotate-180' : 'rotate-0'}`}></i>
|
||||
</div>
|
||||
</>}
|
||||
|
||||
{/* 子菜单 */}
|
||||
{hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 top-12 absolute block drop-shadow-lg `}>
|
||||
{hasSubMenu && <ul style={{ 'backdrop-filter': 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block `}>
|
||||
{link.subMenus.map(sLink => {
|
||||
return <li key={sLink.id} className='not:last-child:border-b-0 border-b text-blue-500 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 py-3 pr-6 pl-2'>
|
||||
return <li key={sLink.id} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-2'>
|
||||
<Link href={sLink.to}>
|
||||
<span className='text-xs font-extralight'>{sLink.title}</span>
|
||||
<span className='text-sm text-nowrap'>{sLink.title}</span>
|
||||
</Link>
|
||||
</li>
|
||||
})}
|
||||
@@ -35,33 +39,3 @@ export const MenuItemDrop = ({ link }) => {
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
// <Link
|
||||
// key={`${link.to}`}
|
||||
// title={link.to}
|
||||
// href={link.to}
|
||||
// target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
|
||||
// className={'py-1.5 my-1 px-3 text-base justify-center items-center cursor-pointer'}>
|
||||
|
||||
// <div className='w-full flex text-sm items-center justify-center hover:scale-125 duration-200 transform'>
|
||||
// <i className={`${link.icon} mr-1`}/>
|
||||
// <div className='text-center'>{link.name}</div>
|
||||
// </div>
|
||||
// </Link>
|
||||
|
||||
// return (
|
||||
// <Link
|
||||
// key={`${link.to}`}
|
||||
// title={link.to}
|
||||
// href={link.to}
|
||||
// className={'py-1.5 px-5 text-base justify-between hover:bg-indigo-400 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
|
||||
// (selected ? 'bg-gray-200 text-black' : ' ')}>
|
||||
|
||||
// <div className='my-auto items-center justify-center flex '>
|
||||
// <i className={`${link.icon} w-4 text-center`} />
|
||||
// <div className={'ml-4'}>{link.name}</div>
|
||||
// </div>
|
||||
// {link.slot}
|
||||
|
||||
// </Link>
|
||||
// )
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
import React from 'react'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import CONFIG_HEXO from '../config_hexo'
|
||||
import BLOG from '@/blog.config'
|
||||
import { MenuItemDrop } from './MenuItemDrop'
|
||||
|
||||
const MenuList = (props) => {
|
||||
const { postCount, customNav, customMenu } = props
|
||||
const { locale } = useGlobal()
|
||||
const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
|
||||
|
||||
let links = [
|
||||
{ icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
|
||||
{ icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
|
||||
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG },
|
||||
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
|
||||
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH }
|
||||
]
|
||||
if (customNav) {
|
||||
links = links.concat(customNav)
|
||||
}
|
||||
|
||||
// 如果 开启自定义菜单，则覆盖Page生成的菜单
|
||||
if (BLOG.CUSTOM_MENU) {
|
||||
links = customMenu
|
||||
}
|
||||
|
||||
return (
|
||||
<nav id='nav' className='leading-8 text-gray-500 dark:text-gray-300 '>
|
||||
{links.map(link => <MenuItemDrop key={link.id} link={link} />)}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
export default MenuList
|
||||
32
themes/hexo/components/MenuListSide.js
Normal file
32
themes/hexo/components/MenuListSide.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import BLOG from '@/blog.config'
|
||||
import { MenuItemCollapse } from './MenuItemCollapse'
|
||||
import CONFIG_HEXO from '../config_hexo'
|
||||
|
||||
export const MenuListSide = (props) => {
|
||||
const { customNav, customMenu } = props
|
||||
const { locale } = useGlobal()
|
||||
|
||||
let links = [
|
||||
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE },
|
||||
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
|
||||
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
|
||||
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG }
|
||||
]
|
||||
|
||||
if (customNav) {
|
||||
links = customNav.concat(links)
|
||||
}
|
||||
|
||||
// 如果 开启自定义菜单，则覆盖Page生成的菜单
|
||||
if (BLOG.CUSTOM_MENU) {
|
||||
links = customMenu
|
||||
}
|
||||
return (
|
||||
<nav>
|
||||
{/* {links.map(link => <MenuItemNormal key={link.id} link={link} />)} */}
|
||||
{links?.map(link => <MenuItemCollapse key={link.id} link={link} />)}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import CONFIG_HEXO from '../config_hexo'
|
||||
import { MenuItemDrop } from './MenuItemDrop'
|
||||
import BLOG from '@/blog.config'
|
||||
import { MenuItemDrop } from './MenuItemDrop'
|
||||
|
||||
export const MenuListTop = (props) => {
|
||||
const { customNav, customMenu } = props
|
||||
@@ -25,9 +25,9 @@ export const MenuListTop = (props) => {
|
||||
links = customMenu
|
||||
}
|
||||
|
||||
return (
|
||||
<nav id='nav' className='leading-8 flex justify-center font-light w-full'>
|
||||
{links.map(link => link && link.show && <MenuItemDrop key={link.id} link={link} />)}
|
||||
return (<>
|
||||
<nav id='nav-mobile' className='leading-8 justify-center font-light w-full flex'>
|
||||
{links?.map(link => link && link.show && <MenuItemDrop key={link.id} link={link} />)}
|
||||
</nav>
|
||||
)
|
||||
</>)
|
||||
}
|
||||
|
||||
29
themes/hexo/components/SideBar.js
Normal file
29
themes/hexo/components/SideBar.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import { MenuListSide } from './MenuListSide'
|
||||
|
||||
/**
|
||||
* 侧边抽屉
|
||||
* @param tags
|
||||
* @param currentTag
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const SideBar = (props) => {
|
||||
const { siteInfo } = props
|
||||
|
||||
return (
|
||||
<div id='side-bar' className=''>
|
||||
<div className="mh-48 w-full bg-indigo-700">
|
||||
<div className='mx-5 pt-6 pb-2'>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={siteInfo?.icon} className='cursor-pointer rounded-full' width={80} alt={BLOG.AUTHOR} />
|
||||
<div className='text-white text-xl my-1'>{siteInfo?.title}</div>
|
||||
<div className='text-xs my-1 text-gray-300'>{siteInfo?.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
<MenuListSide {...props} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SideBar
|
||||
@@ -6,10 +6,10 @@ import Logo from './Logo'
|
||||
import SearchDrawer from './SearchDrawer'
|
||||
import TagGroups from './TagGroups'
|
||||
import { MenuListTop } from './MenuListTop'
|
||||
import MenuList from './MenuList'
|
||||
import { useRouter } from 'next/router'
|
||||
import throttle from 'lodash.throttle'
|
||||
import Collapse from '@/components/Collapse'
|
||||
import SideBarDrawer from '@/components/SideBarDrawer'
|
||||
import SideBar from './SideBar'
|
||||
|
||||
let windowTop = 0
|
||||
|
||||
@@ -31,6 +31,10 @@ const TopNav = props => {
|
||||
changeShow(!isOpen)
|
||||
}
|
||||
|
||||
const toggleSideBarClose = () => {
|
||||
changeShow(false)
|
||||
}
|
||||
|
||||
// 监听滚动
|
||||
useEffect(() => {
|
||||
scrollTrigger()
|
||||
@@ -129,7 +133,7 @@ const TopNav = props => {
|
||||
<SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
|
||||
|
||||
{/* 导航栏 */}
|
||||
<div id='sticky-nav' style={{ 'backdrop-filter': 'blur(3px)' }} className={'top-0 duration-200 transition-all shadow-none fixed bg-none dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform border-transparent dark:border-transparent'}>
|
||||
<div id='sticky-nav' style={{ 'backdrop-filter': 'blur(3px)' }} className={'top-0 duration-200 transition-all shadow-none fixed bg-none dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform border-transparent dark:border-transparent'}>
|
||||
<div className='w-full flex justify-between items-center px-4 py-2'>
|
||||
<div className='flex'>
|
||||
<Logo {...props} />
|
||||
@@ -143,13 +147,12 @@ const TopNav = props => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Collapse type='vertical' isOpen={isOpen} className='shadow-xl'>
|
||||
<div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 px-5 lg:hidden '>
|
||||
<MenuList {...props} />
|
||||
</div>
|
||||
</Collapse>
|
||||
</div>
|
||||
|
||||
{/* 折叠侧边栏 */}
|
||||
<SideBarDrawer className='h-screen' isOpen={isOpen} onClose={toggleSideBarClose}>
|
||||
<SideBar {...props} />
|
||||
</SideBarDrawer>
|
||||
</div>)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user