collapse menu

components/Collapse.js

@@ -8,6 +8,10 @@ import React from 'react'
 const Collapse = props => {
   const collapseRef = React.useRef(null)
   const type = props.type || 'vertical'
+  /**
+   * 折叠
+   * @param {*} element
+   */
   const collapseSection = element => {
     const sectionHeight = element.scrollHeight
     const sectionWidth = element.scrollWidth

themes/simple/components/CollapseMenu.js

@@ -0,0 +1,46 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const CollapseMenu = ({ 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)
+  }
+
+  return <>
+        <div className='w-full px-8 py-3 text-left border-b' onClick={toggleShow} >
+            <Link
+                href={link?.to}
+                onClick={hasSubMenu ? toggleOpenSubMenu : null}
+                className="font-sans 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>
+                {hasSubMenu && <i className='px-2 fa fa-plus text-gray-400'></i>}
+            </Link>
+        </div>
+
+        {/* 折叠子菜单 */}
+        {hasSubMenu && <Collapse isOpen={isOpen}>
+            {link.subMenus.map(sLink => {
+              return <div key={sLink.id} className='text-left px-10 justify-start text-blue-400 bg-gray-100 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>}
+    </>
+}

themes/simple/components/DropMenu.js

@@ -7,7 +7,6 @@ export const DropMenu = ({ link }) => {
 
   return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
 
-        {/* 大屏菜单 */}
             <Link
                 href={link?.to}
                 className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">

themes/simple/components/NavBar.js

@@ -56,7 +56,7 @@ export const NavBar = (props) => {
                     {!showSearchInput && (<NavBarMenu {...props}/>)}
                 </div>
 
-                <div className="absolute right-12 h-full text-center px-2 flex items-center">
+                <div className="absolute right-12 h-full text-center px-2 flex items-center text-blue-400">
                     {/* <!-- extra links --> */}
                     <i className={showSearchInput ? 'fa-regular fa-circle-xmark' : 'fa-solid fa-magnifying-glass' + ' align-middle cursor-pointer'} onClick={toggleShowSearchInput}></i>
                 </div>

themes/simple/components/NavBarMenu.js

@@ -1,6 +1,9 @@
 import BLOG from '@/blog.config'
+import Collapse from '@/components/Collapse'
 import { useGlobal } from '@/lib/global'
+import { useState } from 'react'
 import CONFIG_SIMPLE from '../config_simple'
+import { CollapseMenu } from './CollapseMenu'
 import { DropMenu } from './DropMenu'
 
 /**
@@ -10,6 +13,10 @@ import { DropMenu } from './DropMenu'
  */
 export const NavBarMenu = ({ customNav, customMenu }) => {
   const { locale } = useGlobal()
+  const [isOpen, changeIsOpen] = useState(true)
+  const toggleIsOpen = () => {
+    changeIsOpen(!isOpen)
+  }
 
   let links = [
     { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_SIMPLE.MENU_SEARCH },
@@ -40,12 +47,24 @@ export const NavBarMenu = ({ customNav, customMenu }) => {
             })}
         </div>
         <div id='nav-menu-mobile' className='flex md:hidden my-auto justify-start'>
-            <div className='cursor-pointer hover:text-red-400 transition-all duration-200'>
-                <i className='fa fa-bars mr-3'/>
-                <span>MENU</span>
+            <div onClick={toggleIsOpen} className='cursor-pointer hover:text-red-400 transition-all duration-200'>
+                <i className='fa fa-bars mr-3' />
+                <span>{isOpen ? 'CLOSE' : 'MENU'}</span>
             </div>
+
+            <Collapse className='absolute w-full top-12 left-0 border-b' isOpen={isOpen}>
+                <div id='menu-wrap' className='bg-white border'>
+                {links?.map(link => {
+                  if (link?.show) {
+                    return <CollapseMenu key={link.id} link={link} />
+                  } else {
+                    return null
+                  }
+                })}
+                </div>
+            </Collapse>
         </div>
-        </>
+    </>
 
   )
 }