menu-animation

themes/next/components/MenuItemCollapse.js

@@ -7,7 +7,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const CollapseMenu = (props) => {
+export const MenuItemCollapse = (props) => {
   const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
@@ -34,7 +34,7 @@ export const CollapseMenu = (props) => {
                 onClick={hasSubMenu ? toggleOpenSubMenu : null}
                 className="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 className='inline-flex items-center '><i className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i></div>
             </div>}
         </div>
 

themes/next/components/MenuList.js

@@ -3,7 +3,7 @@ import { useGlobal } from '@/lib/global'
 import CONFIG_NEXT from '../config_next'
 import BLOG from '@/blog.config'
 import { MenuItemDrop } from './MenuItemDrop'
-import { CollapseMenu } from './CollapseMenu'
+import { MenuItemCollapse } from './MenuItemCollapse'
 
 export const MenuList = (props) => {
   const { postCount, customNav, customMenu } = props
@@ -36,7 +36,7 @@ export const MenuList = (props) => {
 
             {/* 移动端菜单 */}
             <div id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
-                {links?.map(link => link && link.show && <CollapseMenu onHeightChange={props.onHeightChange} key={link.id} link={link} />)}
+                {links?.map(link => link && link.show && <MenuItemCollapse onHeightChange={props.onHeightChange} key={link.id} link={link} />)}
             </div>
         </>
   )