feat: header menu按钮状态设置

src/component/Header/Header.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import Navigation from "../Navigation/Navigation";
 import logo from '../../assets/images/main/logo.png';
 import Styles from './Header.module.css';
@@ -10,6 +10,7 @@ import eventBus from "../../uitls/EventBus";
 // 顶部导航栏组件
 const Header = () => {
     const {i18n} = useTranslation();
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
     const currentMenuState = useRef(true);
 
     const changeLanguage = () => {
@@ -24,7 +25,9 @@ const Header = () => {
     };
     useEffect(() => {
         eventBus.on("drawerStateRecover", (state) => {
+            console.log(`drawerStateRecover ${state}`)
             currentMenuState.current = state;
+            setIsMenuOpen(!state);
         });
         return () => {
             eventBus.off("drawerStateRecover");
@@ -36,10 +39,11 @@ const Header = () => {
                 className={Styles.menuBtn}
                 onClick={() => {
                     eventBus.emit('drawerState', currentMenuState.current);
+                    setIsMenuOpen(currentMenuState.current);
                     currentMenuState.current = !currentMenuState.current;
                 }}
             >
-                ☰
+                {isMenuOpen ?'✕':'☰'}
             </button>
             <Link to={HOME} className={Styles.link} onClick={() => eventBus.emit('changeTabEvent', HOME)}>
                 <img className={Styles.logoImg} src={logo} alt="logo"/>

src/component/ScrollToTopButton/ScrollToTopButton.module.css

@@ -7,3 +7,14 @@
     position: fixed;
     z-index: 1000;
 }
+@media (max-width: 768px) {
+    .backToTop {
+        width: 10vw;
+        height: 10vw;
+        bottom: 25vw;
+        right: 5vw;
+        cursor: pointer;
+        position: fixed;
+        z-index: 999;
+    }
+}