menu - animation

themes/example/components/MenuItemDrop.js

@@ -1,7 +1,7 @@
 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
 
@@ -19,7 +19,7 @@ export const DropMenu = ({ link }) => {
         {hasSubMenu &&
             <div className='rounded px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light'>
                 {link?.name}
-                <i className='px-2 fa fa-angle-down'></i>
+                <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
             </div>
         }
 

themes/example/components/Nav.js

@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import CONFIG_EXAMPLE from '../config_example'
-import { DropMenu } from './DropMenu'
+import { MenuItemDrop } from './MenuItemDrop'
 
 /**
  * 菜单导航
@@ -37,7 +37,7 @@ export const Nav = (props) => {
             <div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
                 <ul className="w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
                     {/* {links.map(link => <NormalMenuItem key={link.id} link={link}/>)} */}
-                    {links.map(link => <DropMenu key={link.id} link={link} />)}
+                    {links.map(link => <MenuItemDrop key={link.id} link={link} />)}
                 </ul>
                 <div className="w-full md:w-1/3 text-center md:text-right">
                     {/* <!-- extra links --> */}