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
2023-03-24 22:34:36 +08:00
parent ae886fac0c
commit 83584ad06a
10 changed files with 130 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/fukasawa/components/MenuItemCollapse.js
View File

@@ -42,7 +42,7 @@ export const MenuItemCollapse = (props) => {
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 className='inline-flex items-center '><i className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i></div>
</div>}
</div>

4
themes/hexo/components/MenuItemCollapse.js
View File

@@ -36,7 +36,7 @@ export const MenuItemCollapse = ({ link }) => {
onClick={hasSubMenu ? toggleOpenSubMenu : null}
className="font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer dark:text-gray-200 no-underline tracking-widest pb-1">
<span className='transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
<i className={`px-2 fas ${isOpen ? 'fa-chevron-down' : 'fa-chevron-left'} text-gray-400`}></i>
<i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
</div>}
</div>
@@ -45,7 +45,7 @@ export const MenuItemCollapse = ({ link }) => {
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='dark:bg-black text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 py-3 pr-6'>
<Link href={sLink.to}>
<span className='text-sm ml-4'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
<span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
</Link>
</div>
})}

4
themes/matery/components/MenuItemCollapse.js
View File

@@ -35,7 +35,7 @@ export const MenuItemCollapse = ({ link }) => {
{!hasSubMenu && <Link href={link?.to}>
<div className='my-auto items-center justify-between flex '>
<i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />
<i className={`${link.icon} w-4 mr-6 text-center`} />
<div >{link.name}</div>
</div>
{link.slot}
@@ -43,7 +43,7 @@ export const MenuItemCollapse = ({ link }) => {
{hasSubMenu && <div onClick={hasSubMenu ? toggleOpenSubMenu : null} className='my-auto items-center w-full justify-between flex '>
<div className=''>{link?.name}</div>
<i className={`px-2 fas ${isOpen ? 'fa-chevron-down' : 'fa-chevron-left'}`}></i>
<i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i>
</div>}
</div>

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

@@ -42,7 +42,7 @@ export const MenuItemCollapse = (props) => {
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 className='inline-flex items-center '><i className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i></div>
</div>}
</div>

4
themes/next/components/CollapseMenu.js → themes/next/components/MenuItemCollapse.js
View File

@@ -7,7 +7,7 @@ import { useState } from 'react'
* @param {*} param0
* @returns
*/
export const CollapseMenu = (props) => {
export const MenuItemCollapse = (props) => {
const { link } = props
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
@@ -34,7 +34,7 @@ export const CollapseMenu = (props) => {
onClick={hasSubMenu ? toggleOpenSubMenu : null}
className="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 className='inline-flex items-center '><i className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i></div>
</div>}
</div>

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

@@ -3,7 +3,7 @@ import { useGlobal } from '@/lib/global'
import CONFIG_NEXT from '../config_next'
import BLOG from '@/blog.config'
import { MenuItemDrop } from './MenuItemDrop'
import { CollapseMenu } from './CollapseMenu'
import { MenuItemCollapse } from './MenuItemCollapse'
export const MenuList = (props) => {
const { postCount, customNav, customMenu } = props
@@ -36,7 +36,7 @@ export const MenuList = (props) => {
{/* 移动端菜单 */}
<div id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
{links?.map(link => link && link.show && <CollapseMenu onHeightChange={props.onHeightChange} key={link.id} link={link} />)}
{links?.map(link => link && link.show && <MenuItemCollapse onHeightChange={props.onHeightChange} key={link.id} link={link} />)}
</div>
</>
)

55
themes/nobelium/components/MenuItemCollapse.js Normal file
View File

@@ -0,0 +1,55 @@
import Collapse from '@/components/Collapse'
import Link from 'next/link'
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 toggleShow = () => {
changeShow(!show)
}
const toggleOpenSubMenu = () => {
changeIsOpen(!isOpen)
}
if (!link || !link.show) {
return null
}
return <>
<div className='w-full px-4 py-2 text-left 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=' hover:text-red-400 transition-all items-center duration-200'>{link?.icon && <span className='mr-2'><i className={link.icon}/></span>}{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=' hover:text-red-400 transition-all items-center duration-200'>{link?.icon && <span className='mr-2'><i className={link.icon}/></span>}{link?.name}</span>
<i className='px-2 fa fa-plus text-gray-400'></i>
</div>}
</div>
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='font-extralight dark:bg-black text-left px-10 justify-start 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>}
</>
}

93
themes/nobelium/components/Nav.js
View File

@@ -1,10 +1,12 @@
import { useEffect, useRef } from 'react'
import { useEffect, useRef, useState } from 'react'
import Link from 'next/link'
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import CONFIG_NOBELIUM from '../config_nobelium'
import { SvgIcon } from './SvgIcon'
import { MenuItemDrop } from './MenuItemDrop'
import Collapse from '@/components/Collapse'
import { MenuItemCollapse } from './MenuItemCollapse'
const Nav = props => {
const { navBarTitle, fullWidth, siteInfo } = props
@@ -32,47 +34,51 @@ const Nav = props => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sentinalRef])
return <>
<div className="observer-element h-4 md:h-12" ref={sentinalRef}></div>
<div
className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8 bg-opacity-60 ${
!fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
}`}
id="sticky-nav"
ref={navRef}
>
<div className="flex items-center">
<Link href="/" aria-label={BLOG.title}>
<div className="observer-element h-4 md:h-12" ref={sentinalRef}></div>
<div
className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8 bg-opacity-60 ${!fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
}`}
id="sticky-nav"
ref={navRef}
>
<div className="flex items-center">
<Link href="/" aria-label={BLOG.title}>
<div className="h-6">
{/* <SvgIcon/> */}
{CONFIG_NOBELIUM.NAV_NOTION_ICON
/* eslint-disable-next-line @next/next/no-img-element */
? <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR}/>
: <SvgIcon/>}
<div className="h-6">
{/* <SvgIcon/> */}
{CONFIG_NOBELIUM.NAV_NOTION_ICON
/* eslint-disable-next-line @next/next/no-img-element */
? <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
: <SvgIcon />}
</div>
</div>
</Link>
{navBarTitle
? (
<p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
{navBarTitle}
</p>
)
: (
<p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
{siteInfo?.title}
{/* ,{' '}<span className="font-normal">{siteInfo?.description}</span> */}
</p>
)}
</div>
<NavBar {...props}/>
</div>
</>
</Link>
{navBarTitle
? (
<p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
{navBarTitle}
</p>
)
: (
<p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
{siteInfo?.title}
{/* ,{' '}<span className="font-normal">{siteInfo?.description}</span> */}
</p>
)}
</div>
<NavBar {...props} />
</div>
</>
}
const NavBar = props => {
const { customMenu, customNav } = props
const [isOpen, changeOpen] = useState(false)
const toggleOpen = () => {
changeOpen(!isOpen)
}
const collapseRef = useRef(null)
const { locale } = useGlobal()
let links = [
@@ -92,11 +98,18 @@ const NavBar = props => {
}
return (
<div className="flex-shrink-0">
<ul className="flex flex-row">
{links.map(link => <MenuItemDrop key={link.id} link={link}/>)}
</ul>
</div>
<div className="flex-shrink-0">
<ul className=" hidden md:flex flex-row">
{links.map(link => <MenuItemDrop key={link.id} link={link} />)}
</ul>
<div><i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5'></i>
<Collapse collapseRef={collapseRef} isOpen={isOpen} type='vertical' className='fixed top-16 right-6'>
<div className=' bg-white rounded border p-2 text-sm'>
{links.map(link => <MenuItemCollapse key={link.id} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
</div>
</Collapse>
</div>
</div>
)
}

11
themes/simple/components/MenuItemCollapse.js
View File

@@ -7,7 +7,8 @@ import { useState } from 'react'
* @param {*} param0
* @returns
*/
export const MenuItemCollapse = ({ link }) => {
export const MenuItemCollapse = (props) => {
const { link } = props
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
@@ -29,19 +30,19 @@ export const MenuItemCollapse = ({ link }) => {
<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">
className="font-extralight items-center 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">
className="font-extralight items-center 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>
<i className={`px-2 fa fa-plus transition-all duration-200 ${isOpen && 'rotate-45'} text-gray-400`}></i>
</div>}
</div>
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen}>
{hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{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}>

10
themes/simple/components/MenuList.js
View File

@@ -2,7 +2,7 @@ import BLOG from '@/blog.config'
import Collapse from '@/components/Collapse'
import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import CONFIG_SIMPLE from '../config_simple'
import { MenuItemCollapse } from './MenuItemCollapse'
import { MenuItemDrop } from './MenuItemDrop'
@@ -22,6 +22,8 @@ export const MenuList = ({ customNav, customMenu }) => {
changeIsOpen(false)
}
const router = useRouter()
const collapseRef = useRef(null)
useEffect(() => {
router.events.on('routeChangeStart', closeMenu)
})
@@ -54,13 +56,13 @@ export const MenuList = ({ customNav, customMenu }) => {
{/* 移动端小屏菜单 */}
<div id='nav-menu-mobile' className='flex md:hidden my-auto justify-start'>
<div onClick={toggleIsOpen} className='cursor-pointer hover:text-red-400 transition-all duration-200'>
<i className='fa fa-bars mr-3' />
<i className={`${isOpen && 'rotate-90'} transition-all duration-200 fa fa-bars mr-3`} />
<span>{!isOpen ? 'MENU' : 'CLOSE'}</span>
</div>
<Collapse className='absolute w-full top-12 left-0' isOpen={isOpen}>
<Collapse collapseRef={collapseRef} className='absolute w-full top-12 left-0' isOpen={isOpen}>
<div id='menu-wrap' className='bg-white dark:border-hexo-black-gray border'>
{links?.map(link => <MenuItemCollapse key={link.id} link={link} />)}
{links?.map(link => <MenuItemCollapse key={link.id} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
</div>
</Collapse>
</div>