d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-03 07:26:45 +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

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>