heo-theme

themes/heo/components/Header.js

@@ -1,20 +1,14 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import Logo from './Logo'
-import SearchDrawer from './SearchDrawer'
 
 import { MenuListTop } from './MenuListTop'
 import throttle from 'lodash.throttle'
-import SideBar from './SideBar'
-import SideBarDrawer from './SideBarDrawer'
-
 /**
  * 顶部导航
  * @param {*} param0
  * @returns
  */
 const Header = props => {
-  const searchDrawer = useRef()
-
   const [isOpen, changeShow] = useState(false)
   const [headerBgShow, setHeaderBgShow] = useState(false)
 
@@ -22,10 +16,6 @@ const Header = props => {
     changeShow(!isOpen)
   }
 
-  const toggleSideBarClose = () => {
-    changeShow(false)
-  }
-
   // 监听滚动
   useEffect(() => {
     scrollTrigger()
@@ -38,8 +28,8 @@ const Header = props => {
   const throttleMs = 200
 
   /**
-     * 根据滚动条，切换导航栏样式
-     */
+         * 根据滚动条，切换导航栏样式
+         */
   const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY
     const header = document.querySelector('#header')
@@ -52,12 +42,10 @@ const Header = props => {
     }
   }, throttleMs))
 
-  return (<div id='header' className='z-40'>
-        <SearchDrawer cRef={searchDrawer} />
-
-        {/* 导航栏 */}
-        <div id='sticky-nav' className={`${headerBgShow ? 'bg-white border-b' : 'bg-none'} top-0 duration-300 transition-all fixed  text-black w-full z-20 transform`}>
-            <div className='w-full max-w-7xl mx-auto flex justify-between items-center py-2 px-5'>
+  return (<>
+        {/* 头条 */}
+        <nav id='header' className={`${headerBgShow ? 'bg-white border-b' : 'bg-none'} h-16 flex justify-center items-center top-0 duration-300 transition-all sticky text-black w-full z-20 transform`}>
+            <div className='w-full max-w-[88rem] mx-auto flex justify-between items-center px-5'>
                 <div className='flex'>
                     <Logo {...props} />
                 </div>
@@ -70,13 +58,8 @@ const Header = props => {
                     </div>
                 </div>
             </div>
-        </div>
-
-        {/* 折叠侧边栏 */}
-        <SideBarDrawer isOpen={isOpen} onClose={toggleSideBarClose}>
-            <SideBar {...props} />
-        </SideBarDrawer>
-    </div>)
+        </nav>
+    </>)
 }
 
 export default Header