feat: change menu style

src/components/NavBar.js

@@ -7,7 +7,7 @@ import Hamburger from "hamburger-react";
 
 const NavBar = () => {
   const [navBackground, setNavBackground] = useState({ backgroundColor: "transparent" });
-  const { toggleMenu, isMenu } = useContainer(GlobalStore);
+  const { toggleMenu, isHamburger } = useContainer(GlobalStore);
   useEffect(() => {
     document.addEventListener("scroll", (event) => {
       if (window.scrollY < 10) {
@@ -42,7 +42,7 @@ const NavBar = () => {
         Login
       </NavLink> */}
       <div className="nav__placeholder"></div>
-      <Hamburger toggled={isMenu} toggle={toggleMenu} />
+      <Hamburger toggled={isHamburger} toggle={toggleMenu} />
       {/* <div className="navbar__hamburger">
         <div className="navbar__hamburger_line"></div>
         <div className="navbar__hamburger_line"></div>

src/routes/AboutRoute.js

@@ -9,15 +9,15 @@ import GlobalStore from "../store/global";
 
 
 const Inner = () => {
-  const { isMenu, setIsMenu } = useContainer(GlobalStore);
+  const { isHamburger, setIsHamburger } = useContainer(GlobalStore);
   useEffect(() => {
-    setIsMenu(false);
+    setIsHamburger(false);
   }, []);
   return (
     <div className="container">
-      {isMenu ? <DropdownContainer hamburgerToggle={setIsMenu}/> : null}
+      {isHamburger ? <DropdownContainer hamburgerToggle={setIsHamburger}/> : null}
       <About></About>
-      <NavBar hamburgerToggle={setIsMenu}></NavBar>
+      <NavBar hamburgerToggle={setIsHamburger}></NavBar>
       <Footer></Footer>
     </div>
   );

src/routes/ErrorRoute.js

@@ -12,7 +12,7 @@ import GlobalStore from "../store/global";
 export default function ErrorRoute() {
   const error = useRouteError();
   console.error(error);
-  const { isMenu: hamburger, setIsMenu: setHamburger } = useContainer(GlobalStore);
+  const { isHamburger: hamburger, setIsHamburger: setHamburger } = useContainer(GlobalStore);
   useEffect(() => {
     setHamburger(false);
   }, []);

src/routes/HomeRoute.js

@@ -11,15 +11,15 @@ import GlobalStore from "../store/global";
 
 
 const Inner = () => {
-  const { isMenu, setIsMenu } = useContainer(GlobalStore);
+  const { isHamburger, setIsHamburger } = useContainer(GlobalStore);
   useEffect(() => {
-    setIsMenu(false);
+    setIsHamburger(false);
   }, []);
   return (
     <div className="container">
-      {isMenu ? <DropdownContainer hamburgerToggle={setIsMenu}/> : null}
+      {isHamburger ? <DropdownContainer hamburgerToggle={setIsHamburger}/> : null}
       <Home></Home>
-      <NavBar hamburgerToggle={setIsMenu}></NavBar>
+      <NavBar hamburgerToggle={setIsHamburger}></NavBar>
       <ToastContainer
         position="bottom-right"
         autoClose={5000}

src/store/global.js

@@ -5,16 +5,16 @@ import { createContainer } from 'unstated-next';
 const useGlobalStore = () => {
   const bodySize = useSize(document.querySelector('body'));
   const [isMobile, setIsMobile] = useState(false);
-  const [isMenu, setIsMenu] = useState(false);
+  const [isHamburger, setIsHamburger] = useState(false);
   const toggleMenu = () => {
-    setIsMenu(!isMenu);
+    setIsHamburger(!isHamburger);
   };
-  const isScrollLock = isMenu && isMobile;
+  const isScrollLock = isHamburger && isMobile;
   useEffect(() => {
     const isMobile = (bodySize?.width || 1200) < 650;
     setIsMobile(isMobile);
     if (!isMobile) {
-      setIsMenu(false);
+      setIsHamburger(false);
     }
   }, [bodySize]);
   useEffect(() => {
@@ -30,7 +30,7 @@ const useGlobalStore = () => {
   return {
     bodySize,
     isMobile,
-    isMenu, toggleMenu, setIsMenu,
+    isHamburger, toggleMenu, setIsHamburger,
     isScrollLock
   };
 };