From 6c8c0133fdf37098aa57c045d468e996180aae81 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 15 Feb 2022 11:31:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=9E=E9=A1=B6=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/Medium/LayoutBase.js                 | 7 +++----
 themes/Medium/components/BottomMenuBar.js   | 2 +-
 themes/Medium/components/Catalog.js         | 4 ++--
 themes/Medium/components/Footer.js          | 2 +-
 themes/Medium/components/JumpToTopButton.js | 4 ++--
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/themes/Medium/LayoutBase.js b/themes/Medium/LayoutBase.js
index 3cd0f7bb..087d2589 100644
--- a/themes/Medium/LayoutBase.js
+++ b/themes/Medium/LayoutBase.js
@@ -25,14 +25,13 @@ const LayoutBase = props => {
     <div id='container' className='bg-white w-full h-full min-h-screen justify-center'>
       <CommonHead meta={meta} />
       <main id='wrapper' className='flex justify-between w-full h-full mx-auto'>
-
         {/* 桌面端左侧菜单 */}
         {/* <LeftMenuBar/> */}
 
-        <div className='w-full justify-center'>
+        <div className='w-full'>
           {/* 移动端顶部菜单 */}
           <TopNavBar />
-          <div className='px-5'>
+          <div className='px-5 max-w-5xl justify-center mx-auto'>
             {children}
           </div>
         </div>
@@ -51,8 +50,8 @@ const LayoutBase = props => {
       </main>
 
       {/* 移动端底部 */}
-      <BottomMenuBar className='block md:hidden' />
       <Footer />
+      <BottomMenuBar className='block md:hidden' />
     </div>
   )
 }
diff --git a/themes/Medium/components/BottomMenuBar.js b/themes/Medium/components/BottomMenuBar.js
index 6e8e0c71..f81af654 100644
--- a/themes/Medium/components/BottomMenuBar.js
+++ b/themes/Medium/components/BottomMenuBar.js
@@ -6,7 +6,7 @@ import JumpToTopButton from '@/themes/Medium/components/JumpToTopButton'
 
 export default function BottomMenuBar ({ className }) {
   return (
-    <div className={'fixed bottom-0 w-full h-12 bg-white ' + className}>
+    <div className={'sticky bottom-0 w-full h-12 bg-white ' + className}>
       <div className='flex justify-between h-full shadow-card'>
         <Link href='/' passHref>
           <div className='flex w-full items-center justify-center cursor-pointer'>
diff --git a/themes/Medium/components/Catalog.js b/themes/Medium/components/Catalog.js
index 9ae655a1..b1dc71ba 100644
--- a/themes/Medium/components/Catalog.js
+++ b/themes/Medium/components/Catalog.js
@@ -2,8 +2,7 @@ import React from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import Progress from './Progress'
-// import { cs } from 'react-notion-x'
-
+import JumpToTopButton from './JumpToTopButton'
 /**
  * 目录导航组件
  * @param toc
@@ -79,6 +78,7 @@ const Catalog = ({ toc }) => {
         )
       })}
     </nav>
+    <JumpToTopButton className='text-gray-400 hover:bg-gray-100 py-1 duration-200'/>
   </div>
 }
 
diff --git a/themes/Medium/components/Footer.js b/themes/Medium/components/Footer.js
index d9aac814..57ad7797 100644
--- a/themes/Medium/components/Footer.js
+++ b/themes/Medium/components/Footer.js
@@ -9,7 +9,7 @@ const Footer = ({ title }) => {
   const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
   return (
     <footer
-      className='dark:bg-gray-900 flex-shrink-0 mb-8 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
+      className='dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
     >
       <FontAwesomeIcon icon={faCopyright} /> {`${startYear}${currentYear}`} <span><FontAwesomeIcon icon={faHeart} className='mx-1 animate-pulse'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
       <br/>
diff --git a/themes/Medium/components/JumpToTopButton.js b/themes/Medium/components/JumpToTopButton.js
index 7126309c..6eab4596 100644
--- a/themes/Medium/components/JumpToTopButton.js
+++ b/themes/Medium/components/JumpToTopButton.js
@@ -12,12 +12,12 @@ import CONFIG_MEDIUM from '../config_medium'
  * @returns {JSX.Element}
  * @constructor
  */
-const JumpToTopButton = ({ showPercent = false, percent }) => {
+const JumpToTopButton = ({ showPercent = false, percent, className }) => {
   if (!CONFIG_MEDIUM.WIDGET_TO_TOP) {
     return <></>
   }
   const { locale } = useGlobal()
-  return (<div className='flex space-x-1 items-center cursor-pointer' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
+  return (<div className={'flex space-x-1 items-center cursor-pointer w-full justify-center ' + className } onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
         <div title={locale.POST.TOP} >
           <FontAwesomeIcon icon={faArrowUp} />
         </div>