menu-animation

themes/example/components/DropMenu.js

@@ -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}>

themes/fukasawa/LayoutBase.js

@@ -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>)

themes/fukasawa/components/AsideLeft.js

@@ -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'>

themes/fukasawa/components/GroupMenu.js

@@ -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

themes/fukasawa/components/MenuItemCollapse.js

@@ -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>}
+    </>
+}

themes/fukasawa/components/MenuItemDrop.js

@@ -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>
+}

themes/fukasawa/components/MenuItemNormal.js

@@ -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>
+}

themes/fukasawa/components/MenuList.js

@@ -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>
+    </>
+
+  )
+}

themes/fukasawa/components/TopNav.js

@@ -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>

themes/medium/components/MenuItemDrop.js

@@ -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}>

themes/medium/components/TopNavBar.js

@@ -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()

themes/next/components/MenuItemDrop.js

@@ -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`} />

themes/next/components/MenuList.js

@@ -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

themes/next/components/SideAreaLeft.js

@@ -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} />

themes/next/components/TopNav.js

@@ -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>
 

themes/nobelium/components/DropMenu.js

@@ -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}>

themes/simple/components/DropMenu.js

@@ -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}>