diff --git a/src/routes/ErrorRoute.js b/src/routes/ErrorRoute.js
index e059e06..922f25a 100644
--- a/src/routes/ErrorRoute.js
+++ b/src/routes/ErrorRoute.js
@@ -1,18 +1,22 @@
import { useRouteError } from "react-router-dom";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import NavBar from "../components/NavBar";
import Error from "../components/Error";
import Footer from "../components/Footer";
import DropdownContainer from "../components/DropdownContainer";
import "../assets/stylesheets/app.scss";
import "../assets/stylesheets/error.scss";
+import { useContainer } from "unstated-next";
+import GlobalStore from "../store/global";
export default function ErrorRoute() {
const error = useRouteError();
console.error(error);
-
+ const { isHamburger: hamburger, setIsHamburger: setHamburger } = useContainer(GlobalStore);
+ useEffect(() => {
+ setHamburger(false);
+ }, []);
// create state for hamburger
- const [hamburger, setHamburger] = useState(false);
// create function to toggle hamburger
const hamburgerToggle = () => {
setHamburger(!hamburger);
diff --git a/src/routes/HomeRoute.js b/src/routes/HomeRoute.js
index ff2620d..9979450 100644
--- a/src/routes/HomeRoute.js
+++ b/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 (
+
+ {isHamburger ? : null}
+
+
+
+
+
+ );
+}
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 (
-
- {this.state.hamburger ? : null}
-
-
-
-
-
+
);
}
}
diff --git a/src/store/global.js b/src/store/global.js
new file mode 100644
index 0000000..b30cf41
--- /dev/null
+++ b/src/store/global.js
@@ -0,0 +1,40 @@
+import { useSize } from 'ahooks';
+import { useEffect, useState } from 'react';
+import { createContainer } from 'unstated-next';
+
+const useGlobalStore = () => {
+ const bodySize = useSize(document.querySelector('body'));
+ const [isMobile, setIsMobile] = useState(false);
+ const [isHamburger, setIsHamburger] = useState(false);
+ const toggleMenu = () => {
+ setIsHamburger(!isHamburger);
+ };
+ const isScrollLock = isHamburger && isMobile;
+ useEffect(() => {
+ const isMobile = (bodySize?.width || 1200) < 650;
+ setIsMobile(isMobile);
+ if (!isMobile) {
+ setIsHamburger(false);
+ }
+ }, [bodySize]);
+ useEffect(() => {
+ const bodyDom = document.querySelector('body');
+ if (isScrollLock) {
+ bodyDom.style.height = '100vh';
+ bodyDom.style.overflow = 'hidden';
+ } else {
+ bodyDom.style.height = 'unset';
+ bodyDom.style.overflow = 'scroll';
+ }
+ }, [isScrollLock]);
+ return {
+ bodySize,
+ isMobile,
+ isHamburger, toggleMenu, setIsHamburger,
+ isScrollLock
+ };
+};
+
+const GlobalStore = createContainer(useGlobalStore);
+
+export default GlobalStore;