From c883bbac436b7382455a542a24021ef794f5b388 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 20 Dec 2021 16:53:37 +0800
Subject: [PATCH] =?UTF-8?q?bugfix:=20StickyBar=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/StickyBar.js | 14 +++-----------
 components/TagList.js   |  2 +-
 pages/tag/[tag].js      |  4 +++-
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/components/StickyBar.js b/components/StickyBar.js
index ac82412b..18f10349 100644
--- a/components/StickyBar.js
+++ b/components/StickyBar.js
@@ -8,19 +8,11 @@
 const StickyBar = ({ children }) => {
   if (!children) return <></>
   return (
-    <div id='sticky-bar' className='sticky flex justify-center top-14 md:top-0 duration-500 z-10 w-full'>
-      <div className='bg-white dark:bg-gray-800 dark:border-gray-600 w-full px-5 rounded-none md:rounded-xl shadow-xl border overflow-x-auto'>
-        <div className="flex">
-          <div className='z-30 absolute h-12 left-0 flex'>
-            <div className='pr-6 md:ml-5 -line-x-opacity'/>
-          </div>
-          <div id='tag-container' className="md:pl-3  max-w-xs md:max-w-lg xl:max-w-2xl 2xl:max-w-5xl 3xl:max-w-6xl">
+    <div id='sticky-bar' className='sticky flex-grow justify-center top-14 md:top-0 duration-500 z-10 pb-16'>
+      <div className='bg-white dark:bg-gray-800 dark:border-gray-600 px-5 absolute rounded-none md:rounded-xl shadow-xl border w-full hidden-scroll'>
+          <div id='tag-container' className="md:pl-3 overflow-x-auto">
               { children }
           </div>
-          <div className='z-30 absolute h-12 right-0 flex'>
-            <div className='pl-5 md:mr-5 line-x-opacity'/>
-          </div>
-        </div>
       </div>
     </div>
   )
diff --git a/components/TagList.js b/components/TagList.js
index 6691d9b6..f1eabe52 100644
--- a/components/TagList.js
+++ b/components/TagList.js
@@ -14,7 +14,7 @@ const TagList = ({ tags, currentTag }) => {
   if (!tags) {
     return <></>
   }
-  return <ul className='flex py-1 space-x-3 overflow-x-scroll w-full'>
+  return <ul className='flex py-1 space-x-3'>
     <li className='w-20 py-2 dark:text-gray-200 whitespace-nowrap'><FontAwesomeIcon icon={faTags} className='mr-2'/>标签:</li>
     {tags.map(tag => {
       const selected = tag.name === currentTag
diff --git a/pages/tag/[tag].js b/pages/tag/[tag].js
index c6a137b5..380f75ad 100644
--- a/pages/tag/[tag].js
+++ b/pages/tag/[tag].js
@@ -13,9 +13,11 @@ export default function Tag ({ tags, allPosts, filteredPosts, tag, categories })
     type: 'website'
   }
 
+  // 将当前选中的标签置顶🔝
+  const newTags = [tags.find(r => r.name === tag)].concat(tags.filter(r => r.name !== tag))
   return <BaseLayout meta={meta} tags={tags} currentTag={tag} categories={categories} totalPosts={allPosts}>
       <StickyBar>
-          <TagList tags={tags} currentTag={tag}/>
+          <TagList tags={newTags} currentTag={tag}/>
       </StickyBar>
       <div className='md:mt-8'>
         <BlogPostListScroll posts={filteredPosts} tags={tags} currentTag={tag}/>