From a3a06c867b9c03a69ee31c5fc034b358b6a78d29 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Thu, 23 Mar 2023 15:34:14 +0800
Subject: [PATCH] menu

---
 blog.config.js                                |  4 +-
 components/SideBarDrawer.js                   |  4 +-
 public/css/theme-hexo.css                     | 15 +++++
 public/css/theme-simple.css                   |  4 +-
 themes/hexo/LayoutBase.js                     |  4 ++
 .../components/MenuItemCollapse.js}           |  6 +-
 themes/hexo/components/MenuItemDrop.js        | 42 +++----------
 themes/hexo/components/MenuList.js            | 34 -----------
 themes/hexo/components/MenuListSide.js        | 32 ++++++++++
 themes/hexo/components/MenuListTop.js         | 10 +--
 themes/hexo/components/SideBar.js             | 29 +++++++++
 themes/hexo/components/TopNav.js              | 21 ++++---
 .../matery/components/MenuButtonGroupTop.js   | 47 --------------
 themes/matery/components/MenuItemCollapse.js  | 61 +++++++++++++++++++
 themes/matery/components/MenuItemDrop.js      | 41 +++++++++++++
 themes/matery/components/MenuItemNormal.js    | 24 ++++++++
 themes/matery/components/MenuListSide.js      | 32 ++++++++++
 themes/matery/components/MenuListTop.js       | 31 ++++++++++
 themes/matery/components/SideBar.js           | 51 ++--------------
 themes/matery/components/TopNav.js            |  4 +-
 themes/simple/components/MenuItemCollapse.js  | 54 ++++++++++++++++
 .../{DropMenu.js => MenuItemDrop.js}          |  6 +-
 .../components/{NavBarMenu.js => MenuList.js} | 22 ++-----
 themes/simple/components/NavBar.js            |  4 +-
 24 files changed, 378 insertions(+), 204 deletions(-)
 create mode 100644 public/css/theme-hexo.css
 rename themes/{simple/components/CollapseMenu.js => hexo/components/MenuItemCollapse.js} (95%)
 delete mode 100644 themes/hexo/components/MenuList.js
 create mode 100644 themes/hexo/components/MenuListSide.js
 create mode 100644 themes/hexo/components/SideBar.js
 delete mode 100644 themes/matery/components/MenuButtonGroupTop.js
 create mode 100644 themes/matery/components/MenuItemCollapse.js
 create mode 100644 themes/matery/components/MenuItemDrop.js
 create mode 100644 themes/matery/components/MenuItemNormal.js
 create mode 100644 themes/matery/components/MenuListSide.js
 create mode 100644 themes/matery/components/MenuListTop.js
 create mode 100644 themes/simple/components/MenuItemCollapse.js
 rename themes/simple/components/{DropMenu.js => MenuItemDrop.js} (94%)
 rename themes/simple/components/{NavBarMenu.js => MenuList.js} (77%)

diff --git a/blog.config.js b/blog.config.js
index f3ed4d7c..43231e3c 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -28,8 +28,8 @@ const BLOG = {
   FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-serif', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
   FONT_URL: [// 字体CSS 例如 https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css
     'https://fonts.googleapis.com/css?family=Bitter&display=swap',
-    'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500&display=swap',
-    'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500&display=swap'
+    'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap',
+    'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300&display=swap'
   ],
   FONT_SANS: [// 无衬线字体 例如'LXGW WenKai'
     'Bitter', '"PingFang SC"', '-apple-system', 'BlinkMacSystemFont', '"Hiragino Sans GB"',
diff --git a/components/SideBarDrawer.js b/components/SideBarDrawer.js
index 47052db9..0949cda2 100644
--- a/components/SideBarDrawer.js
+++ b/components/SideBarDrawer.js
@@ -37,8 +37,8 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
     }
   }
 
-  return <div id='sidebar-wrapper' className={' block md:hidden ' + className }>
-    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0 w-56' : '-ml-60 max-w-side'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
+  return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
+    <div id="sidebar-drawer" className={`${isOpen ? 'ml-0 w-56 visible' : '-ml-60 max-w-side invisible'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
       {children}
     </div>
 
diff --git a/public/css/theme-hexo.css b/public/css/theme-hexo.css
new file mode 100644
index 00000000..d279c691
--- /dev/null
+++ b/public/css/theme-hexo.css
@@ -0,0 +1,15 @@
+/*  菜单下划线动画 */
+#theme-hexo .menu-link {
+    text-decoration: none;
+    background-image: linear-gradient(#928CEE, #928CEE);
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    background-size: 0 2px;
+    transition: background-size 100ms ease-in-out;
+}
+ 
+#theme-hexo .menu-link:hover {
+    background-size: 100% 2px;
+    color: #928CEE;
+}
+
diff --git a/public/css/theme-simple.css b/public/css/theme-simple.css
index 43c514c1..0b2f13cd 100644
--- a/public/css/theme-simple.css
+++ b/public/css/theme-simple.css
@@ -17,7 +17,7 @@
 
 
 /*  菜单下划线动画 */
-.menu-link {
+#theme-simple .menu-link {
     text-decoration: none;
     background-image: linear-gradient(#dd3333, #dd3333);
     background-repeat: no-repeat;
@@ -26,7 +26,7 @@
     transition: background-size 100ms ease-in-out;
 }
  
-.menu-link:hover {
+#theme-simple .menu-link:hover {
     background-size: 100% 2px;
     color: #dd3333;
 }
diff --git a/themes/hexo/LayoutBase.js b/themes/hexo/LayoutBase.js
index 066c4404..414b5e0d 100644
--- a/themes/hexo/LayoutBase.js
+++ b/themes/hexo/LayoutBase.js
@@ -11,6 +11,7 @@ import LoadingCover from './components/LoadingCover'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
 
 const FacebookPage = dynamic(
   () => {
@@ -61,6 +62,9 @@ const LayoutBase = props => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [])
 
+  if (isBrowser()) {
+    loadExternalResource('/css/theme-hexo.css', 'css')
+  }
   return (
     <div id='theme-hexo'>
       <CommonHead meta={meta} siteInfo={siteInfo}/>
diff --git a/themes/simple/components/CollapseMenu.js b/themes/hexo/components/MenuItemCollapse.js
similarity index 95%
rename from themes/simple/components/CollapseMenu.js
rename to themes/hexo/components/MenuItemCollapse.js
index a59f6a0a..fe6fcdf6 100644
--- a/themes/simple/components/CollapseMenu.js
+++ b/themes/hexo/components/MenuItemCollapse.js
@@ -7,7 +7,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const CollapseMenu = ({ link }) => {
+export const MenuItemCollapse = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
@@ -21,6 +21,10 @@ export const CollapseMenu = ({ link }) => {
     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
diff --git a/themes/hexo/components/MenuItemDrop.js b/themes/hexo/components/MenuItemDrop.js
index bdd541e0..0111c073 100644
--- a/themes/hexo/components/MenuItemDrop.js
+++ b/themes/hexo/components/MenuItemDrop.js
@@ -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>
-//   )
diff --git a/themes/hexo/components/MenuList.js b/themes/hexo/components/MenuList.js
deleted file mode 100644
index b1ab09eb..00000000
--- a/themes/hexo/components/MenuList.js
+++ /dev/null
@@ -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
diff --git a/themes/hexo/components/MenuListSide.js b/themes/hexo/components/MenuListSide.js
new file mode 100644
index 00000000..602e6c6d
--- /dev/null
+++ b/themes/hexo/components/MenuListSide.js
@@ -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>
+  )
+}
diff --git a/themes/hexo/components/MenuListTop.js b/themes/hexo/components/MenuListTop.js
index cc7fe0f9..c8afee2a 100644
--- a/themes/hexo/components/MenuListTop.js
+++ b/themes/hexo/components/MenuListTop.js
@@ -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>
-  )
+    </>)
 }
diff --git a/themes/hexo/components/SideBar.js b/themes/hexo/components/SideBar.js
new file mode 100644
index 00000000..3f259de5
--- /dev/null
+++ b/themes/hexo/components/SideBar.js
@@ -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
diff --git a/themes/hexo/components/TopNav.js b/themes/hexo/components/TopNav.js
index d00354d5..a38480ee 100644
--- a/themes/hexo/components/TopNav.js
+++ b/themes/hexo/components/TopNav.js
@@ -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>)
 }
 
diff --git a/themes/matery/components/MenuButtonGroupTop.js b/themes/matery/components/MenuButtonGroupTop.js
deleted file mode 100644
index 4f764ded..00000000
--- a/themes/matery/components/MenuButtonGroupTop.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { useGlobal } from '@/lib/global'
-import CONFIG_MATERY from '../config_matery'
-
-const MenuButtonGroupTop = (props) => {
-  const { customNav } = props
-  const { locale } = useGlobal()
-
-  let links = [
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MATERY.MENU_SEARCH },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
-  ]
-
-  if (customNav) {
-    links = customNav.concat(links)
-  }
-
-  return (
-    <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
-      {links.map(link => {
-        if (link.show) {
-          return (
-            <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>
-          )
-        } else {
-          return null
-        }
-      })}
-    </nav>
-  )
-}
-export default MenuButtonGroupTop
diff --git a/themes/matery/components/MenuItemCollapse.js b/themes/matery/components/MenuItemCollapse.js
new file mode 100644
index 00000000..7f878462
--- /dev/null
+++ b/themes/matery/components/MenuItemCollapse.js
@@ -0,0 +1,61 @@
+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 = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+  const router = useRouter()
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+
+  return <>
+        <div onClick={toggleShow} className={'py-2 px-5 duration-300 text-base justify-between hover:bg-indigo-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+            (selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')}>
+
+            {!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`} />
+                    <div >{link.name}</div>
+                </div>
+                {link.slot}
+            </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 fa fa-plus text-gray-400'></i>
+            </div>}
+        </div>
+
+        {/* 折叠子菜单 */}
+        {hasSubMenu && <Collapse isOpen={isOpen}>
+            {link.subMenus.map(sLink => {
+              return <div key={sLink.id} className='cursor-pointer w-full font-extralight dark:bg-black text-left px-10 justify-start bg-gray-100  hover:bg-indigo-700 hover:text-white 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-sm'>{sLink.title}</span>
+                    </Link>
+                </div>
+            })}
+        </Collapse>}
+    </>
+}
diff --git a/themes/matery/components/MenuItemDrop.js b/themes/matery/components/MenuItemDrop.js
new file mode 100644
index 00000000..9eb14386
--- /dev/null
+++ b/themes/matery/components/MenuItemDrop.js
@@ -0,0 +1,41 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+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 &&
+            <Link
+                href={link?.to}
+                className="font-sans menu-link pl-2 pr-4  no-underline tracking-widest pb-1">
+                {link?.name}
+                {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+            </Link>}
+
+        {hasSubMenu && <>
+            <div className='cursor-pointer font-sans menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
+                {link?.name}
+                <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
+            </div>
+        </>}
+
+        {/* 子菜单 */}
+        {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='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-sm text-nowrap'>{sLink.title}</span>
+                    </Link>
+                </li>
+            })}
+        </ul>}
+
+    </div>
+}
diff --git a/themes/matery/components/MenuItemNormal.js b/themes/matery/components/MenuItemNormal.js
new file mode 100644
index 00000000..b54324ac
--- /dev/null
+++ b/themes/matery/components/MenuItemNormal.js
@@ -0,0 +1,24 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export const MenuItemNormal = props => {
+  const router = useRouter()
+
+  const { link } = props
+  const selected = (router.pathname === link.to) || (router.asPath === link.to)
+
+  return <Link
+    key={link.to}
+    title={link.to}
+    href={link.to}
+    className={'py-2 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+     (selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')}>
+
+    <div className='my-auto items-center justify-between flex '>
+        <i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />
+        <div >{link.name}</div>
+    </div>
+    {link.slot}
+
+</Link>
+}
diff --git a/themes/matery/components/MenuListSide.js b/themes/matery/components/MenuListSide.js
new file mode 100644
index 00000000..a450cc5d
--- /dev/null
+++ b/themes/matery/components/MenuListSide.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG_MATERY from '../config_matery'
+import BLOG from '@/blog.config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+
+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_MATERY.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MATERY.MENU_SEARCH },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.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>
+  )
+}
diff --git a/themes/matery/components/MenuListTop.js b/themes/matery/components/MenuListTop.js
new file mode 100644
index 00000000..f292a6fa
--- /dev/null
+++ b/themes/matery/components/MenuListTop.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG_MATERY from '../config_matery'
+import { MenuItemDrop } from './MenuItemDrop'
+import BLOG from '@/blog.config'
+
+export const MenuListTop = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MATERY.MENU_SEARCH },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = customNav.concat(links)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+  return (
+    <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
+      {links.map(link => <MenuItemDrop key={link.id} link={link}/>)}
+    </nav>
+  )
+}
diff --git a/themes/matery/components/SideBar.js b/themes/matery/components/SideBar.js
index e1a02aac..4e4d341b 100644
--- a/themes/matery/components/SideBar.js
+++ b/themes/matery/components/SideBar.js
@@ -1,34 +1,18 @@
 import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import CONFIG_MATERY from '../config_matery'
+import { MenuListSide } from './MenuListSide'
 
 /**
- * 标签组
+ * 侧边抽屉
  * @param tags
  * @param currentTag
  * @returns {JSX.Element}
  * @constructor
  */
 const SideBar = (props) => {
-  const { siteInfo, customNav } = props
-  const { locale } = useGlobal()
-  const router = useRouter()
-
-  const defaultLinks = [
-    { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
-  ]
-  let links = [].concat(defaultLinks)
-  if (customNav) {
-    links = defaultLinks.concat(customNav)
-  }
+  const { siteInfo } = props
 
   return (
-      <div id='side-bar' className=''>
+      <div id='side-bar'>
           <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 */}
@@ -37,32 +21,7 @@ const SideBar = (props) => {
                   <div className='text-xs my-1 text-gray-300'>{siteInfo?.description}</div>
               </div>
           </div>
-          <nav>
-              {links.map(link => {
-                if (link && link.show) {
-                  const selected = (router.pathname === link.to) || (router.asPath === link.to)
-                  return (
-                      <Link
-                          key={link.to}
-                          title={link.to}
-                          href={link.to}
-                          target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
-                          className={'py-2 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
-                           (selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')}>
-
-                          <div className='my-auto items-center justify-between flex '>
-                              <i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />
-                              <div >{link.name}</div>
-                          </div>
-                          {link.slot}
-
-                      </Link>
-                  )
-                } else {
-                  return <></>
-                }
-              })}
-          </nav>
+          <MenuListSide {...props} />
       </div>
   )
 }
diff --git a/themes/matery/components/TopNav.js b/themes/matery/components/TopNav.js
index 1aa58db6..881e788d 100644
--- a/themes/matery/components/TopNav.js
+++ b/themes/matery/components/TopNav.js
@@ -5,7 +5,7 @@ import CategoryGroup from './CategoryGroup'
 import Logo from './Logo'
 import SearchDrawer from './SearchDrawer'
 import TagGroups from './TagGroups'
-import MenuButtonGroupTop from './MenuButtonGroupTop'
+import { MenuListTop } from './MenuListTop'
 import SideBarDrawer from '@/components/SideBarDrawer'
 import SideBar from './SideBar'
 import throttle from 'lodash.throttle'
@@ -144,7 +144,7 @@ const TopNav = props => {
 
                     {/* 右侧功能 */}
                     <div className='mr-1 justify-end items-center '>
-                        <div className='hidden lg:flex'> <MenuButtonGroupTop {...props} /></div>
+                        <div className='hidden lg:flex'> <MenuListTop {...props} /></div>
                         <div className='block lg:hidden'><Link href={'/search'} passHref>
                             <i className='fas fa-search' />
                         </Link></div>
diff --git a/themes/simple/components/MenuItemCollapse.js b/themes/simple/components/MenuItemCollapse.js
new file mode 100644
index 00000000..fe6fcdf6
--- /dev/null
+++ b/themes/simple/components/MenuItemCollapse.js
@@ -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>}
+    </>
+}
diff --git a/themes/simple/components/DropMenu.js b/themes/simple/components/MenuItemDrop.js
similarity index 94%
rename from themes/simple/components/DropMenu.js
rename to themes/simple/components/MenuItemDrop.js
index b5bb1e0a..d2eb60aa 100644
--- a/themes/simple/components/DropMenu.js
+++ b/themes/simple/components/MenuItemDrop.js
@@ -1,10 +1,14 @@
 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
 
+  if (!link || !link.show) {
+    return null
+  }
+
   return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
 
         {!hasSubMenu &&
diff --git a/themes/simple/components/NavBarMenu.js b/themes/simple/components/MenuList.js
similarity index 77%
rename from themes/simple/components/NavBarMenu.js
rename to themes/simple/components/MenuList.js
index f48b980c..ca1b1de1 100644
--- a/themes/simple/components/NavBarMenu.js
+++ b/themes/simple/components/MenuList.js
@@ -4,15 +4,15 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import CONFIG_SIMPLE from '../config_simple'
-import { CollapseMenu } from './CollapseMenu'
-import { DropMenu } from './DropMenu'
+import { MenuItemCollapse } from './MenuItemCollapse'
+import { MenuItemDrop } from './MenuItemDrop'
 
 /**
  * 菜单导航
  * @param {*} props
  * @returns
  */
-export const NavBarMenu = ({ customNav, customMenu }) => {
+export const MenuList = ({ customNav, customMenu }) => {
   const { locale } = useGlobal()
   const [isOpen, changeIsOpen] = useState(false)
   const toggleIsOpen = () => {
@@ -49,13 +49,7 @@ export const NavBarMenu = ({ customNav, customMenu }) => {
   return (<>
         {/* 大屏模式菜单 */}
         <div id='nav-menu-pc' className='hidden md:flex my-auto'>
-            {links?.map(link => {
-              if (link?.show) {
-                return <DropMenu key={link.id} link={link} />
-              } else {
-                return null
-              }
-            })}
+            {links?.map(link => <MenuItemDrop key={link.id} link={link} />)}
         </div>
         {/* 移动端小屏菜单 */}
         <div id='nav-menu-mobile' className='flex md:hidden my-auto justify-start'>
@@ -66,13 +60,7 @@ export const NavBarMenu = ({ customNav, customMenu }) => {
 
             <Collapse 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 => {
-                  if (link?.show) {
-                    return <CollapseMenu key={link.id} link={link} />
-                  } else {
-                    return null
-                  }
-                })}
+                {links?.map(link => <MenuItemCollapse key={link.id} link={link} />)}
                 </div>
             </Collapse>
         </div>
diff --git a/themes/simple/components/NavBar.js b/themes/simple/components/NavBar.js
index 46aeb7af..72d8c8d4 100644
--- a/themes/simple/components/NavBar.js
+++ b/themes/simple/components/NavBar.js
@@ -3,7 +3,7 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import CONFIG_SIMPLE from '../config_simple'
-import { NavBarMenu } from './NavBarMenu'
+import { MenuList } from './MenuList'
 
 /**
  * 菜单导航
@@ -53,7 +53,7 @@ export const NavBar = (props) => {
                 {/* 左侧菜单 */}
                 <div className="h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4">
                     {showSearchInput && <input id="theme-simple-search" onKeyUp={onKeyUp} className='float-left w-full outline-none h-full px-4' aria-label="Submit search" type="search" name="s" autoComplete="off" placeholder="Type then hit enter to search..." />}
-                    {!showSearchInput && (<NavBarMenu {...props}/>)}
+                    {!showSearchInput && (<MenuList {...props}/>)}
                 </div>
 
                 <div className="absolute right-12 h-full text-center px-2 flex items-center text-blue-400">