hexo-menu

themes/hexo/components/MenuItemCollapse.js

@@ -26,26 +26,26 @@ export const MenuItemCollapse = ({ link }) => {
   }
 
   return <>
-        <div className='w-full px-8 py-3 text-left border-b dark:bg-hexo-black-gray dark:border-black' onClick={toggleShow} >
+        <div className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray' 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>
+                <span className=' transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
             </Link>}
-             {hasSubMenu && <div
+            {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>
+                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>
             </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'>
+              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-xs'>{sLink.title}</span>
+                        <span className='text-sm ml-4'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
                     </Link>
                 </div>
             })}

themes/hexo/components/SideBar.js

@@ -1,4 +1,6 @@
 import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import MenuGroupCard from './MenuGroupCard'
 import { MenuListSide } from './MenuListSide'
 
 /**
@@ -10,19 +12,22 @@ import { MenuListSide } from './MenuListSide'
  */
 const SideBar = (props) => {
   const { siteInfo } = props
-
+  const router = useRouter()
   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>
+        <div id='side-bar'>
+            <div className="h-52 w-full flex justify-center">
+                <div>
+                    <div onClick={() => { router.push('/') }}
+                        className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100  transform duration-200 cursor-pointer'>
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
+                    </div>
+                    <MenuGroupCard {...props} />
+                </div>
+            </div>
+            <hr className=' border-dashed'/>
+            <MenuListSide {...props} />
+        </div>
   )
 }
 

themes/hexo/components/SideBarDrawer.js

@@ -0,0 +1,51 @@
+import { useRouter } from 'next/router'
+import React from 'react'
+
+/**
+ * 侧边栏抽屉面板，可以从侧面拉出
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
+  const router = useRouter()
+  React.useEffect(() => {
+    const sideBarDrawerRouteListener = () => {
+      switchSideDrawerVisible(false)
+    }
+    router.events.on('routeChangeComplete', sideBarDrawerRouteListener)
+    return () => {
+      router.events.off('routeChangeComplete', sideBarDrawerRouteListener)
+    }
+  }, [router.events])
+
+  // 点击按钮更改侧边抽屉状态
+  const switchSideDrawerVisible = (showStatus) => {
+    if (showStatus) {
+      onOpen && onOpen()
+    } else {
+      onClose && onClose()
+    }
+    const sideBarDrawer = window.document.getElementById('sidebar-drawer')
+    const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
+
+    if (showStatus) {
+      sideBarDrawer.classList.replace('-mr-72', 'mr-0')
+      sideBarDrawerBackground.classList.replace('hidden', 'block')
+    } else {
+      sideBarDrawer.classList.replace('mr-0', '-mr-72')
+      sideBarDrawerBackground.classList.replace('block', 'hidden')
+    }
+  }
+
+  return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
+
+    <div id="sidebar-drawer" className={`${isOpen ? 'mr-0 w-72 visible' : '-mr-72 max-w-side invisible'} bg-gray-50 right-0 top-0 dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full overflow-y-scroll scroll-hidden z-30`}>
+      {children}
+    </div>
+
+    {/* 背景蒙版 */}
+    <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
+      className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
+  </div>
+}
+export default SideBarDrawer

themes/hexo/components/TopNav.js

@@ -8,8 +8,8 @@ import TagGroups from './TagGroups'
 import { MenuListTop } from './MenuListTop'
 import { useRouter } from 'next/router'
 import throttle from 'lodash.throttle'
-import SideBarDrawer from '@/components/SideBarDrawer'
 import SideBar from './SideBar'
+import SideBarDrawer from './SideBarDrawer'
 
 let windowTop = 0
 
@@ -133,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-300 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} />
@@ -150,7 +150,7 @@ const TopNav = props => {
         </div>
 
         {/* 折叠侧边栏 */}
-        <SideBarDrawer className='h-screen' isOpen={isOpen} onClose={toggleSideBarClose}>
+        <SideBarDrawer isOpen={isOpen} onClose={toggleSideBarClose}>
             <SideBar {...props} />
         </SideBarDrawer>
     </div>)