feat: change menu style

2023-09-16 21:32:52 -05:00
13 changed files with 395 additions and 169 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,10 @@
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
+        "ahooks": "^3.7.8",
        "animate.css": "^4.1.1",
        "axios": "^1.3.2",
+        "hamburger-react": "^2.5.0",
        "nodemon": "^2.0.20",
        "nth-check": "^2.1.1",
        "react": "^18.2.0",
@@ -24,6 +26,7 @@
        "react-spring": "^9.6.1",
        "react-toastify": "^9.1.1",
        "sass": "^1.58.0",
+        "unstated-next": "^1.1.0",
        "uuid": "^9.0.0",
        "web-vitals": "^2.1.4"
      }
@@ -1970,16 +1973,21 @@
      }
    },
    "node_modules/@babel/runtime": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
-      "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
+      "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
      "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
      },
      "engines": {
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
    "node_modules/@babel/template": {
      "version": "7.20.7",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
@@ -6371,6 +6379,11 @@
        "node": ">=8"
      }
    },
+    "node_modules/@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
    "node_modules/@types/json-schema": {
      "version": "7.0.11",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -7130,6 +7143,34 @@
        "node": ">= 6.0.0"
      }
    },
+    "node_modules/ahooks": {
+      "version": "3.7.8",
+      "resolved": "https://registry.npmjs.org/ahooks/-/ahooks-3.7.8.tgz",
+      "integrity": "sha512-e/NMlQWoCjaUtncNFIZk3FG1ImSkV/JhScQSkTqnftakRwdfZWSw6zzoWSG9OMYqPNs2MguDYBUFFC6THelWXA==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@types/js-cookie": "^2.x.x",
+        "ahooks-v3-count": "^1.0.0",
+        "dayjs": "^1.9.1",
+        "intersection-observer": "^0.12.0",
+        "js-cookie": "^2.x.x",
+        "lodash": "^4.17.21",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.0.0",
+        "tslib": "^2.4.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/ahooks-v3-count": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz",
+      "integrity": "sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ=="
+    },
    "node_modules/ajv": {
      "version": "6.12.6",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -9418,8 +9459,7 @@
    "node_modules/dayjs": {
      "version": "1.11.7",
      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
-      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==",
-      "peer": true
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
    },
    "node_modules/debounce": {
      "version": "1.2.1",
@@ -11970,6 +12010,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/hamburger-react": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/hamburger-react/-/hamburger-react-2.5.0.tgz",
+      "integrity": "sha512-5GSXe+ucxTPJ0SkhIsPQ/PRDweZPIKya1lfahAuExx31SdheeUA4uOPfQIAirbKona8hvo79VDr5LJQzPXsdpw==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18"
+      }
+    },
    "node_modules/handle-thing": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -12564,6 +12612,11 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/intersection-observer": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.2.tgz",
+      "integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg=="
+    },
    "node_modules/invariant": {
      "version": "2.2.4",
      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -15210,6 +15263,11 @@
        "@sideway/pinpoint": "^2.0.0"
      }
    },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
    "node_modules/js-sdsl": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
@@ -20859,8 +20917,7 @@
    "node_modules/resize-observer-polyfill": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
-      "peer": true
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
    },
    "node_modules/resolve": {
      "version": "1.22.1",
@@ -21257,6 +21314,17 @@
        "url": "https://opencollective.com/webpack"
      }
    },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/select-hose": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -23155,6 +23223,11 @@
      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
      "peer": true
    },
+    "node_modules/unstated-next": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unstated-next/-/unstated-next-1.1.0.tgz",
+      "integrity": "sha512-AAn47ZncPvgBGOvMcn8tSRxsrqwf2VdAPxLASTuLJvZt4rhKfDvUkmYZLGfclImSfTVMv7tF4ynaVxin0JjDCA=="
+    },
    "node_modules/upath": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
@@ -25586,11 +25659,18 @@
      }
    },
    "@babel/runtime": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
-      "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
+      "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
      "requires": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.14.0",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+          "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+        }
      }
    },
    "@babel/template": {
@@ -28803,6 +28883,11 @@
        }
      }
    },
+    "@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
    "@types/json-schema": {
      "version": "7.0.11",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -29400,6 +29485,28 @@
        "debug": "4"
      }
    },
+    "ahooks": {
+      "version": "3.7.8",
+      "resolved": "https://registry.npmjs.org/ahooks/-/ahooks-3.7.8.tgz",
+      "integrity": "sha512-e/NMlQWoCjaUtncNFIZk3FG1ImSkV/JhScQSkTqnftakRwdfZWSw6zzoWSG9OMYqPNs2MguDYBUFFC6THelWXA==",
+      "requires": {
+        "@babel/runtime": "^7.21.0",
+        "@types/js-cookie": "^2.x.x",
+        "ahooks-v3-count": "^1.0.0",
+        "dayjs": "^1.9.1",
+        "intersection-observer": "^0.12.0",
+        "js-cookie": "^2.x.x",
+        "lodash": "^4.17.21",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.0.0",
+        "tslib": "^2.4.1"
+      }
+    },
+    "ahooks-v3-count": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz",
+      "integrity": "sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ=="
+    },
    "ajv": {
      "version": "6.12.6",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -31092,8 +31199,7 @@
    "dayjs": {
      "version": "1.11.7",
      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
-      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==",
-      "peer": true
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
    },
    "debounce": {
      "version": "1.2.1",
@@ -32978,6 +33084,12 @@
        "duplexer": "^0.1.2"
      }
    },
+    "hamburger-react": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/hamburger-react/-/hamburger-react-2.5.0.tgz",
+      "integrity": "sha512-5GSXe+ucxTPJ0SkhIsPQ/PRDweZPIKya1lfahAuExx31SdheeUA4uOPfQIAirbKona8hvo79VDr5LJQzPXsdpw==",
+      "requires": {}
+    },
    "handle-thing": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -33409,6 +33521,11 @@
        "side-channel": "^1.0.4"
      }
    },
+    "intersection-observer": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.2.tgz",
+      "integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg=="
+    },
    "invariant": {
      "version": "2.2.4",
      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -35317,6 +35434,11 @@
        "@sideway/pinpoint": "^2.0.0"
      }
    },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
    "js-sdsl": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
@@ -39471,8 +39593,7 @@
    "resize-observer-polyfill": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
-      "peer": true
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
    },
    "resolve": {
      "version": "1.22.1",
@@ -39719,6 +39840,11 @@
        "ajv-keywords": "^3.5.2"
      }
    },
+    "screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="
+    },
    "select-hose": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -41223,6 +41349,11 @@
        }
      }
    },
+    "unstated-next": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unstated-next/-/unstated-next-1.1.0.tgz",
+      "integrity": "sha512-AAn47ZncPvgBGOvMcn8tSRxsrqwf2VdAPxLASTuLJvZt4rhKfDvUkmYZLGfclImSfTVMv7tF4ynaVxin0JjDCA=="
+    },
    "upath": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
--- a/package.json
+++ b/package.json
@@ -6,8 +6,10 @@
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
+    "ahooks": "^3.7.8",
    "animate.css": "^4.1.1",
    "axios": "^1.3.2",
+    "hamburger-react": "^2.5.0",
    "nodemon": "^2.0.20",
    "nth-check": "^2.1.1",
    "react": "^18.2.0",
@@ -19,6 +21,7 @@
    "react-spring": "^9.6.1",
    "react-toastify": "^9.1.1",
    "sass": "^1.58.0",
+    "unstated-next": "^1.1.0",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4"
  },
--- a/src/assets/stylesheets/dropdown.scss
+++ b/src/assets/stylesheets/dropdown.scss
@@ -8,6 +8,18 @@
  src: url(../font/LeagueSpartan-Medium.ttf);
 }

+.mobile {
+  position: fixed!important;
+  padding: 20px!important;
+  padding: 20px!important;
+  background-color: rgb(35, 35, 35)!important;
+  z-index: 999!important;
+  width: 100%!important;
+  box-sizing: border-box;
+  height: 100vh!important;
+  justify-content: start!important;
+}
+
@media screen and (max-width: 650px) {
  .c {
    position: fixed;
@@ -22,22 +34,28 @@
    // animation: slide .6s ease;
    // animation-iteration-count: 1;
  }
+  .home__content__info {
+    .c {
+      padding: 0;
+      width: 100%;
+    }
+  }

  .dd {
    display: flex;
    flex-direction: column;
-    width: 95%;
-    margin-top: 10%;
+    width: 100%;
+    margin-top: 45px;
  }

  li {
-    margin-bottom: 10%;
-    margin-left: 8px;
+    margin-bottom: 20px;
+    // margin-left: 8px;
  }

  .dd__link {
    color: white;
-    font-size: 40px;
+    font-size: 24px;
    padding: 0;
    width: 100%;
    display: flex;
@@ -47,12 +65,16 @@
    position: relative;
    width: 90%;
    cursor: pointer;
+    line-height: 33px;
+    height: 33px;
  }

  .dd__link_arrow {
    text-align: center;
    color: white;
-    padding-top: 7px;
+    // padding-top: 7px;
+    height: 33px;
+    line-height: 33px;
    width: 10%;
    font-size: 30px;
    cursor: pointer;
@@ -103,7 +125,7 @@

@keyframes slideIn {
  0% {
-    margin-top: 100vh;
+    margin-top: -100vh;
    opacity: 0%;
  }
  100% {
@@ -118,7 +140,7 @@
    opacity: 100%;
  }
  100% {
-    margin-top: 100vh;
+    margin-top: -100vh;
    opacity: 0%;
  }
 }
--- a/src/assets/stylesheets/home.scss
+++ b/src/assets/stylesheets/home.scss
@@ -77,6 +77,12 @@
  z-index: 0;
 }

+.dropdown {
+  position: fixed;
+  z-index: 999;
+  background-color: #232323;
+}
+
@media screen and (max-width: 650px) {
  // Phones
  .home__content__panel__title {
--- a/src/assets/stylesheets/navbar.scss
+++ b/src/assets/stylesheets/navbar.scss
@@ -170,6 +170,10 @@ li a:hover {
  display: none;
 }

+.hamburger-react {
+  display: none;
+}
+
@media screen and (max-width: 912px) {
  // Tablets
 }
@@ -185,6 +189,10 @@ li a:hover {
    display: none;
  }

+  .hamburger-react {
+    color: #fff;
+    display: block;
+  }
  .navbar__hamburger {
    display: flex;
    flex-direction: column;
--- a/src/components/DropdownContainer.js
+++ b/src/components/DropdownContainer.js
@@ -1,27 +1,26 @@
-import React, { Component } from "react";
+import React, { useEffect, useRef } from "react";
 import { NavLink } from "react-router-dom";
 import "../assets/stylesheets/dropdown.scss";
+import { useSize } from "ahooks";
+import { useContainer } from "unstated-next";
+import GlobalStore from "../store/global";

-export default class DropdownContainer extends Component {
-
-  constructor(props){
-    super(props);
-    this.container = React.createRef();
-  }
-
-  toggleHamburger() {
-    this.container.current.className = "slideOut c";
-    setTimeout(() => {this.props.hamburgerToggle();}
-      , 500);
-  }
-
-  render() {
+const DropdownContainer = () => {
+  const container = useRef();
+  const { isMobile, toggleMenu } = useContainer(GlobalStore);
+  const toggleHamburger = () => {
+    container.current.className = "slideOut c";
+    setTimeout(() => {
+      toggleMenu();
+    }, 500);
+  };
  return (
-      <nav ref={this.container} className="c slideIn">
+    <nav ref={container} className={`dropdown c slideIn ${isMobile ? 'mobile' : ''}`}>
+      {!isMobile && (
      <div className="header">
        <label className="header__text">ITR</label>
-          <button className="header__x" onClick={() => this.toggleHamburger()}>X</button>
-        </div>
+        <button className="header__x" onClick={() => toggleHamburger()}>X</button>
+      </div>)}
      <div className="dd">
        <li>
          <NavLink className="dd__link" to="/">
@@ -50,5 +49,6 @@ export default class DropdownContainer extends Component {
      </div>
    </nav>
  );
-  }
 }
+
+export default DropdownContainer;
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -1,25 +1,26 @@
-import React, { Component } from "react";
+import React, { Component, useEffect, useState } from "react";
 import { NavLink } from "react-router-dom";
 import "../assets/stylesheets/navbar.scss";
+import { useContainer } from "unstated-next";
+import GlobalStore from "../store/global";
+import Hamburger from "hamburger-react";

-export default class NavBar extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { navBackground: { backgroundColor: "transparent" }, hamburger: false };
+const NavBar = () => {
+  const [navBackground, setNavBackground] = useState({ backgroundColor: "transparent" });
+  const { toggleMenu, isHamburger } = useContainer(GlobalStore);
+  useEffect(() => {
    document.addEventListener("scroll", (event) => {
-      if (window.scrollY < 10)
-        this.setState({ navBackground: { backgroundColor: "transparent" } });
-      else this.setState({ navBackground: { backgroundColor: "#232323" } });
+      if (window.scrollY < 10) {
+        setNavBackground({ backgroundColor: "transparent" });
+      }
+      else {
+        setNavBackground({ backgroundColor: "#232323" });
+      };
    });
-  }
+  }, []);

-  toggleHamburger() {
-    this.props.hamburgerToggle();
-  }
-
-  render() {
  return (
-      <nav className="navbar" style={this.state.navBackground}>
+    <nav className="navbar" style={navBackground}>
      <a id="logo" href="http://localhost:3000">
        <h2 className="navbar__logotext">ITR</h2>
      </a>
@@ -41,12 +42,14 @@ export default class NavBar extends Component {
        Login
      </NavLink> */}
      <div className="nav__placeholder"></div>
-        <div className="navbar__hamburger" onClick={() => this.toggleHamburger()}>
+      <Hamburger toggled={isHamburger} toggle={toggleMenu} />
+      {/* <div className="navbar__hamburger">
        <div className="navbar__hamburger_line"></div>
        <div className="navbar__hamburger_line"></div>
        <div className="navbar__hamburger_line"></div>
-        </div>
+      </div> */}
    </nav>
  );
-  }
 }
+
+export default NavBar;
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,7 @@ import AwardsRoute from "./routes/AwardsRoute";
 import reportWebVitals from "./reportWebVitals";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import ErrorRoute from "./routes/ErrorRoute";
+import GlobalStore from "./store/global";

 const root = ReactDOM.createRoot(document.getElementById("root"));

@@ -27,6 +28,8 @@ const router = createBrowserRouter([
  }
 ]);

-root.render(<RouterProvider router={router}></RouterProvider>);
+root.render(<GlobalStore.Provider>
+  <RouterProvider router={router}></RouterProvider>
+</GlobalStore.Provider>);

 reportWebVitals();
--- a/src/routes/AboutRoute.js
+++ b/src/routes/AboutRoute.js
@@ -1,31 +1,37 @@
-import React, { Component } from "react";
+import React, { Component, useEffect } from "react";
 import NavBar from "../components/NavBar";
 import About from "../components/About";
 import Footer from "../components/Footer";
 import DropdownContainer from "../components/DropdownContainer";
 import "../assets/stylesheets/app.scss";
+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}
+      <About></About>
+      <NavBar hamburgerToggle={setIsHamburger}></NavBar>
+      <Footer></Footer>
+    </div>
+  );
+}

 export default class AboutRoute extends Component {
  constructor(props) {
    super(props);
-    this.state = {
-      hamburger: false
-    };
    document.title = "ITR - About";
  }

-  hamburgerToggle = () => {
-    this.setState({ hamburger: !this.state.hamburger });
-  }
-
  render() {
    return (
-      <div className="container">
-        {this.state.hamburger ? <DropdownContainer hamburgerToggle={this.hamburgerToggle}/> : null}
-        <About></About>
-        <NavBar hamburgerToggle={this.hamburgerToggle}></NavBar>
-        <Footer></Footer>
-      </div>
+      <Inner />
    );
  }
 }
--- a/src/routes/AwardsRoute.js
+++ b/src/routes/AwardsRoute.js
@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import NavBar from "../components/NavBar";
 import Awards from "../components/Awards";
 import Footer from "../components/Footer";
-import DropdownContainer from "../components/DropdownContainer";
 import "../assets/stylesheets/app.scss";

 export default class AboutRoute extends Component {
@@ -11,10 +10,6 @@ export default class AboutRoute extends Component {
    document.title = "ITR - Awards";
  }

-  hamburgerToggle = () => {
-    this.setState({ hamburger: !this.state.hamburger });
-  }
-
  render() {
    return (
      <div className="container">
--- 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);
--- 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,28 +6,20 @@ 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";

-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() {
+const Inner = () => {
+  const { isHamburger, setIsHamburger } = useContainer(GlobalStore);
+  useEffect(() => {
+    setIsHamburger(false);
+  }, []);
  return (
    <div className="container">
-        {this.state.hamburger ? <DropdownContainer hamburgerToggle={this.hamburgerToggle}/> : null}
+      {isHamburger ? <DropdownContainer hamburgerToggle={setIsHamburger}/> : null}
      <Home></Home>
-        <NavBar hamburgerToggle={this.hamburgerToggle}></NavBar>
+      <NavBar hamburgerToggle={setIsHamburger}></NavBar>
      <ToastContainer
        position="bottom-right"
        autoClose={5000}
@@ -43,5 +35,18 @@ export default class HomeRoute extends Component {
      <Footer></Footer>
    </div>
  );
+}
+
+export default class HomeRoute extends Component {
+  constructor(props) {
+    super(props);
+    toast("The new ITR Webpage! 🎉");
+    document.title = "ITR - Home";
+  }
+
+  render() {
+    return (
+      <Inner />
+    );
  }
 }
--- a/src/store/global.js
+++ 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;