diff --git a/components/SideBarDrawer.js b/components/SideBarDrawer.js
index 0949cda2..0db865cb 100644
--- a/components/SideBarDrawer.js
+++ b/components/SideBarDrawer.js
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import React from 'react'
+import { useEffect } from 'react'
 
 /**
  * 侧边栏抽屉面板，可以从侧面拉出
@@ -8,7 +8,7 @@ import React from 'react'
  */
 const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
   const router = useRouter()
-  React.useEffect(() => {
+  useEffect(() => {
     const sideBarDrawerRouteListener = () => {
       switchSideDrawerVisible(false)
     }
@@ -38,7 +38,7 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
   }
 
   return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
-    <div id="sidebar-drawer" className={`${isOpen ? 'ml-0 w-56 visible' : '-ml-60 max-w-side invisible'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
+    <div id="sidebar-drawer" className={`${isOpen ? 'ml-0 w-60 visible' : '-ml-60 max-w-side invisible'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
       {children}
     </div>
 
diff --git a/themes/fukasawa/components/Catalog.js b/themes/fukasawa/components/Catalog.js
index 4aed743c..ff5782be 100644
--- a/themes/fukasawa/components/Catalog.js
+++ b/themes/fukasawa/components/Catalog.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import { useGlobal } from '@/lib/global'
@@ -13,7 +13,7 @@ const Catalog = ({ toc }) => {
   const { locale } = useGlobal()
 
   // 监听滚动事件
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', actionSectionScrollSpy)
     actionSectionScrollSpy()
     return () => {
@@ -26,7 +26,7 @@ const Catalog = ({ toc }) => {
   const tocIds = []
 
   // 同步选中目录事件
-  const [activeSection, setActiveSection] = React.useState(null)
+  const [activeSection, setActiveSection] = useState(null)
   const throttleMs = 200
   const actionSectionScrollSpy = useCallback(throttle(() => {
     const sections = document.getElementsByClassName('notion-h')
diff --git a/themes/matery/components/MenuItemCollapse.js b/themes/matery/components/MenuItemCollapse.js
index fbbf85a1..9f1d8faa 100644
--- a/themes/matery/components/MenuItemCollapse.js
+++ b/themes/matery/components/MenuItemCollapse.js
@@ -35,14 +35,14 @@ export const MenuItemCollapse = ({ link }) => {
 
             {!hasSubMenu && <Link href={link?.to}>
                 <div className='my-auto items-center justify-between flex '>
-                    <i className={`${link.icon} w-4 mr-6 text-center`} />
+                    {link.icon && <i className={`${link.icon} w-4 mr-6 text-center`} />}
                     <div >{link.name}</div>
                 </div>
                 {link.slot}
             </Link>}
 
             {hasSubMenu && <div onClick={hasSubMenu ? toggleOpenSubMenu : null} className='my-auto items-center w-full justify-between flex '>
-                <div className=''>{link?.name}</div>
+                <div className=''><i className={`${link.icon} w-4 mr-6 text-center`} />{link?.name}</div>
                 <i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i>
             </div>}
         </div>
@@ -50,9 +50,9 @@ export const MenuItemCollapse = ({ link }) => {
         {/* 折叠子菜单 */}
         {hasSubMenu && <Collapse isOpen={isOpen}>
             {link.subMenus.map(sLink => {
-              return <div key={sLink.id} className='cursor-pointer  dark:text-gray-200  w-full font-extralight dark:bg-black text-left px-10 justify-start bg-gray-100  hover:bg-indigo-700 hover:text-white dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
+              return <div key={sLink.id} className='cursor-pointer whitespace-nowrap dark:text-gray-200  w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100  hover:bg-indigo-700 hover:text-white 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-sm'>{sLink.title}</span>
+                        <span className='text-sm'><i className={`${sLink.icon} w-4 mr-3 text-center`} />{sLink.title}</span>
                     </Link>
                 </div>
             })}
diff --git a/themes/medium/components/Catalog.js b/themes/medium/components/Catalog.js
index 7e394ec3..c9592dd2 100644
--- a/themes/medium/components/Catalog.js
+++ b/themes/medium/components/Catalog.js
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import Progress from './Progress'
@@ -15,10 +15,10 @@ const Catalog = ({ toc }) => {
   // 目录自动滚动
   const tRef = useRef(null)
   // 同步选中目录事件
-  const [activeSection, setActiveSection] = React.useState(null)
+  const [activeSection, setActiveSection] = useState(null)
 
   // 监听滚动事件
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', actionSectionScrollSpy)
     actionSectionScrollSpy()
     return () => {
@@ -27,7 +27,7 @@ const Catalog = ({ toc }) => {
   }, [])
 
   const throttleMs = 200
-  const actionSectionScrollSpy = React.useCallback(throttle(() => {
+  const actionSectionScrollSpy = useCallback(throttle(() => {
     const sections = document.getElementsByClassName('notion-h')
     let prevBBox = null
     let currentSectionId = activeSection
diff --git a/themes/simple/components/Catalog.js b/themes/simple/components/Catalog.js
index 1afa2f51..3eb746ef 100644
--- a/themes/simple/components/Catalog.js
+++ b/themes/simple/components/Catalog.js
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import { useGlobal } from '@/lib/global'
@@ -12,7 +12,7 @@ import { useGlobal } from '@/lib/global'
 const Catalog = ({ post }) => {
   const { locale } = useGlobal()
   // 监听滚动事件
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', actionSectionScrollSpy)
     actionSectionScrollSpy()
     return () => {
@@ -25,9 +25,9 @@ const Catalog = ({ post }) => {
   const tocIds = []
 
   // 同步选中目录事件
-  const [activeSection, setActiveSection] = React.useState(null)
+  const [activeSection, setActiveSection] = useState(null)
   const throttleMs = 200
-  const actionSectionScrollSpy = React.useCallback(throttle(() => {
+  const actionSectionScrollSpy = useCallback(throttle(() => {
     const sections = document.getElementsByClassName('notion-h')
     let prevBBox = null
     let currentSectionId = activeSection