d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

menu-animation

Browse Source
This commit is contained in:
tangly1024.com
2023-03-23 13:16:28 +08:00
parent 7861c6d6a9
commit 1487725be5
17 changed files with 189 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/example/components/DropMenu.js
View File

@@ -24,7 +24,7 @@ export const DropMenu = ({ link }) => {
}
{/* 子菜单 */}
{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 className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-0'} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 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'>
<Link href={sLink.to}>

7
themes/fukasawa/LayoutBase.js
View File

@@ -34,14 +34,17 @@ const LayoutBase = (props) => {
return (<div id='theme-fukasawa' >
<CommonHead meta={meta} />
<TopNav {...props}/>
<div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
<AsideLeft {...props} slot={leftAreaSlot}/>
<main id='wrapper' className='relative flex w-full py-8 justify-center'>
<div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'>
<main id='wrapper' className='relative flex w-full py-8 justify-center z-10'>
<div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative'>
<div> {headerSlot} </div>
<div>{children}</div>
</div>
</main>
</div>
</div>)

6
themes/fukasawa/components/AsideLeft.js
View File

@@ -1,6 +1,6 @@
import Logo from './Logo'
import GroupCategory from './GroupCategory'
import GroupMenu from './GroupMenu'
import { MenuList } from './MenuList'
import GroupTag from './GroupTag'
import SearchInput from './SearchInput'
import SiteInfo from './SiteInfo'
@@ -11,12 +11,12 @@ import DarkModeButton from '@/components/DarkModeButton'
function AsideLeft (props) {
const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo } = props
const router = useRouter()
return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-10'>
return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-20'>
<Logo {...props}/>
<section className='flex flex-col text-gray-600'>
<hr className='w-12 my-8' />
<GroupMenu {...props}/>
<MenuList {...props}/>
</section>
<section className='flex flex-col text-gray-600'>

51
themes/fukasawa/components/GroupMenu.js
View File

@@ -1,51 +0,0 @@
import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useGlobal } from '@/lib/global'
import CONFIG_FUKA from '../config_fuka'
function GroupMenu ({ customNav }) {
const { locale } = useGlobal()
const router = useRouter()
let links = [
{ name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_FUKA.MENU_CATEGORY },
{ name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_FUKA.MENU_TAG },
{ name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_FUKA.MENU_ARCHIVE },
{ name: locale.NAV.SEARCH, to: '/search', show: CONFIG_FUKA.MENU_SEARCH }
]
if (customNav) {
links = links.concat(customNav)
}
return (
<nav id='nav' className='font-sans text-sm'>
{links.map(link => {
if (link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return (
<Link
key={`${link.to}`}
title={link.to}
href={link.to}
className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'text-black' : ' ')}>
<div className='my-auto items-center justify-center flex '>
<div className={ 'hover:text-black'}>{link.name}</div>
</div>
{link.slot}
</Link>
)
} else {
return null
}
})}
</nav>
)
}
export default GroupMenu

62
themes/fukasawa/components/MenuItemCollapse.js Normal file
View File

@@ -0,0 +1,62 @@
import Collapse from '@/components/Collapse'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
/**
* 折叠菜单
* @param {*} param0
* @returns
*/
export const MenuItemCollapse = (props) => {
const { link } = props
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
const [isOpen, changeIsOpen] = useState(false)
const router = useRouter()
if (!link || !link.show) {
return null
}
const selected = (router.pathname === link.to) || (router.asPath === link.to)
const toggleShow = () => {
changeShow(!show)
}
const toggleOpenSubMenu = () => {
changeIsOpen(!isOpen)
}
return <>
<div className={ (selected ? 'bg-gray-600 text-white hover:text-white' : 'hover:text-gray-600') + ' px-5 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} >
{!hasSubMenu && <Link href={link?.to} className='py-2 w-full my-auto items-center justify-between flex '>
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
</Link>}
{hasSubMenu && <div
onClick={hasSubMenu ? toggleOpenSubMenu : null}
className="py-2 font-extralight flex justify-between cursor-pointer dark:text-gray-200 no-underline tracking-widest">
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
<div className='inline-flex items-center '><i className='px-2 fa fa-plus text-gray-400'></i></div>
</div>}
</div>
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='
not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100
font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
<Link href={sLink.to}>
<div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div>
</Link>
</div>
})}
</Collapse>}
</>
}

36
themes/fukasawa/components/MenuItemDrop.js Normal file
View File

@@ -0,0 +1,36 @@
import Link from 'next/link'
import { useState } from 'react'
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
return <li onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)}
className='relative py-1 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center '>
{!hasSubMenu &&
<Link href={link?.to} className='w-full my-auto items-center justify-between flex ' >
<div><div className={`${link.icon} text-center w-4 mr-2`} />{link.name}</div>
{link.slot}
</Link>}
{hasSubMenu &&
<div className='w-full my-auto items-center justify-between flex '>
<div><div className={`${link.icon} text-center w-4 mr-2`} />{link.name}</div>
{link.slot}
{hasSubMenu && <div className='text-right'><i className='px-2 fa fa-angle-right'></i></div>}
</div>}
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} py-1 absolute right-0 top-0 w-full border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className='my-auto py-1 px-2 items-center justify-start flex text-gray-500 dark:text-gray-300 hover:text-black hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
<i className={`${sLink.icon} w-4 text-center`} />
<div className={'ml-2'}>{sLink.name}</div>
{sLink.slot}
</li>
})}
</ul>}
</li>
}

24
themes/fukasawa/components/MenuItemNormal.js Normal file
View File

@@ -0,0 +1,24 @@
import Link from 'next/link'
import { useRouter } from 'next/router'
export const MenuItemNormal = props => {
const { link } = props
const router = useRouter()
const selected = (router.pathname === link.to) || (router.asPath === link.to)
if (!link || !link.show) {
return null
}
return <Link
key={`${link.to}`}
title={link.to}
href={link.to}
className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'text-black' : ' ')}>
<div className='my-auto items-center justify-center flex '>
<div className={'hover:text-black'}>{link.name}</div>
</div>
{link.slot}
</Link>
}

38
themes/fukasawa/components/MenuList.js Normal file
View File

@@ -0,0 +1,38 @@
import { useGlobal } from '@/lib/global'
import CONFIG_FUKA from '../config_fuka'
import BLOG from '@/blog.config'
import { MenuItemDrop } from './MenuItemDrop'
import { MenuItemCollapse } from './MenuItemCollapse'
export const MenuList = (props) => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
{ name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_FUKA.MENU_CATEGORY },
{ name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_FUKA.MENU_TAG },
{ name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_FUKA.MENU_ARCHIVE },
{ name: locale.NAV.SEARCH, to: '/search', show: CONFIG_FUKA.MENU_SEARCH }
]
if (customNav) {
links = links.concat(customNav)
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
return (<>
<nav id='nav-pc' className='hidden md:block font-sans text-sm z-20'>
{links?.map(link => <MenuItemDrop key={link.id} link={link} />)}
</nav>
<nav id='nav-mobile' className='block md:hidden font-sans text-sm z-20 pb-1'>
{links?.map(link => <MenuItemCollapse key={link.id} link={link} onHeightChange={props.onHeightChange}/>)}
</nav>
</>
)
}

9
themes/fukasawa/components/TopNav.js
View File

@@ -1,6 +1,6 @@
import { useState } from 'react'
import { useState, useRef } from 'react'
import Collapse from '@/components/Collapse'
import GroupMenu from './GroupMenu'
import { MenuList } from './MenuList'
import Logo from './Logo'
import SearchInput from './SearchInput'
@@ -11,6 +11,7 @@ import SearchInput from './SearchInput'
*/
const TopNav = props => {
const [isOpen, changeShow] = useState(false)
const collapseRef = useRef(null)
const toggleMenuOpen = () => {
changeShow(!isOpen)
@@ -20,9 +21,9 @@ const TopNav = props => {
{/* 导航栏 */}
<div id='sticky-nav' className={'relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'}>
<Collapse type='vertical' isOpen={isOpen}>
<Collapse type='vertical' isOpen={isOpen} collapseRef={collapseRef}>
<div className='py-1 px-5'>
<GroupMenu {...props} />
<MenuList {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
<SearchInput {...props} />
</div>
</Collapse>

2
themes/medium/components/MenuItemDrop.js
View File

@@ -34,7 +34,7 @@ export const MenuItemDrop = ({ link }) => {
}
{/* 子菜单 */}
{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 className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-0 '} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 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'>
<Link href={sLink.to}>

4
themes/medium/components/TopNavBar.js
View File

@@ -1,5 +1,5 @@
import LogoBar from './LogoBar'
import React, { useRef } from 'react'
import { useRef, useState } from 'react'
import Collapse from '@/components/Collapse'
import { MenuBarMobile } from './MenuBarMobile'
import { useGlobal } from '@/lib/global'
@@ -14,7 +14,7 @@ import { MenuItemDrop } from './MenuItemDrop'
*/
export default function TopNavBar(props) {
const { className, customNav, customMenu } = props
const [isOpen, changeShow] = React.useState(false)
const [isOpen, changeShow] = useState(false)
const collapseRef = useRef(null)
const { locale } = useGlobal()

4
themes/next/components/DropMenu.js → themes/next/components/MenuItemDrop.js
View File

@@ -1,7 +1,7 @@
import Link from 'next/link'
import { useState } from 'react'
export const DropMenu = ({ link }) => {
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
@@ -22,7 +22,7 @@ export const DropMenu = ({ link }) => {
</div>}
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} left-56 absolute right-0 top-0 w-full border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-56' : 'invisible opacity-0 left-40'} absolute right-0 top-0 w-full border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className='my-auto h-9 px-2 items-center justify-start flex not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
<i className={`${sLink.icon} w-4 text-center`} />

8
themes/next/components/MenuButtonGroup.js → themes/next/components/MenuList.js
View File

@@ -2,10 +2,10 @@ import React from 'react'
import { useGlobal } from '@/lib/global'
import CONFIG_NEXT from '../config_next'
import BLOG from '@/blog.config'
import { DropMenu } from './DropMenu'
import { MenuItemDrop } from './MenuItemDrop'
import { CollapseMenu } from './CollapseMenu'
const MenuButtonGroup = (props) => {
export 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>
@@ -16,6 +16,7 @@ const MenuButtonGroup = (props) => {
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_NEXT.MENU_TAG },
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_NEXT.MENU_ARCHIVE }
]
let links = [].concat(defaultLinks)
if (customNav) {
links = defaultLinks.concat(customNav)
@@ -30,7 +31,7 @@ const MenuButtonGroup = (props) => {
<>
{/* 大屏模式菜单 */}
<nav id='nav' className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
{links.map(link => link && link.show && <DropMenu key={link.id} link={link} />)}
{links.map(link => link && link.show && <MenuItemDrop key={link.id} link={link} />)}
</nav>
{/* 移动端菜单 */}
@@ -40,4 +41,3 @@ const MenuButtonGroup = (props) => {
</>
)
}
export default MenuButtonGroup

4
themes/next/components/SideAreaLeft.js
View File

@@ -1,5 +1,5 @@
import InfoCard from './InfoCard'
import MenuButtonGroup from './MenuButtonGroup'
import { MenuList } from './MenuList'
import SearchInput from './SearchInput'
import Toc from './Toc'
import { useGlobal } from '@/lib/global'
@@ -35,7 +35,7 @@ const SideAreaLeft = props => {
<section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
<Logo {...props} className='h-32' />
<div className='pt-2 px-2 font-sans'>
<MenuButtonGroup allowCollapse={true} {...props} />
<MenuList allowCollapse={true} {...props} />
</div>
{CONFIG_NEXT.MENU_SEARCH && <div className='px-2 pt-2 font-sans'>
<SearchInput {...props} />

4
themes/next/components/TopNav.js
View File

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
import CategoryGroup from './CategoryGroup'
import Collapse from '@/components/Collapse'
import Logo from './Logo'
import MenuButtonGroup from './MenuButtonGroup'
import { MenuList } from './MenuList'
import SearchDrawer from './SearchDrawer'
import TagGroups from './TagGroups'
import CONFIG_NEXT from '../config_next'
@@ -117,7 +117,7 @@ const TopNav = (props) => {
</div>
<Collapse collapseRef={collapseRef} type='vertical' isOpen={isOpen}>
<MenuButtonGroup onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} {...props} from='top' />
<MenuList onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} {...props} from='top' />
</Collapse>
</div>

2
themes/nobelium/components/DropMenu.js
View File

@@ -24,7 +24,7 @@ export const DropMenu = ({ link }) => {
}
{/* 子菜单 */}
{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 className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-0 '} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 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'>
<Link href={sLink.to}>

2
themes/simple/components/DropMenu.js
View File

@@ -23,7 +23,7 @@ export const DropMenu = ({ link }) => {
</>}
{/* 子菜单 */}
{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 className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-0'} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
{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'>
<Link href={sLink.to}>