Merge pull request 'add .gitignore' (#1) from feature/add-gitignore into main

Reviewed-on: #1

.gitignore

@@ -0,0 +1 @@
+node_modules

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",
+      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
-      "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
+      "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==",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
-      "peer": true
     },
     "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==",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-      "peer": true
     },
     "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",
+      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
-      "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
+      "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==",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
-      "peer": true
     },
     "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==",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-      "peer": true
     },
     "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",

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"
   },

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%;
+    width: 100%;
-    margin-top: 10%;
+    margin-top: 45px;
   }
 
   li {
-    margin-bottom: 10%;
+    margin-bottom: 20px;
-    margin-left: 8px;
+    // 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%;
   }
 }

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 {

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;

src/components/DropdownContainer.js

@@ -1,54 +1,54 @@
-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 {
+const DropdownContainer = () => {
-
+  const container = useRef();
-  constructor(props){
+  const { isMobile, toggleMenu } = useContainer(GlobalStore);
-    super(props);
+  const toggleHamburger = () => {
-    this.container = React.createRef();
+    container.current.className = "slideOut c";
-  }
+    setTimeout(() => {
-
+      toggleMenu();
-  toggleHamburger() {
+    }, 500);
-    this.container.current.className = "slideOut c";
+  };
-    setTimeout(() => {this.props.hamburgerToggle();}
+  return (
-      , 500);
+    <nav ref={container} className={`dropdown c slideIn ${isMobile ? 'mobile' : ''}`}>
-  }
+      {!isMobile && (
-
+      <div className="header">
-  render() {
+        <label className="header__text">ITR</label>
-    return (
+        <button className="header__x" onClick={() => toggleHamburger()}>X</button>
-      <nav ref={this.container} className="c slideIn">
+      </div>)}
-        <div className="header">
+      <div className="dd">
-          <label className="header__text">ITR</label>
+        <li>
-          <button className="header__x" onClick={() => this.toggleHamburger()}>X</button>
+          <NavLink className="dd__link" to="/">
-        </div>
+            <label className="dd__link_label">Home</label>
-        <div className="dd">
+            <label className="dd__link_arrow">{">"}</label>
-          <li>
+          </NavLink>
-            <NavLink className="dd__link" to="/">
+        </li>
-              <label className="dd__link_label">Home</label>
+        <li>
-              <label className="dd__link_arrow">{">"}</label>
+          <NavLink className="dd__link" to="/about">
-            </NavLink>
+            <label className="dd__link_label">About</label>
-          </li>
+            <label className="dd__link_arrow">{">"}</label>
-          <li>
+          </NavLink>
-            <NavLink className="dd__link" to="/about">
+        </li>
-              <label className="dd__link_label">About</label>
+        <li>
-              <label className="dd__link_arrow">{">"}</label>
+          <NavLink className="dd__link" to="/projects">
-            </NavLink>
+            <label className="dd__link_label">Projects</label>
-          </li>
+            <label className="dd__link_arrow">{">"}</label>
-          <li>
+          </NavLink>
-            <NavLink className="dd__link" to="/projects">
+        </li>
-              <label className="dd__link_label">Projects</label>
+        <li>
-              <label className="dd__link_arrow">{">"}</label>
+          <NavLink className="dd__link" to="/gallery">
-            </NavLink>
+            <label className="dd__link_label">Gallery</label>
-          </li>
+            <label className="dd__link_arrow">{">"}</label>
-          <li>
+          </NavLink>
-            <NavLink className="dd__link" to="/gallery">
+        </li>
-              <label className="dd__link_label">Gallery</label>
+      </div>
-              <label className="dd__link_arrow">{">"}</label>
+    </nav>
-            </NavLink>
+  );
-          </li>
-        </div>
-      </nav>
-    );
-  }
 }
+
+export default DropdownContainer;

src/components/NavBar.js

@@ -1,52 +1,55 @@
-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 {
+const NavBar = () => {
-  constructor(props) {
+  const [navBackground, setNavBackground] = useState({ backgroundColor: "transparent" });
-    super(props);
+  const { toggleMenu, isHamburger } = useContainer(GlobalStore);
-    this.state = { navBackground: { backgroundColor: "transparent" }, hamburger: false };
+  useEffect(() => {
     document.addEventListener("scroll", (event) => {
-      if (window.scrollY < 10)
+      if (window.scrollY < 10) {
-        this.setState({ navBackground: { backgroundColor: "transparent" } });
+        setNavBackground({ backgroundColor: "transparent" });
-      else this.setState({ navBackground: { backgroundColor: "#232323" } });
+      }
+      else {
+        setNavBackground({ backgroundColor: "#232323" });
+      };
     });
-  }
+  }, []);
 
-  toggleHamburger() {
+  return (
-    this.props.hamburgerToggle();
+    <nav className="navbar" style={navBackground}>
-  }
+      <a id="logo" href="http://localhost:3000">
-
+        <h2 className="navbar__logotext">ITR</h2>
-  render() {
+      </a>
-    return (
+      <ul>
-      <nav className="navbar" style={this.state.navBackground}>
+        <li>
-        <a id="logo" href="http://localhost:3000">
+          <NavLink to="/">Home</NavLink>
-          <h2 className="navbar__logotext">ITR</h2>
+        </li>
-        </a>
+        <li>
-        <ul>
+          <NavLink to="/about">About</NavLink>
-          <li>
+        </li>
-            <NavLink to="/">Home</NavLink>
+        <li>
-          </li>
+          <NavLink to="/projects">Projects</NavLink>
-          <li>
+        </li>
-            <NavLink to="/about">About</NavLink>
+        <li>
-          </li>
+          <NavLink to="/gallery">Gallery</NavLink>
-          <li>
+        </li>
-            <NavLink to="/projects">Projects</NavLink>
+      </ul>
-          </li>
+      {/* <NavLink className="nav__login" to="/login">
-          <li>
+        Login
-            <NavLink to="/gallery">Gallery</NavLink>
+      </NavLink> */}
-          </li>
+      <div className="nav__placeholder"></div>
-        </ul>
+      <Hamburger toggled={isHamburger} toggle={toggleMenu} />
-        {/* <NavLink className="nav__login" to="/login">
+      {/* <div className="navbar__hamburger">
-          Login
+        <div className="navbar__hamburger_line"></div>
-        </NavLink> */}
+        <div className="navbar__hamburger_line"></div>
-        <div className="nav__placeholder"></div>
+        <div className="navbar__hamburger_line"></div>
-        <div className="navbar__hamburger" onClick={() => this.toggleHamburger()}>
+      </div> */}
-          <div className="navbar__hamburger_line"></div>
+    </nav>
-          <div className="navbar__hamburger_line"></div>
+  );
-          <div className="navbar__hamburger_line"></div>
-        </div>
-      </nav>
-    );
-  }
 }
+
+export default NavBar;

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();

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">
+      <Inner />
-        {this.state.hamburger ? <DropdownContainer hamburgerToggle={this.hamburgerToggle}/> : null}
-        <About></About>
-        <NavBar hamburgerToggle={this.hamburgerToggle}></NavBar>
-        <Footer></Footer>
-      </div>
     );
   }
 }

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">

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);

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">
+      <Inner />
-        {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>
     );
   }
 }

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;