diff --git a/themes/fukasawa/components/MenuItemCollapse.js b/themes/fukasawa/components/MenuItemCollapse.js
index a8514875..7cb3061c 100644
--- a/themes/fukasawa/components/MenuItemCollapse.js
+++ b/themes/fukasawa/components/MenuItemCollapse.js
@@ -42,7 +42,7 @@ export const MenuItemCollapse = (props) => {
                 onClick={hasSubMenu ? toggleOpenSubMenu : null}
                 className="py-2 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>
 
diff --git a/themes/hexo/components/MenuItemCollapse.js b/themes/hexo/components/MenuItemCollapse.js
index 032fa3a5..f4196f29 100644
--- a/themes/hexo/components/MenuItemCollapse.js
+++ b/themes/hexo/components/MenuItemCollapse.js
@@ -36,7 +36,7 @@ export const MenuItemCollapse = ({ link }) => {
                 onClick={hasSubMenu ? toggleOpenSubMenu : null}
                 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>
+                <i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
             </div>}
         </div>
 
@@ -45,7 +45,7 @@ export const MenuItemCollapse = ({ link }) => {
             {link.subMenus.map(sLink => {
               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-sm ml-4'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
+                        <span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
                     </Link>
                 </div>
             })}
diff --git a/themes/matery/components/MenuItemCollapse.js b/themes/matery/components/MenuItemCollapse.js
index 3df75d6e..15cc3d99 100644
--- a/themes/matery/components/MenuItemCollapse.js
+++ b/themes/matery/components/MenuItemCollapse.js
@@ -35,7 +35,7 @@ export const MenuItemCollapse = ({ link }) => {
 
             {!hasSubMenu && <Link href={link?.to}>
                 <div className='my-auto items-center justify-between flex '>
-                    <i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />
+                    <i className={`${link.icon} w-4 mr-6 text-center`} />
                     <div >{link.name}</div>
                 </div>
                 {link.slot}
@@ -43,7 +43,7 @@ export const MenuItemCollapse = ({ link }) => {
 
             {hasSubMenu && <div onClick={hasSubMenu ? toggleOpenSubMenu : null} className='my-auto items-center w-full justify-between flex '>
                 <div className=''>{link?.name}</div>
-                <i className={`px-2 fas ${isOpen ? 'fa-chevron-down' : 'fa-chevron-left'}`}></i>
+                <i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i>
             </div>}
         </div>
 
diff --git a/themes/medium/components/MenuItemCollapse.js b/themes/medium/components/MenuItemCollapse.js
index a0a88a66..f56bcb1c 100644
--- a/themes/medium/components/MenuItemCollapse.js
+++ b/themes/medium/components/MenuItemCollapse.js
@@ -42,7 +42,7 @@ export const MenuItemCollapse = (props) => {
                 onClick={hasSubMenu ? toggleOpenSubMenu : null}
                 className="py-2 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>
 
diff --git a/themes/next/components/CollapseMenu.js b/themes/next/components/MenuItemCollapse.js
similarity index 93%
rename from themes/next/components/CollapseMenu.js
rename to themes/next/components/MenuItemCollapse.js
index 6a39e153..879ff3ad 100644
--- a/themes/next/components/CollapseMenu.js
+++ b/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>
 
diff --git a/themes/next/components/MenuList.js b/themes/next/components/MenuList.js
index 4023fd4a..9d86c5b9 100644
--- a/themes/next/components/MenuList.js
+++ b/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>
         </>
   )
diff --git a/themes/nobelium/components/MenuItemCollapse.js b/themes/nobelium/components/MenuItemCollapse.js
new file mode 100644
index 00000000..323514a9
--- /dev/null
+++ b/themes/nobelium/components/MenuItemCollapse.js
@@ -0,0 +1,55 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = (props) => {
+  const { link } = props
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  return <>
+        <div className='w-full px-4 py-2 text-left dark:bg-hexo-black-gray dark:border-black' 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=' hover:text-red-400 transition-all items-center duration-200'>{link?.icon && <span className='mr-2'><i className={link.icon}/></span>}{link?.name}</span>
+            </Link>}
+             {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=' hover:text-red-400 transition-all items-center duration-200'>{link?.icon && <span className='mr-2'><i className={link.icon}/></span>}{link?.name}</span>
+               <i className='px-2 fa fa-plus text-gray-400'></i>
+            </div>}
+        </div>
+
+        {/* 折叠子菜单 */}
+        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+            {link.subMenus.map(sLink => {
+              return <div key={sLink.id} className='font-extralight 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 border-b dark:border-gray-800 py-3 pr-6'>
+                    <Link href={sLink.to}>
+                        <span className='text-xs'>{sLink.title}</span>
+                    </Link>
+                </div>
+            })}
+        </Collapse>}
+    </>
+}
diff --git a/themes/nobelium/components/Nav.js b/themes/nobelium/components/Nav.js
index 995b5ab8..ab7d7e4f 100644
--- a/themes/nobelium/components/Nav.js
+++ b/themes/nobelium/components/Nav.js
@@ -1,10 +1,12 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import CONFIG_NOBELIUM from '../config_nobelium'
 import { SvgIcon } from './SvgIcon'
 import { MenuItemDrop } from './MenuItemDrop'
+import Collapse from '@/components/Collapse'
+import { MenuItemCollapse } from './MenuItemCollapse'
 
 const Nav = props => {
   const { navBarTitle, fullWidth, siteInfo } = props
@@ -32,47 +34,51 @@ const Nav = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sentinalRef])
   return <>
-    <div className="observer-element h-4 md:h-12" ref={sentinalRef}></div>
-    <div
-      className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8 bg-opacity-60 ${
-        !fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
-      }`}
-      id="sticky-nav"
-      ref={navRef}
-    >
-      <div className="flex items-center">
-        <Link href="/" aria-label={BLOG.title}>
+        <div className="observer-element h-4 md:h-12" ref={sentinalRef}></div>
+        <div
+            className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8 bg-opacity-60 ${!fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
+                }`}
+            id="sticky-nav"
+            ref={navRef}
+        >
+            <div className="flex items-center">
+                <Link href="/" aria-label={BLOG.title}>
 
-          <div className="h-6">
-            {/* <SvgIcon/> */}
-            {CONFIG_NOBELIUM.NAV_NOTION_ICON
-            /* eslint-disable-next-line @next/next/no-img-element */
-              ? <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR}/>
-              : <SvgIcon/>}
+                    <div className="h-6">
+                        {/* <SvgIcon/> */}
+                        {CONFIG_NOBELIUM.NAV_NOTION_ICON
+                        /* eslint-disable-next-line @next/next/no-img-element */
+                          ? <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
+                          : <SvgIcon />}
 
-          </div>
+                    </div>
 
-        </Link>
-        {navBarTitle
-          ? (
-          <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
-            {navBarTitle}
-          </p>
-            )
-          : (
-          <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
-            {siteInfo?.title}
-            {/* ,{' '}<span className="font-normal">{siteInfo?.description}</span> */}
-          </p>
-            )}
-      </div>
-      <NavBar {...props}/>
-    </div>
-  </>
+                </Link>
+                {navBarTitle
+                  ? (
+                        <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
+                            {navBarTitle}
+                        </p>
+                    )
+                  : (
+                        <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
+                            {siteInfo?.title}
+                            {/* ,{' '}<span className="font-normal">{siteInfo?.description}</span> */}
+                        </p>
+                    )}
+            </div>
+            <NavBar {...props} />
+        </div>
+    </>
 }
 
 const NavBar = props => {
   const { customMenu, customNav } = props
+  const [isOpen, changeOpen] = useState(false)
+  const toggleOpen = () => {
+    changeOpen(!isOpen)
+  }
+  const collapseRef = useRef(null)
 
   const { locale } = useGlobal()
   let links = [
@@ -92,11 +98,18 @@ const NavBar = props => {
   }
 
   return (
-    <div className="flex-shrink-0">
-      <ul className="flex flex-row">
-        {links.map(link => <MenuItemDrop key={link.id} link={link}/>)}
-      </ul>
-    </div>
+        <div className="flex-shrink-0">
+            <ul className=" hidden md:flex flex-row">
+                {links.map(link => <MenuItemDrop key={link.id} link={link} />)}
+            </ul>
+            <div><i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5'></i>
+                <Collapse collapseRef={collapseRef} isOpen={isOpen} type='vertical' className='fixed top-16 right-6'>
+                    <div className=' bg-white rounded border p-2 text-sm'>
+                        {links.map(link => <MenuItemCollapse key={link.id} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
+                    </div>
+                </Collapse>
+            </div>
+        </div>
   )
 }
 
diff --git a/themes/simple/components/MenuItemCollapse.js b/themes/simple/components/MenuItemCollapse.js
index fe6fcdf6..6abe88d8 100644
--- a/themes/simple/components/MenuItemCollapse.js
+++ b/themes/simple/components/MenuItemCollapse.js
@@ -7,7 +7,8 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItemCollapse = ({ link }) => {
+export const MenuItemCollapse = (props) => {
+  const { link } = props
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
@@ -29,19 +30,19 @@ export const MenuItemCollapse = ({ link }) => {
         <div className='w-full px-8 py-3 text-left border-b dark:bg-hexo-black-gray dark:border-black' 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">
+                className="font-extralight items-center 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>
             </Link>}
              {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">
+                className="font-extralight items-center 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>
+               <i className={`px-2 fa fa-plus transition-all duration-200 ${isOpen && 'rotate-45'} text-gray-400`}></i>
             </div>}
         </div>
 
         {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen}>
+        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
             {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'>
                     <Link href={sLink.to}>
diff --git a/themes/simple/components/MenuList.js b/themes/simple/components/MenuList.js
index ca1b1de1..d98fc133 100644
--- a/themes/simple/components/MenuList.js
+++ b/themes/simple/components/MenuList.js
@@ -2,7 +2,7 @@ import BLOG from '@/blog.config'
 import Collapse from '@/components/Collapse'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import CONFIG_SIMPLE from '../config_simple'
 import { MenuItemCollapse } from './MenuItemCollapse'
 import { MenuItemDrop } from './MenuItemDrop'
@@ -22,6 +22,8 @@ export const MenuList = ({ customNav, customMenu }) => {
     changeIsOpen(false)
   }
   const router = useRouter()
+  const collapseRef = useRef(null)
+
   useEffect(() => {
     router.events.on('routeChangeStart', closeMenu)
   })
@@ -54,13 +56,13 @@ export const MenuList = ({ customNav, customMenu }) => {
         {/* 移动端小屏菜单 */}
         <div id='nav-menu-mobile' className='flex md:hidden my-auto justify-start'>
             <div onClick={toggleIsOpen} className='cursor-pointer hover:text-red-400 transition-all duration-200'>
-                <i className='fa fa-bars mr-3' />
+                <i className={`${isOpen && 'rotate-90'} transition-all duration-200 fa fa-bars mr-3`} />
                 <span>{!isOpen ? 'MENU' : 'CLOSE'}</span>
             </div>
 
-            <Collapse className='absolute w-full top-12 left-0' isOpen={isOpen}>
+            <Collapse collapseRef={collapseRef} className='absolute w-full top-12 left-0' isOpen={isOpen}>
                 <div id='menu-wrap' className='bg-white dark:border-hexo-black-gray border'>
-                {links?.map(link => <MenuItemCollapse key={link.id} link={link} />)}
+                {links?.map(link => <MenuItemCollapse key={link.id} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
                 </div>
             </Collapse>
         </div>