feat: change menu style

src/routes/HomeRoute.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useEffect } from "react";
 import NavBar from "../components/NavBar";
 import DropdownContainer from "../components/DropdownContainer";
 import Home from "../components/Home";
@@ -6,42 +6,47 @@ import Footer from "../components/Footer";
 import "../assets/stylesheets/app.scss";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import { useContainer } from "unstated-next";
+import GlobalStore from "../store/global";
+
+
+const Inner = () => {
+  const { isHamburger, setIsHamburger } = useContainer(GlobalStore);
+  useEffect(() => {
+    setIsHamburger(false);
+  }, []);
+  return (
+    <div className="container">
+      {isHamburger ? <DropdownContainer hamburgerToggle={setIsHamburger}/> : null}
+      <Home></Home>
+      <NavBar hamburgerToggle={setIsHamburger}></NavBar>
+      <ToastContainer
+        position="bottom-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="dark"
+      />
+      <Footer></Footer>
+    </div>
+  );
+}
 
 export default class HomeRoute extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-      text: "",
-      hamburger: false
-    };
     toast("The new ITR Webpage! 🎉");
     document.title = "ITR - Home";
   }
 
-  hamburgerToggle = () => {
-    this.setState({ hamburger: !this.state.hamburger });
-  }
-
   render() {
     return (
-      <div className="container">
-        {this.state.hamburger ? <DropdownContainer hamburgerToggle={this.hamburgerToggle}/> : null}
-        <Home></Home>
-        <NavBar hamburgerToggle={this.hamburgerToggle}></NavBar>
-        <ToastContainer
-          position="bottom-right"
-          autoClose={5000}
-          hideProgressBar={false}
-          newestOnTop={false}
-          closeOnClick
-          rtl={false}
-          pauseOnFocusLoss
-          draggable
-          pauseOnHover
-          theme="dark"
-        />
-        <Footer></Footer>
-      </div>
+      <Inner />
     );
   }
 }