diff --git a/themes/movie/components/BlogListPage.js b/themes/movie/components/BlogListPage.js
index 450f713b..925156bf 100644
--- a/themes/movie/components/BlogListPage.js
+++ b/themes/movie/components/BlogListPage.js
@@ -1,35 +1,17 @@
 import { siteConfig } from '@/lib/config'
-import { useGlobal } from '@/lib/global'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
 import CONFIG from '../config'
 import BlogPostCard from './BlogPostCard'
 import PaginationNumber from './PaginationNumber'
 
 export const BlogListPage = props => {
-  const { page = 1, posts, postCount } = props
-  const { locale } = useGlobal()
-  const router = useRouter()
-  const totalPage = Math.ceil(
-    postCount / parseInt(siteConfig('POSTS_PER_PAGE'))
-  )
-  const currentPage = +page
-
-  const showPrev = currentPage > 1
-  const showNext = page < totalPage
-  const pagePrefix = router.asPath
-    .split('?')[0]
-    .replace(/\/page\/[1-9]\d*/, '')
-    .replace(/\/$/, '')
-
-  const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG)
+  const { posts } = props
+  const showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG)
 
   return (
     <div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'} mb-12`}>
       <div
-        id="posts-wrapper"
-        className="grid md:grid-cols-2 md:gap-12 lg:grid-cols-3 lg:gap-20 xl:gap-24 2xl:grid-cols-4"
-      >
+        id='posts-wrapper'
+        className='grid md:grid-cols-2 md:gap-12 lg:grid-cols-3 lg:gap-20 xl:gap-24 2xl:grid-cols-4'>
         {posts?.map(post => (
           <BlogPostCard key={post.id} post={post} />
         ))}
diff --git a/themes/movie/components/BlogPostCard.js b/themes/movie/components/BlogPostCard.js
index 0fc149e1..6aa84072 100644
--- a/themes/movie/components/BlogPostCard.js
+++ b/themes/movie/components/BlogPostCard.js
@@ -1,42 +1,36 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
 import { siteConfig } from '@/lib/config'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
 import Link from 'next/link'
 import TagItemMini from './TagItemMini'
-import CONFIG from '../config'
-import TwikooCommentCount from '@/components/TwikooCommentCount'
-import LazyImage from '@/components/LazyImage'
-import { formatDateFmt } from '@/lib/utils/formatDate'
-import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
-import NotionIcon from '@/components/NotionIcon'
 
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   // 主题默认强制显示图片
   if (post && !post.pageCoverThumbnail) {
-    post.pageCoverThumbnail =
-      siteInfo?.pageCover || siteConfig('RANDOM_IMAGE_URL')
+    post.pageCoverThumbnail = siteInfo?.pageCover || siteConfig('RANDOM_IMAGE_URL')
   }
 
-  const url = checkContainHttp(post.slug)
-    ? sliceUrlFromHttp(post.slug)
-    : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+  const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
 
   return (
-    <article className="w-full mb-4 cursor-pointer overflow-hidden shadow-movie dark:bg-hexo-black-gray">
+    <article className='w-full mb-4 cursor-pointer overflow-hidden shadow-movie dark:bg-hexo-black-gray'>
       <Link href={url} passHref legacyBehavior>
         {/* 固定高度 ，空白用图片拉升填充 */}
-        <div className="group flex flex-col aspect-[2/3] justify-between relative">
+        <div className='group flex flex-col aspect-[2/3] justify-between relative'>
           {/* 图片 填充卡片 */}
-          <div className="flex flex-grow w-full h-full relative duration-200  cursor-pointer transform overflow-hidden">
+          <div className='flex flex-grow w-full h-full relative duration-200  cursor-pointer transform overflow-hidden'>
             <LazyImage
               src={post?.pageCoverThumbnail}
               alt={post.title}
-              className="h-full w-full group-hover:scale-105 transform object-cover duration-500"
+              className='h-full w-full group-hover:scale-105 transform object-cover duration-500'
             />
           </div>
 
-          <div className="absolute bottom-32 z-20">
+          <div className='absolute bottom-32 z-20'>
             {post?.tagItems && post?.tagItems.length > 0 && (
               <>
-                <div className="px-6 justify-between flex p-2">
+                <div className='px-6 justify-between flex p-2'>
                   {post.tagItems.map(tag => (
                     <TagItemMini key={tag.name} tag={tag} />
                   ))}
@@ -45,13 +39,13 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
             )}
           </div>
           {/* 阴影遮罩 */}
-          <h2 className="absolute bottom-10 px-6 transition-all duration-200 text-white text-2xl font-semibold break-words shadow-text z-20">
+          <h2 className='absolute bottom-10 px-6 transition-all duration-200 text-white text-2xl font-semibold break-words shadow-text z-20'>
             <NotionIcon icon={post.pageIcon} />
             {post.title}
           </h2>
 
-          <div className="h-3/4 w-full absolute left-0 bottom-0 z-10">
-            <div className="h-full w-full absolute opacity-80 group-hover:opacity-100 transition-all duration-1000 bg-gradient-to-b from-transparent to-black"></div>
+          <div className='h-3/4 w-full absolute left-0 bottom-0 z-10'>
+            <div className='h-full w-full absolute opacity-80 group-hover:opacity-100 transition-all duration-1000 bg-gradient-to-b from-transparent to-black'></div>
           </div>
         </div>
       </Link>
diff --git a/themes/movie/components/Header.js b/themes/movie/components/Header.js
index ae5e3a2a..223df3e5 100644
--- a/themes/movie/components/Header.js
+++ b/themes/movie/components/Header.js
@@ -1,26 +1,163 @@
 import Link from 'next/link'
 import { siteConfig } from '@/lib/config'
-import { MenuListTop } from './MenuListTop'
+import { useMovieGlobal } from '..'
+import Collapse from '@/components/Collapse'
+import { MenuItemCollapse } from './MenuItemCollapse'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+import { MenuItemDrop } from './MenuItemDrop'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
 
 /**
  * 网站顶部
  * @returns
  */
 export const Header = props => {
+  const { collapseRef, searchModal } = useMovieGlobal()
+  const router = useRouter()
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+  const [isOpen, setIsOpen] = useState(false)
+  const [showSearch, setShowSearch] = useState(false)
+  const toggleMenuOpen = () => {
+    setIsOpen(!isOpen)
+  }
+  let links = [
+    {
+      id: 1,
+      icon: 'fa-solid fa-house',
+      name: locale.NAV.INDEX,
+      to: '/',
+      show: siteConfig('MOVIE_MENU_INDEX', null, CONFIG)
+    },
+    {
+      id: 2,
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      to: '/search',
+      show: siteConfig('MOVIE_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      id: 3,
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      to: '/archive',
+      show: siteConfig('MOVIE_MENU_ARCHIVE', null, CONFIG)
+    }
+    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MENU_CATEGORY', null, CONFIG) },
+    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MENU_TAG', null, CONFIG) }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  for (let i = 0; i < links.length; i++) {
+    if (links[i].id !== i) {
+      links[i].id = i
+    }
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (siteConfig('CUSTOM_MENU')) {
+    links = customMenu
+  }
+
+  // 展示搜索框
+  const toggleShowSearchInput = () => {
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal.current.openSearch()
+    } else {
+      setShowSearch(!showSearch)
+    }
+  }
+
+  useEffect(() => {
+    if (showSearch) {
+      setTimeout(() => {
+        document.getElementById('search').focus()
+      }, 100);
+    }
+  }, [showSearch])
+
+  const onKeyUp = e => {
+    if (e.keyCode === 13) {
+      const search = document.getElementById('search').value
+      if (search) {
+        router.push({ pathname: '/search/' + search })
+      }
+    }
+  }
+
+  const handleSearch = () => {
+    const search = document.getElementById('search').value
+    if (search) {
+      router.push({ pathname: '/search/' + search })
+    }
+  }
+
   return (
-    <header className="w-full px-8 relative z-20">
-      <div className="mx-auto md:flex justify-between items-center">
+    <>
+      <header className='w-full px-8 relative z-20 flex lg:flex-row md:flex-col justify-between items-center'>
         <Link
-          href="/"
-          className="py-6 w-full text-3xl font-bold text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center"
-        >
+          href='/'
+          className='whitespace-nowrap py-6 text-2xl md:text-3xl font-bold text-gray-dark no-underline flex items-center'>
           {siteConfig('TITLE')}
         </Link>
-        <div className="w-full md:w-auto text-center md:text-right">
+
+        <div className='md:w-auto text-center flex'>
           {/* 右侧菜单 */}
-          <MenuListTop {...props} />
+          <>
+            <nav id='nav-mobile' className='leading-8 justify-center w-full hidden md:flex'>
+              {links?.map((link, index) => link && link.show && <MenuItemDrop key={index} link={link} />)}
+            </nav>
+
+            <div onClick={toggleShowSearchInput} className='flex items-center cursor-pointer'>
+              <i className='fas fa-search dark:text-white'></i>
+            </div>
+            <div className={`${showSearch ? 'top-16 visible opacity-100' : 'top-10 invisible opacity-0'} duration-200 transition-all max-w-md absolute  w-80 right-4 p-2 flex flex-col gap-2`}>
+              <input
+                autoFocus
+                id='search'
+                onClick={toggleShowSearchInput}
+                onKeyUp={onKeyUp}
+                className='float-left w-full outline-none h-full outline-blue-200 p-2 rounded text-black bg-gray-100'
+                aria-label='Submit search'
+                type='search'
+                name='s'
+                autoComplete='off'
+                placeholder='Type then hit enter to search...'
+              />
+              <button onClick={handleSearch} className='w-full bg-[#383838] rounded py-2'>{locale.COMMON.SEARCH} 搜索</button>
+            </div>
+
+            {/* 移动端按钮 */}
+            <div className='md:hidden'>
+              <div onClick={toggleMenuOpen} className='w-8 cursor-pointer'>
+                {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
+              </div>
+            </div>
+          </>
         </div>
-      </div>
-    </header>
+      </header>
+
+      <Collapse collapseRef={collapseRef} type='vertical' isOpen={isOpen}>
+        {/* 移动端菜单 */}
+        <menu id='nav-menu-mobile' className='block md:hidden my-auto justify-start'>
+          {links?.map(
+            (link, index) =>
+              link &&
+              link.show && (
+                <MenuItemCollapse
+                  onHeightChange={param => collapseRef.current?.updateCollapseHeight(param)}
+                  key={index}
+                  link={link}
+                />
+              )
+          )}
+        </menu>
+      </Collapse>
+    </>
   )
 }
diff --git a/themes/movie/components/MenuItemCollapse.js b/themes/movie/components/MenuItemCollapse.js
new file mode 100644
index 00000000..0f91f1d4
--- /dev/null
+++ b/themes/movie/components/MenuItemCollapse.js
@@ -0,0 +1,77 @@
+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='select-none w-full px-6 py-2  text-left ' onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
+            className='flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest'>
+            <span className=' transition-all items-center duration-200'>
+              {link?.icon && <i className={link.icon + ' mr-4'} />}
+              {link?.name}
+            </span>
+          </Link>
+        )}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest'>
+            <span className='transition-all items-center duration-200'>
+              {link?.icon && <i className={link.icon + ' mr-4'} />}
+              {link?.name}
+            </span>
+            <i
+              className={`select-none px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
+          </div>
+        )}
+      </div>
+
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange} className='rounded-xl'>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <div
+                key={index}
+                className='dark:text-gray-200 text-left px-3 justify-start  tracking-widest transition-all duration-200  py-3 pr-6'>
+                <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
+                  <span className='text-sm ml-4 whitespace-nowrap'>
+                    {link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}
+                  </span>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
+    </>
+  )
+}
diff --git a/themes/movie/components/MenuItemDrop.js b/themes/movie/components/MenuItemDrop.js
index 501140a4..5d2f8a8d 100644
--- a/themes/movie/components/MenuItemDrop.js
+++ b/themes/movie/components/MenuItemDrop.js
@@ -18,7 +18,7 @@ export const MenuItemDrop = ({ link }) => {
         <Link
           href={link?.to}
           target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-          className=" menu-link pl-2 pr-4 no-underline tracking-widest pb-1"
+          className="select-none menu-link pl-2 pr-4 no-underline tracking-widest pb-1"
         >
           {link?.icon && <i className={link?.icon} />} {link?.name}
           {hasSubMenu && <i className="px-2 fa fa-angle-down"></i>}
diff --git a/themes/movie/components/MenuListTop.js b/themes/movie/components/MenuListTop.js
deleted file mode 100644
index d79b2ab5..00000000
--- a/themes/movie/components/MenuListTop.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useGlobal } from '@/lib/global'
-import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
-import { MenuItemDrop } from './MenuItemDrop'
-
-export const MenuListTop = props => {
-  const { customNav, customMenu } = props
-  const { locale } = useGlobal()
-
-  let links = [
-    {
-      id: 1,
-      icon: 'fa-solid fa-house',
-      name: locale.NAV.INDEX,
-      to: '/',
-      show: siteConfig('HEXO_MENU_INDEX', null, CONFIG)
-    },
-    {
-      id: 2,
-      icon: 'fas fa-search',
-      name: locale.NAV.SEARCH,
-      to: '/search',
-      show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG)
-    },
-    {
-      id: 3,
-      icon: 'fas fa-archive',
-      name: locale.NAV.ARCHIVE,
-      to: '/archive',
-      show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG)
-    }
-    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MENU_CATEGORY', null, CONFIG) },
-    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MENU_TAG', null, CONFIG) }
-  ]
-
-  if (customNav) {
-    links = links.concat(customNav)
-  }
-
-  for (let i = 0; i < links.length; i++) {
-    if (links[i].id !== i) {
-      links[i].id = i
-    }
-  }
-
-  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (siteConfig('CUSTOM_MENU')) {
-    links = customMenu
-  }
-
-  if (!links || links.length === 0) {
-    return null
-  }
-
-  return (
-    <>
-      <nav id="nav-mobile" className="leading-8 justify-center w-full flex">
-        {links?.map(
-          (link, index) =>
-            link && link.show && <MenuItemDrop key={index} link={link} />
-        )}
-      </nav>
-    </>
-  )
-}
diff --git a/themes/movie/components/Nav.js b/themes/movie/components/Nav.js
deleted file mode 100644
index 08f5ca56..00000000
--- a/themes/movie/components/Nav.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { siteConfig } from '@/lib/config'
-import { useGlobal } from '@/lib/global'
-import CONFIG from '../config'
-import { MenuItemDrop } from './MenuItemDrop'
-
-/**
- * 菜单导航
- * @param {*} props
- * @returns
- */
-export const Nav = props => {
-  const { customNav, customMenu } = props
-  const { locale } = useGlobal()
-
-  let links = [
-    {
-      id: 1,
-      icon: 'fas fa-search',
-      name: locale.NAV.SEARCH,
-      to: '/search',
-      show: siteConfig('EXAMPLE_MENU_SEARCH', null, CONFIG)
-    },
-    {
-      id: 2,
-      icon: 'fas fa-archive',
-      name: locale.NAV.ARCHIVE,
-      to: '/archive',
-      show: siteConfig('EXAMPLE_MENU_ARCHIVE', null, CONFIG)
-    },
-    {
-      id: 3,
-      icon: 'fas fa-folder',
-      name: locale.COMMON.CATEGORY,
-      to: '/category',
-      show: siteConfig('EXAMPLE_MENU_CATEGORY', null, CONFIG)
-    },
-    {
-      id: 4,
-      icon: 'fas fa-tag',
-      name: locale.COMMON.TAGS,
-      to: '/tag',
-      show: siteConfig('EXAMPLE_MENU_TAG', null, CONFIG)
-    }
-  ]
-
-  if (customNav) {
-    links = links.concat(customNav)
-  }
-
-  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
-  if (siteConfig('CUSTOM_MENU')) {
-    links = customMenu
-  }
-
-  if (!links || links.length === 0) {
-    return null
-  }
-
-  return (
-    <nav className="w-full bg-white md:pt-0 px-6 relative z-30 border-t border-b border-gray-light dark:border-hexo-black-gray dark:bg-black">
-      <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, index) => (
-            <MenuItemDrop key={index} link={link} />
-          ))}
-        </ul>
-        {/* <div className="w-full md:w-1/3 text-center md:text-right"> */}
-        {/* <!-- extra links --> */}
-        {/* </div> */}
-      </div>
-    </nav>
-  )
-}
diff --git a/themes/movie/config.js b/themes/movie/config.js
index 181d3a93..48403075 100644
--- a/themes/movie/config.js
+++ b/themes/movie/config.js
@@ -3,12 +3,12 @@
  */
 const CONFIG = {
   // 菜单配置
-  EXAMPLE_MENU_CATEGORY: true, // 显示分类
-  EXAMPLE_MENU_TAG: true, // 显示标签
-  EXAMPLE_MENU_ARCHIVE: true, // 显示归档
-  EXAMPLE_MENU_SEARCH: true, // 显示搜索
+  MOVIE_MENU_CATEGORY: true, // 显示分类
+  MOVIE_MENU_TAG: true, // 显示标签
+  MOVIE_MENU_ARCHIVE: true, // 显示归档
+  MOVIE_MENU_SEARCH: true, // 显示搜索
 
-  EXAMPLE_POST_LIST_COVER: true // 列表显示文章封面
+  MOVIE_POST_LIST_COVER: true // 列表显示文章封面
 
 }
 export default CONFIG
diff --git a/themes/movie/index.js b/themes/movie/index.js
index 2aaa95da..e34f0e83 100644
--- a/themes/movie/index.js
+++ b/themes/movie/index.js
@@ -1,37 +1,32 @@
 'use client'
 
-import CONFIG from './config'
-import { createContext, useContext, useEffect, useRef } from 'react'
-import { Header } from './components/Header'
-import { Nav } from './components/Nav'
-import { Footer } from './components/Footer'
-import { Title } from './components/Title'
-import { SideBar } from './components/SideBar'
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+import Comment from '@/components/Comment'
+import replaceSearchResult from '@/components/Mark'
+import NotionPage from '@/components/NotionPage'
+import ShareBar from '@/components/ShareBar'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { isBrowser } from '@/lib/utils'
+import { Transition } from '@headlessui/react'
+import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
+import ArchiveDateList from './components/ArchiveDateList'
+import { ArticleInfo } from './components/ArticleInfo'
+import { ArticleLock } from './components/ArticleLock'
+import BlogListGroupByDate from './components/BlogListGroupByDate'
 import { BlogListPage } from './components/BlogListPage'
 import { BlogListScroll } from './components/BlogListScroll'
-import { useGlobal } from '@/lib/global'
-import { ArticleLock } from './components/ArticleLock'
-import { ArticleInfo } from './components/ArticleInfo'
-import JumpToTopButton from './components/JumpToTopButton'
-import NotionPage from '@/components/NotionPage'
-import Comment from '@/components/Comment'
-import ShareBar from '@/components/ShareBar'
-import SearchInput from './components/SearchInput'
-import replaceSearchResult from '@/components/Mark'
-import { isBrowser } from '@/lib/utils'
-import BlogListGroupByDate from './components/BlogListGroupByDate'
-import CategoryItem from './components/CategoryItem'
-import TagItem from './components/TagItem'
-import { useRouter } from 'next/router'
-import { Transition } from '@headlessui/react'
-import { Style } from './style'
-import { siteConfig } from '@/lib/config'
-import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
-import LatestPostsGroup from './components/LatestPostsGroup'
 import CategoryGroup from './components/CategoryGroup'
-import { formatDateFmt } from '@/lib/utils/formatDate'
-import ArchiveDateList from './components/ArchiveDateList'
+import CategoryItem from './components/CategoryItem'
+import { Footer } from './components/Footer'
+import { Header } from './components/Header'
+import JumpToTopButton from './components/JumpToTopButton'
+import LatestPostsGroup from './components/LatestPostsGroup'
 import TagGroups from './components/TagGroups'
+import TagItem from './components/TagItem'
+import CONFIG from './config'
+import { Style } from './style'
 
 // 主题全局状态
 const ThemeGlobalMovie = createContext()
@@ -47,56 +42,44 @@ export const useMovieGlobal = () => useContext(ThemeGlobalMovie)
 const LayoutBase = props => {
   const { children, slotTop } = props
   const { onLoading, fullWidth } = useGlobal()
-  const router = useRouter()
-  const { category, tag } = props
-  const searchModal = useRef(null)
+  const collapseRef = useRef(null)
 
-  // 增加一个状态以触发 Transition 组件的动画
-  //   const [showTransition, setShowTransition] = useState(true)
-  //   useEffect(() => {
-  //     // 当 location 或 children 发生变化时，触发动画
-  //     setShowTransition(false)
-  //     setTimeout(() => setShowTransition(true), 5)
-  //   }, [onLoading])
+  const searchModal = useRef(null)
+  const [expandMenu, updateExpandMenu] = useState(false)
 
   return (
-    <ThemeGlobalMovie.Provider value={{ searchModal }}>
+    <ThemeGlobalMovie.Provider value={{ searchModal, expandMenu, updateExpandMenu, collapseRef }}>
       <div
-        id="theme-movie"
-        className={`${siteConfig('FONT_STYLE')} dark:text-gray-300  bg-white dark:bg-[#2A2A2A] scroll-smooth min-h-screen flex flex-col justify-between`}
-      >
+        id='theme-movie'
+        className={`${siteConfig('FONT_STYLE')} dark:text-gray-300 duration-300 transition-all bg-white dark:bg-[#2A2A2A] scroll-smooth min-h-screen flex flex-col justify-between`}>
         <Style />
 
         {/* 页头 */}
         <Header {...props} />
 
         {/* 主体 */}
-        <div id="container-inner" className="w-full relative z-10">
+        <div id='container-inner' className='w-full relative z-10'>
           {/* 标题栏 */}
           {/* {fullWidth ? null : <Title {...props} />} */}
 
           <div
-            id="container-wrapper"
+            id='container-wrapper'
             className={
-              (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
-                ? 'flex-row-reverse'
-                : '') +
+              (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') +
               'relative mx-auto justify-center md:flex items-start py-8 px-2'
-            }
-          >
+            }>
             {/* 内容 */}
             <div className={`w-full ${fullWidth ? '' : ''} xl:px-32 lg:px-4`}>
               <Transition
                 show={!onLoading}
                 appear={true}
-                enter="transition ease-in-out duration-700 transform order-first"
-                enterFrom="opacity-0 translate-y-16"
-                enterTo="opacity-100"
-                leave="transition ease-in-out duration-300 transform"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 -translate-y-16"
-                unmount={false}
-              >
+                enter='transition ease-in-out duration-700 transform order-first'
+                enterFrom='opacity-0 translate-y-16'
+                enterTo='opacity-100'
+                leave='transition ease-in-out duration-300 transform'
+                leaveFrom='opacity-100 translate-y-0'
+                leaveTo='opacity-0 -translate-y-16'
+                unmount={false}>
                 {/* 嵌入模块 */}
                 {slotTop}
                 {children}
@@ -112,7 +95,7 @@ const LayoutBase = props => {
         <AlgoliaSearchModal cRef={searchModal} {...props} />
 
         {/* 回顶按钮 */}
-        <div className="fixed right-4 bottom-4 z-10">
+        <div className='fixed right-4 bottom-4 z-10'>
           <JumpToTopButton />
         </div>
       </div>
@@ -135,15 +118,7 @@ const LayoutIndex = props => {
  * @returns
  */
 const LayoutPostList = props => {
-  return (
-    <>
-      {siteConfig('POST_LIST_STYLE') === 'page' ? (
-        <BlogListPage {...props} />
-      ) : (
-        <BlogListScroll {...props} />
-      )}
-    </>
-  )
+  return <>{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}</>
 }
 
 /**
@@ -174,16 +149,18 @@ const LayoutSlug = props => {
   }, [post])
   return (
     <>
-      {lock ? (
-        <ArticleLock validPassword={validPassword} />
-      ) : (
-        <div id="article-wrapper" className="px-2">
+      {!lock
+        ? (
+        <div id='article-wrapper' className='px-2'>
           <ArticleInfo post={post} />
           <NotionPage post={post} />
           <ShareBar post={post} />
           <Comment frontMatter={post} />
         </div>
-      )}
+          )
+        : (
+        <ArticleLock validPassword={validPassword} />
+          )}
     </>
   )
 }
@@ -215,27 +192,27 @@ const Layout404 = props => {
 
   return (
     <>
-      <div className="h-52">
-        <h2 className="text-4xl">{locale.COMMON.NO_RESULTS_FOUND}</h2>
-        <hr className="my-4" />
-        <div className="max-w-md relative">
+      <div className='h-52'>
+        <h2 className='text-4xl'>{locale.COMMON.NO_RESULTS_FOUND}</h2>
+        <hr className='my-4' />
+        <div className='max-w-md relative'>
           <input
             autoFocus
-            id="search"
+            id='search'
             onClick={toggleShowSearchInput}
             onKeyUp={onKeyUp}
-            className="float-left w-full outline-none h-full p-2 rounded dark:bg-[#383838] bg-gray-100"
-            aria-label="Submit search"
-            type="search"
-            name="s"
-            autoComplete="off"
-            placeholder="Type then hit enter to search..."
+            className='float-left w-full outline-none h-full p-2 rounded dark:bg-[#383838] bg-gray-100'
+            aria-label='Submit search'
+            type='search'
+            name='s'
+            autoComplete='off'
+            placeholder='Type then hit enter to search...'
           />
-          <i className="fas fa-search absolute right-0 my-auto p-2"></i>
+          <i className='fas fa-search absolute right-0 my-auto p-2'></i>
         </div>
       </div>
       {/* 底部导航 */}
-      <div className="h-full flex-grow grid grid-cols-4 gap-4">
+      <div className='h-full flex-grow grid grid-cols-4 gap-4'>
         <LatestPostsGroup {...props} />
         <CategoryGroup {...props} />
         <ArchiveDateList {...props} />
@@ -282,13 +259,9 @@ const LayoutArchive = props => {
   const { archivePosts } = props
   return (
     <>
-      <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
+      <div className='mb-10 pb-20 md:py-12 p-3  min-h-screen w-full'>
         {Object.keys(archivePosts).map(archiveTitle => (
-          <BlogListGroupByDate
-            key={archiveTitle}
-            archiveTitle={archiveTitle}
-            archivePosts={archivePosts}
-          />
+          <BlogListGroupByDate key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />
         ))}
       </div>
     </>
@@ -304,7 +277,7 @@ const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   return (
     <>
-      <div id="category-list" className="duration-200 flex flex-wrap">
+      <div id='category-list' className='duration-200 flex flex-wrap'>
         {categoryOptions?.map(category => (
           <CategoryItem key={category.name} category={category} />
         ))}
@@ -322,7 +295,7 @@ const LayoutTagIndex = props => {
   const { tagOptions } = props
   return (
     <>
-      <div id="tags-list" className="duration-200 flex flex-wrap">
+      <div id='tags-list' className='duration-200 flex flex-wrap'>
         {tagOptions.map(tag => (
           <TagItem key={tag.name} tag={tag} />
         ))}
@@ -332,14 +305,14 @@ const LayoutTagIndex = props => {
 }
 
 export {
-  CONFIG as THEME_CONFIG,
-  LayoutBase,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
   Layout404,
-  LayoutPostList,
+  LayoutArchive,
+  LayoutBase,
   LayoutCategoryIndex,
-  LayoutTagIndex
+  LayoutIndex,
+  LayoutPostList,
+  LayoutSearch,
+  LayoutSlug,
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }