🕶 侧边栏微调

components/Footer.js

@@ -1,6 +1,5 @@
 import BLOG from '@/blog.config'
 import React from 'react'
-import SocialButton from '@/components/SocialButton'
 
 const Footer = ({ fullWidth = true }) => {
   const d = new Date()
@@ -10,14 +9,8 @@ const Footer = ({ fullWidth = true }) => {
     <footer
       className='flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400'
     >
-      <div className='py-2'>
-        <span className='text-xl border-b-2'>联系我</span>
-        <div className='py-2'>
-          <SocialButton />
-        </div>
-      </div>
-
-      <div className='text-sm py-4 text-gray-400'>
+      <div className='text-sm text-gray-400'>
+        <hr className='py-2'/>
         <span className='fa fa-shield leading-6'><a href='https://beian.miit.gov.cn/'
                                                     className='ml-1'>闽ICP备20010331号</a></span>
         <br />

components/SideBar.js

@@ -8,6 +8,7 @@ import DarkModeButton from '@/components/DarkModeButton'
 import Footer from '@/components/Footer'
 import throttle from 'lodash.throttle'
 import TocBar from '@/components/TocBar'
+import SocialButton from '@/components/SocialButton'
 
 const SideBar = ({ tags, currentTag, toc }) => {
   const locale = useLocale()
@@ -36,7 +37,7 @@ const SideBar = ({ tags, currentTag, toc }) => {
       changeCollapse(true)
     }
   }, 500)
-  const [collapse, changeCollapse] = useState(true)
+  const [collapse, changeCollapse] = useState(false)
 
   return <aside className='z-10'>
 
@@ -77,10 +78,10 @@ const SideBar = ({ tags, currentTag, toc }) => {
 
         {/* 菜单 */}
         <nav className='py-4'>
-          <div className='mb-3'>
-            <span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>菜单</span>
+          <div>
+            <strong className='text-xl text-gray-600 dark:text-gray-400'>菜单</strong>
           </div>
-          <ul className='leading-8 dark:text-gray-400'>
+          <ul className='leading-8 text-gray-500 dark:text-gray-400'>
             <li><a className='fa fa-info hover:underline' href='/article/about' id='about'><span
               className='ml-2'>关于本站</span></a></li>
             <li><a className='fa fa-rss hover:underline' href='/feed' target='_blank' id='feed'><span
@@ -90,12 +91,21 @@ const SideBar = ({ tags, currentTag, toc }) => {
 
         {/* 标签云  */}
         <section className=''>
-          <div className='mb-3'>
-            <span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>标签</span>
+          <div>
+            <strong className='text-xl text-gray-600 dark:text-gray-400'>标签</strong>
           </div>
           <Tags tags={tags} currentTag={currentTag} />
         </section>
 
+        <section>
+          <div className='mt-4'>
+            <strong className='text-xl text-gray-600 dark:text-gray-400'>联系我</strong>
+            <div className='py-2'>
+              <SocialButton />
+            </div>
+          </div>
+        </section>
+
         <section className='pt-2'>
           {/* 站点信息 */}
           <Footer />

components/SocialButton.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 const SocialButton = () => {
   return <>
-    <div className='space-x-3 text-2xl'>
+    <div className='space-x-3 text-2xl text-gray-500 dark:text-gray-400'>
       <a className='fa fa-github' target='_blank' rel='noreferrer' title={'github'}
          href={'https://github.com/tangly1024'} />
       <a className='fa fa-twitter' target='_blank' rel='noreferrer' title={'twitter'}

layouts/DefaultLayout.js

@@ -50,14 +50,14 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
     // if (ref) {
     //   ref.remove()
     // }
-    window.addEventListener('resize', resizeWindowHideToc)
-    resizeWindowHideToc()
+    window.addEventListener('resize', changeColumnCount)
+    changeColumnCount()
     return () => {
-      window.removeEventListener('resize', resizeWindowHideToc)
+      window.removeEventListener('resize', changeColumnCount)
     }
   }, [])
 
-  const resizeWindowHideToc = throttle(() => {
+  const changeColumnCount = throttle(() => {
     if (window.innerWidth > 2500) {
       changeColumn(5)
     } else if (window.innerWidth > 1800) {