From ee3dcc6aa7c1823ecb37a55d73b3161e91a00c3e Mon Sep 17 00:00:00 2001
From: tangly <tlyong1992@hotmail.com>
Date: Sun, 5 Dec 2021 14:05:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A1=86=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E9=A1=B6=E9=83=A8Sticky=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SearchInput.js | 4 ++--
 components/StickyBar.js   | 2 +-
 layouts/BaseLayout.js     | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/SearchInput.js b/components/SearchInput.js
index 85161e0c..94c162dc 100644
--- a/components/SearchInput.js
+++ b/components/SearchInput.js
@@ -37,12 +37,12 @@ const SearchInput = ({ currentTag, currentSearch }) => {
     setSearchKey(val)
   }
 
-  return <div className='flex border dark:border-gray-600 w-full'>
+  return <div className='flex border dark:border-gray-600 w-full bg-gray-100 dark:bg-gray-900'>
     <input
       ref={searchInputRef}
       type='text'
       placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-      className={'pl-2 transition leading-10 border-gray-300 bg-white text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+      className={'w-full pl-2 transition leading-10 border-gray-300 bg-white text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
       onKeyUp={handleKeyUp}
       onChange={e => updateSearchKey(e.target.value)}
       defaultValue={currentSearch}
diff --git a/components/StickyBar.js b/components/StickyBar.js
index dcfee33a..dce840ff 100644
--- a/components/StickyBar.js
+++ b/components/StickyBar.js
@@ -8,7 +8,7 @@
 const StickyBar = ({ children }) => {
   if (!children) return <></>
   return (
-    <div id='sticky-bar' className='fixed lg:top-0 top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
+    <div id='sticky-bar' className='fixed lg:top-0 top-14 duration-500 z-10 w-full border-b dark:border-gray-600 shadow-xl'>
       <div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
       <div className='z-30 sticky left-0 flex'>
         <div className='pr-2 bg-white dark:bg-gray-800'/>
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 5e276104..4a16281e 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -102,7 +102,7 @@ const handleScrollDown = () => {
     nav && nav.classList.replace('top-0', '-top-16')
 
     const stickyBar = document.querySelector('#sticky-bar')
-    stickyBar && stickyBar.classList.replace('top-16', 'top-0')
+    stickyBar && stickyBar.classList.replace('top-14', 'top-0')
 
     const tocDrawerButton = document.querySelector('#toc-drawer-button')
     tocDrawerButton && tocDrawerButton.classList.replace('hidden', 'block')
@@ -124,7 +124,7 @@ const handleScrollUp = () => {
     nav && nav.classList.replace('-top-16', 'top-0')
 
     const stickyBar = document.querySelector('#sticky-bar')
-    stickyBar && stickyBar.classList.replace('top-0', 'top-16')
+    stickyBar && stickyBar.classList.replace('top-0', 'top-14')
 
     // const tocDrawerButton = document.querySelector('#toc-drawer-button')
     // tocDrawerButton && tocDrawerButton.classList.replace('block', 'hidden')