From 9156095a79a991229a24d24a72bb8c19dce70608 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 13 Oct 2021 12:45:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Container.js | 33 +++++++++++++++++++++++++++++----
 components/SideBar.js   |  2 +-
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/components/Container.js b/components/Container.js
index 25496fc3..7c24ff8e 100644
--- a/components/Container.js
+++ b/components/Container.js
@@ -1,11 +1,36 @@
 import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
+import CommonHead from '@/components/CommonHead'
+import TopNav from '@/components/TopNav'
 
-const Container = ({ children, layout, fullWidth, ...customMeta }) => {
+const Container = ({ children, layout, fullWidth, tags, meta, ...customMeta }) => {
+  let windowTop = 0
+  // 监听滚动
+  useEffect(() => {
+    function scrollTrigger () {
+      const scrollS = window.scrollY
+      const nav = document.querySelector('#sticky-nav')
+      const tagsBar = document.querySelector('#tags-bar')
+      console.log(windowTop, scrollS)
+      if (scrollS >= windowTop) {
+        nav && nav.classList.add('-mt-16')
+        tagsBar && tagsBar.classList.add('-mt-32')
+        windowTop = scrollS
+      } else {
+        nav && nav.classList.remove('-mt-16')
+        tagsBar && tagsBar.classList.remove('-mt-32')
+        windowTop = scrollS
+      }
+    }
+
+    window.addEventListener('scroll', scrollTrigger)
+  })
   return (
-    <div>
-      {/* 公共头 */}
+    <>
+      <CommonHead meta={meta} />
+      <TopNav tags={tags}/>
       {children}
-    </div>
+    </>
   )
 }
 
diff --git a/components/SideBar.js b/components/SideBar.js
index 21264289..c3eb8ea2 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -6,7 +6,7 @@ const SideBar = ({ tags, currentTag, post }) => {
   return <aside className='z-10 bg-white dark:border-gray-500 border-gray-200 hidden xl:block'>
     <div className='dark:bg-gray-800 border-r dark:border-gray-700 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
       <div className='hidden md:block sticky top-16'>
-        <div className={post ? 'hidden xl:block' : 'block'}>
+        <div className={post ? 'hidden 2xl:block' : 'block'}>
           <MenuButtonGroup allowCollapse={true}/>
         </div>
       </div>