移动端菜单

components/Collapse.js

@@ -84,7 +84,7 @@ const Collapse = props => {
   }, [props.isOpen])
 
   return (
-        <div ref={ref} style={type === 'vertical' ? { height: '0px', willChange: 'height' } : { width: '0px', willChange: 'width' }} className={`${props.className} overflow-hidden duration-200 `}>
+        <div ref={ref} style={type === 'vertical' ? { height: '0px', willChange: 'height' } : { width: '0px', willChange: 'width' }} className={`${props.className || ''} overflow-hidden duration-200 `}>
             {props.children}
         </div>
   )

themes/heo/components/MenuItemCollapse.js

@@ -26,7 +26,7 @@ export const MenuItemCollapse = ({ link }) => {
   }
 
   return <>
-        <div className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
+        <div className='w-full px-2 py-3 border rounded-xl 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">
@@ -41,9 +41,9 @@ export const MenuItemCollapse = ({ link }) => {
         </div>
 
         {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen}>
+        {hasSubMenu && <Collapse isOpen={isOpen} className='rounded-xl'>
             {link.subMenus.map(sLink => {
-              return <div key={sLink.id} className='dark:bg-black dark:text-gray-200 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'>
+              return <div key={sLink.id} className='dark:bg-black dark:text-gray-200 text-left px-3 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 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
                     </Link>

themes/heo/components/MenuListSide.js

@@ -29,7 +29,7 @@ export const MenuListSide = (props) => {
   }
 
   return (
-        <nav>
+        <nav className='flex-col space-y-2'>
             {/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
             {links?.map(link => <MenuItemCollapse key={link?.id} link={link} />)}
         </nav>

themes/heo/components/MenuListTop.js

@@ -12,8 +12,6 @@ export const MenuListTop = (props) => {
     { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG.MENU_INDEX },
     { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
     { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
-    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
   ]
 
   if (customNav) {

themes/heo/components/SlideOver.js

@@ -4,9 +4,11 @@ import { Dialog, Transition } from '@headlessui/react'
 import DarkModeButton from '@/components/DarkModeButton'
 import Link from 'next/link'
 import TagGroups from './TagGroups'
+import { MenuListSide } from './MenuListSide'
 
 /**
  * 侧边抽屉
+ * 移动端的菜单在这里
  */
 export default function SlideOver(props) {
   const { cRef, tagOptions } = props
@@ -88,6 +90,8 @@ export default function SlideOver(props) {
                                                     <Button title={'主页'} url={'/'} />
                                                     <Button title={'关于'} url={'/about'} />
                                                 </div>
+                                                {/* 用户自定义菜单 */}
+                                                <MenuListSide {...props}/>
                                             </section>
 
                                             <section className='space-y-2 flex flex-col'>