feature: collapse组件

components/Analytics.js

@@ -13,10 +13,10 @@ export default function Analytics ({ postCount }) {
     <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
         <span className='px-1 '>
           <strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
-        {/* <span className='px-1 busuanzi_container_site_uv hidden'> */}
-        {/* | <strong className='pl-1 busuanzi_value_site_uv font-medium'></strong>{locale.COMMON.VISITORS}</span> */}
-        <span className='px-1 busuanzi_container_site_pv hidden'>
-        | <strong className='pl-1 busuanzi_value_site_pv font-medium'></strong>{locale.COMMON.VIEWS}</span>
+        <span className='px-1 busuanzi_container_site_uv hidden'>
+        | <strong className='pl-1 busuanzi_value_site_uv font-medium'></strong>{locale.COMMON.VISITORS}</span>
+        {/* <span className='px-1 busuanzi_container_site_pv hidden'>
+        | <strong className='pl-1 busuanzi_value_site_pv font-medium'></strong>{locale.COMMON.VIEWS}</span> */}
       </div>
 </>
 }

components/BlogPostListScroll.js

@@ -55,7 +55,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = BLOG.home
     return <div id='container' ref={targetRef}>
 
       {/* 文章列表 */}
-      <div className='flex flex-wrap space-y-8'>
+      <div className='flex flex-wrap space-y-1 lg:space-y-4'>
         {postsToShow.map(post => (
           <BlogPostCard key={post.id} post={post} showSummary={showSummary}/>
         ))}
@@ -65,7 +65,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = BLOG.home
         <div onClick={() => {
           handleGetMore()
         }}
-             className='w-full my-4 py-4  text-center cursor-pointer glassmorphism shadow-xl rounded-xl dark:text-gray-200'
+             className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow-xl rounded-xl dark:text-gray-200'
         > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`} </div>
       </div>
     </div>

components/Collapse.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from 'react'
+
+const Collapse = props => {
+  const collapseRef = useRef(null)
+  const collapseSection = element => {
+    const sectionHeight = element.scrollHeight
+    requestAnimationFrame(function () {
+      element.style.height = sectionHeight + 'px'
+      requestAnimationFrame(function () {
+        element.style.height = 0 + 'px'
+      })
+    })
+  }
+  const expandSection = element => {
+    const sectionHeight = element.scrollHeight
+    element.style.height = sectionHeight + 'px'
+    const clearTime = setTimeout(() => {
+      element.style.height = 'auto'
+    }, 400)
+    clearTimeout(clearTime)
+  }
+  useEffect(() => {
+    const element = collapseRef.current
+    if (props.isOpen) {
+      expandSection(element)
+    } else {
+      collapseSection(element)
+    }
+  }, [props.isOpen])
+  return (
+    <div ref={collapseRef} className=' overflow-hidden duration-200'>
+      {props.children}
+    </div>
+  )
+}
+Collapse.defaultProps = { isOpen: false }
+
+export default Collapse

components/MenuButtonGroup.js

@@ -6,27 +6,30 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArchive, faHome, faTag, faTh, faUser } from '@fortawesome/free-solid-svg-icons'
 import BLOG from 'blog.config'
 
-const MenuButtonGroup = ({ allowCollapse = false }) => {
+const MenuButtonGroup = ({ allowCollapse = false, postCount }) => {
   const { locale } = useGlobal()
   const router = useRouter()
+  const archiveSlot = <div className='bg-gray-300 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
+
   const links = [
     { id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { id: 1, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', show: BLOG.menu.showArchive },
-    { id: 2, icon: faTh, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.menu.showCategory },
-    { id: 3, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.menu.showTag },
+    { id: 1, icon: faTh, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.menu.showCategory },
+    { id: 2, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.menu.showTag },
+    { id: 3, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: BLOG.menu.showArchive },
     { id: 4, icon: faUser, name: locale.NAV.ABOUT, to: '/about', show: BLOG.menu.showAbout }
   ]
-  return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 '>
+  return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 font-sans'>
       {links.map(link => {
         if (link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
           return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
-            <a className={'py-1 my-1 px-5 mx-2 duration-300 text-base hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+            <a className={'py-2 px-5 mx-2 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
               (selected ? 'bg-gray-200 text-black' : ' ')} >
               <div className='my-auto justify-center flex '>
                 <FontAwesomeIcon icon={link.icon} />
+                <div className={'ml-4'}>{link.name}</div>
               </div>
-              <div className={'ml-4'}>{link.name}</div>
+              {link.slot}
             </a>
           </Link>
         } else {

components/SearchDrawer.js

@@ -13,7 +13,6 @@ const SearchDrawer = ({ cRef }) => {
     }
   })
   const hidden = () => {
-    console.log('点击')
     searchDrawer?.current?.classList?.add('hidden')
   }
   Router.events.on('routeChangeComplete', (...args) => {

components/SideAreaLeft.js

@@ -30,10 +30,10 @@ const SideAreaLeft = ({ title, tags, currentTag, post, postCount, categories, cu
       {/* 菜单 */}
       <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
         <Logo/>
-        <div className='pt-2'>
-        <MenuButtonGroup allowCollapse={true} />
+        <div className='pt-2 font-sans'>
+        <MenuButtonGroup allowCollapse={true} postCount={postCount} />
         </div>
-        {BLOG.menu.showSearch && <div className='px-5 pt-2'>
+        {BLOG.menu.showSearch && <div className='px-5 pt-2 font-sans'>
            <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
         </div>}
       </section>

components/TopNav.js

@@ -1,11 +1,12 @@
 import BLOG from '@/blog.config'
-import SideBarDrawer from '@/components/SideBarDrawer'
 import { useGlobal } from '@/lib/global'
-import { faBars, faSearch } from '@fortawesome/free-solid-svg-icons'
+import { faBars, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import throttle from 'lodash.throttle'
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import Collapse from './Collapse'
 import Logo from './Logo'
+import MenuButtonGroup from './MenuButtonGroup'
 import SearchDrawer from './SearchDrawer'
 
 let windowTop = 0
@@ -15,8 +16,7 @@ let windowTop = 0
  * @param {*} param0
  * @returns
  */
-const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, autoHide = true }) => {
-  const drawer = useRef()
+const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, autoHide = true, postCount }) => {
   const { locale } = useGlobal()
   const searchDrawer = useRef()
 
@@ -44,23 +44,22 @@ const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, aut
     }
   }, [])
 
-  const switchMenuShow = () => {
-    drawer?.current?.handleSwitchSideDrawerVisible()
+  const [isOpen, changeShow] = useState(false)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
   }
 
   return (<div id='top-nav' className='z-40 block lg:hidden'>
-    {/* 侧面抽屉 */}
-    <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} slot={slot} categories={categories} currentCategory={currentCategory}/>
-    <SearchDrawer cRef={searchDrawer}/>
+      <SearchDrawer cRef={searchDrawer}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className={`${BLOG.topNavType !== 'normal' ? 'fixed' : ''} flex animate__animated animate__fadeIn  lg:relative w-full top-0 z-20 transform duration-500`}>
+    <div id='sticky-nav' className={`${BLOG.topNavType !== 'normal' ? 'fixed' : ''} animate__animated animate__fadeIn  lg:relative w-full top-0 z-20 transform duration-500`}>
       <div className='w-full flex justify-between items-center p-4 bg-black text-white'>
         {/* 左侧LOGO 标题 */}
         <div className='flex flex-none flex-grow-0'>
-          <div onClick={switchMenuShow}
-               className='w-8 cursor-pointer'>
-            <FontAwesomeIcon icon={faBars} size={'lg'}/>
+          <div onClick={toggleMenuOpen} className='w-8 cursor-pointer'>
+          { isOpen ? <FontAwesomeIcon icon={faTimes} size={'lg'}/> : <FontAwesomeIcon icon={faBars} size={'lg'}/> }
           </div>
         </div>
 
@@ -75,6 +74,12 @@ const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, aut
           </div>
         </div>
       </div>
+
+      <Collapse isOpen={isOpen}>
+        <div className='bg-white py-1'>
+          <MenuButtonGroup postCount={postCount}/>
+          </div>
+      </Collapse>
     </div>
 
   </div>)

layouts/BaseLayout.js

@@ -52,7 +52,7 @@ const BaseLayout = ({
 
       <CommonHead meta={meta} />
 
-      <TopNav tags={tags} post={post} slot={sideBarSlot} currentSearch={currentSearch} categories={categories} currentCategory={currentCategory} />
+      <TopNav tags={tags} postCount={postCount} post={post} slot={sideBarSlot} currentSearch={currentSearch} categories={categories} currentCategory={currentCategory} />
 
       <>{headerSlot}</>