From 5b271365216bbd443a2dada090a6af25ec72e053 Mon Sep 17 00:00:00 2001
From: Femoon <839242981@qq.com>
Date: Sun, 28 Apr 2024 16:44:37 +0800
Subject: [PATCH] fix: medium theme page refresh causing the catalog loss,
 phone style optimization

---
 themes/medium/components/BottomMenuBar.js |  8 ++++----
 themes/medium/index.js                    | 20 ++++++++++++++------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/themes/medium/components/BottomMenuBar.js b/themes/medium/components/BottomMenuBar.js
index fee36eb2..23979d9e 100644
--- a/themes/medium/components/BottomMenuBar.js
+++ b/themes/medium/components/BottomMenuBar.js
@@ -4,7 +4,7 @@ import JumpToTopButton from './JumpToTopButton'
 
 export default function BottomMenuBar ({ post, className }) {
   const { tocVisible, changeTocVisible } = useMediumGlobal()
-  const showTocBotton = post?.toc?.length > 0
+  const showTocButton = post?.toc?.length > 0
 
   const toggleToc = () => {
     changeTocVisible(!tocVisible)
@@ -18,13 +18,13 @@ export default function BottomMenuBar ({ post, className }) {
             <i className='fas fa-search'/>
           </div>
         </Link>
-        <div className='flex w-full items-center justify-center cursor-pointer'>
+        <div className='flex w-full items-center justify-center cursor-pointer z-20'>
           <JumpToTopButton/>
         </div>
-        {showTocBotton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer'>
+        {showTocButton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer z-30'>
           <i className='fas fa-list-ol ' />
         </div>}
-        { !showTocBotton && <Link href='/' passHref legacyBehavior>
+        { !showTocButton && <Link href='/' passHref legacyBehavior>
           <div className='flex w-full items-center justify-center cursor-pointer'>
             <i className='fas fa-home' />
           </div>
diff --git a/themes/medium/index.js b/themes/medium/index.js
index 1e3f365d..e35cdc28 100644
--- a/themes/medium/index.js
+++ b/themes/medium/index.js
@@ -51,12 +51,20 @@ const LayoutBase = props => {
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
   const { onLoading, fullWidth } = useGlobal()
+  const [slotRight, setSlotRight] = useState(null);
+
+  useEffect(()=> {
+    if (post?.toc?.length > 0) {
+      setSlotRight(
+        <div key={locale.COMMON.TABLE_OF_CONTENTS}>
+          <Catalog toc={post?.toc} />
+        </div>
+      );
+    } else {
+      setSlotRight(null);
+    }
+  },[post])
 
-  const slotRight = post?.toc?.length > 0 && (
-    <div key={locale.COMMON.TABLE_OF_CONTENTS} >
-        <Catalog toc={post?.toc} />
-    </div>
-  )
   const slotTop = <BlogPostBar {...props} />
 
   return (
@@ -178,7 +186,7 @@ const LayoutSlug = props => {
   }, [post])
 
   return (
-        <div showInfoCard={true} slotRight={slotRight} {...props} >
+        <div {...props} >
             {/* 文章锁 */}
             {lock && <ArticleLock validPassword={validPassword} />}