scarlett/ITR-Website
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Compare commits

base: scarlett:d719a45b928199b2fe565198abc2b4ea32661c79
Branches Tags
scarlett:main scarlett:nextjs scarlett:feat/waterfallpic scarlett:feature/add-gitignore
...
compare: scarlett:66205a43c631a681f95acad73fc77921b0bb3368
Branches Tags
scarlett:nextjs scarlett:main scarlett:feat/waterfallpic scarlett:feature/add-gitignore

1 Commits
d719a45b92 ... 66205a43c6

Author SHA1 Message Date
Jianqi Jin
66205a43c6 feat: change menu style 2023-09-16 21:32:52 -05:00
13 changed files with 395 additions and 169 deletions
Expand all files Collapse all files

163
package-lock.json generated
View File

@@ -11,8 +11,10 @@
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"ahooks": "^3.7.8",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^1.3.2", "axios": "^1.3.2",
"hamburger-react": "^2.5.0",
"nodemon": "^2.0.20", "nodemon": "^2.0.20",
"nth-check": "^2.1.1", "nth-check": "^2.1.1",
"react": "^18.2.0", "react": "^18.2.0",
@@ -24,6 +26,7 @@
"react-spring": "^9.6.1", "react-spring": "^9.6.1",
"react-toastify": "^9.1.1", "react-toastify": "^9.1.1",
"sass": "^1.58.0", "sass": "^1.58.0",
"unstated-next": "^1.1.0",
"uuid": "^9.0.0", "uuid": "^9.0.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
} }
@@ -1970,16 +1973,21 @@
} }
}, },
"node_modules/@babel/runtime": { "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": { "dependencies": {
"regenerator-runtime": "^0.13.11" "regenerator-runtime": "^0.14.0"
}, },
"engines": { "engines": {
"node": ">=6.9.0" "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": { "node_modules/@babel/template": {
"version": "7.20.7", "version": "7.20.7",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
@@ -6371,6 +6379,11 @@
"node": ">=8" "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": { "node_modules/@types/json-schema": {
"version": "7.0.11", "version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -7130,6 +7143,34 @@
"node": ">= 6.0.0" "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": { "node_modules/ajv": {
"version": "6.12.6", "version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -9418,8 +9459,7 @@
"node_modules/dayjs": { "node_modules/dayjs": {
"version": "1.11.7", "version": "1.11.7",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
"integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==", "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
"peer": true
}, },
"node_modules/debounce": { "node_modules/debounce": {
"version": "1.2.1", "version": "1.2.1",
@@ -11970,6 +12010,14 @@
"url": "https://github.com/sponsors/sindresorhus" "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": { "node_modules/handle-thing": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -12564,6 +12612,11 @@
"node": ">= 0.4" "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": { "node_modules/invariant": {
"version": "2.2.4", "version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -15210,6 +15263,11 @@
"@sideway/pinpoint": "^2.0.0" "@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": { "node_modules/js-sdsl": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
@@ -20859,8 +20917,7 @@
"node_modules/resize-observer-polyfill": { "node_modules/resize-observer-polyfill": {
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", "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": { "node_modules/resolve": {
"version": "1.22.1", "version": "1.22.1",
@@ -21257,6 +21314,17 @@
"url": "https://opencollective.com/webpack" "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": { "node_modules/select-hose": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -23155,6 +23223,11 @@
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
"peer": true "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": { "node_modules/upath": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz", "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
@@ -25586,11 +25659,18 @@
} }
}, },
"@babel/runtime": { "@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": { "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": { "@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": { "@types/json-schema": {
"version": "7.0.11", "version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -29400,6 +29485,28 @@
"debug": "4" "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": { "ajv": {
"version": "6.12.6", "version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -31092,8 +31199,7 @@
"dayjs": { "dayjs": {
"version": "1.11.7", "version": "1.11.7",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
"integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==", "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
"peer": true
}, },
"debounce": { "debounce": {
"version": "1.2.1", "version": "1.2.1",
@@ -32978,6 +33084,12 @@
"duplexer": "^0.1.2" "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": { "handle-thing": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -33409,6 +33521,11 @@
"side-channel": "^1.0.4" "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": { "invariant": {
"version": "2.2.4", "version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -35317,6 +35434,11 @@
"@sideway/pinpoint": "^2.0.0" "@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": { "js-sdsl": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
@@ -39471,8 +39593,7 @@
"resize-observer-polyfill": { "resize-observer-polyfill": {
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==", "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
"peer": true
}, },
"resolve": { "resolve": {
"version": "1.22.1", "version": "1.22.1",
@@ -39719,6 +39840,11 @@
"ajv-keywords": "^3.5.2" "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": { "select-hose": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", "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": { "upath": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz", "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",

3
package.json
View File

@@ -6,8 +6,10 @@
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"ahooks": "^3.7.8",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^1.3.2", "axios": "^1.3.2",
"hamburger-react": "^2.5.0",
"nodemon": "^2.0.20", "nodemon": "^2.0.20",
"nth-check": "^2.1.1", "nth-check": "^2.1.1",
"react": "^18.2.0", "react": "^18.2.0",
@@ -19,6 +21,7 @@
"react-spring": "^9.6.1", "react-spring": "^9.6.1",
"react-toastify": "^9.1.1", "react-toastify": "^9.1.1",
"sass": "^1.58.0", "sass": "^1.58.0",
"unstated-next": "^1.1.0",
"uuid": "^9.0.0", "uuid": "^9.0.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },

38
src/assets/stylesheets/dropdown.scss
View File

@@ -8,6 +8,18 @@
src: url(../font/LeagueSpartan-Medium.ttf); 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) { @media screen and (max-width: 650px) {
.c { .c {
position: fixed; position: fixed;
@@ -22,22 +34,28 @@
// animation: slide .6s ease; // animation: slide .6s ease;
// animation-iteration-count: 1; // animation-iteration-count: 1;
} }
.home__content__info {
.c {
padding: 0;
width: 100%;
}
}
.dd { .dd {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 95%; width: 100%;
margin-top: 10%; margin-top: 45px;
} }
li { li {
margin-bottom: 10%; margin-bottom: 20px;
margin-left: 8px; // margin-left: 8px;
} }
.dd__link { .dd__link {
color: white; color: white;
font-size: 40px; font-size: 24px;
padding: 0; padding: 0;
width: 100%; width: 100%;
display: flex; display: flex;
@@ -47,12 +65,16 @@
position: relative; position: relative;
width: 90%; width: 90%;
cursor: pointer; cursor: pointer;
line-height: 33px;
height: 33px;
} }
.dd__link_arrow { .dd__link_arrow {
text-align: center; text-align: center;
color: white; color: white;
padding-top: 7px; // padding-top: 7px;
height: 33px;
line-height: 33px;
width: 10%; width: 10%;
font-size: 30px; font-size: 30px;
cursor: pointer; cursor: pointer;
@@ -103,7 +125,7 @@
@keyframes slideIn { @keyframes slideIn {
0% { 0% {
margin-top: 100vh; margin-top: -100vh;
opacity: 0%; opacity: 0%;
} }
100% { 100% {
@@ -118,7 +140,7 @@
opacity: 100%; opacity: 100%;
} }
100% { 100% {
margin-top: 100vh; margin-top: -100vh;
opacity: 0%; opacity: 0%;
} }
} }

6
src/assets/stylesheets/home.scss
View File

@@ -77,6 +77,12 @@
z-index: 0; z-index: 0;
} }
.dropdown {
position: fixed;
z-index: 999;
background-color: #232323;
}
@media screen and (max-width: 650px) { @media screen and (max-width: 650px) {
// Phones // Phones
.home__content__panel__title { .home__content__panel__title {

8
src/assets/stylesheets/navbar.scss
View File

@@ -170,6 +170,10 @@ li a:hover {
display: none; display: none;
} }
.hamburger-react {
display: none;
}
@media screen and (max-width: 912px) { @media screen and (max-width: 912px) {
// Tablets // Tablets
} }
@@ -185,6 +189,10 @@ li a:hover {
display: none; display: none;
} }
.hamburger-react {
color: #fff;
display: block;
}
.navbar__hamburger { .navbar__hamburger {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

38
src/components/DropdownContainer.js
View File

@@ -1,27 +1,26 @@
import React, { Component } from "react"; import React, { useEffect, useRef } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import "../assets/stylesheets/dropdown.scss"; 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();}
, 500);
}
render() {
return ( return (
<nav ref={this.container} className="c slideIn"> <nav ref={container} className={`dropdown c slideIn ${isMobile ? 'mobile' : ''}`}>
{!isMobile && (
<div className="header"> <div className="header">
<label className="header__text">ITR</label> <label className="header__text">ITR</label>
<button className="header__x" onClick={() => this.toggleHamburger()}>X</button> <button className="header__x" onClick={() => toggleHamburger()}>X</button>
</div> </div>)}
<div className="dd"> <div className="dd">
<li> <li>
<NavLink className="dd__link" to="/"> <NavLink className="dd__link" to="/">
@@ -51,4 +50,5 @@ export default class DropdownContainer extends Component {
</nav> </nav>
); );
} }
}
export default DropdownContainer;

39
src/components/NavBar.js
View File

@@ -1,25 +1,26 @@
import React, { Component } from "react"; import React, { Component, useEffect, useState } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import "../assets/stylesheets/navbar.scss"; 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) => { 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() {
this.props.hamburgerToggle();
}
render() {
return ( return (
<nav className="navbar" style={this.state.navBackground}> <nav className="navbar" style={navBackground}>
<a id="logo" href="http://localhost:3000"> <a id="logo" href="http://localhost:3000">
<h2 className="navbar__logotext">ITR</h2> <h2 className="navbar__logotext">ITR</h2>
</a> </a>
@@ -41,12 +42,14 @@ export default class NavBar extends Component {
Login Login
</NavLink> */} </NavLink> */}
<div className="nav__placeholder"></div> <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 className="navbar__hamburger_line"></div>
<div className="navbar__hamburger_line"></div> <div className="navbar__hamburger_line"></div>
</div> </div> */}
</nav> </nav>
); );
} }
}
export default NavBar;

5
src/index.js
View File

@@ -6,6 +6,7 @@ import AwardsRoute from "./routes/AwardsRoute";
import reportWebVitals from "./reportWebVitals"; import reportWebVitals from "./reportWebVitals";
import { createBrowserRouter, RouterProvider } from "react-router-dom"; import { createBrowserRouter, RouterProvider } from "react-router-dom";
import ErrorRoute from "./routes/ErrorRoute"; import ErrorRoute from "./routes/ErrorRoute";
import GlobalStore from "./store/global";
const root = ReactDOM.createRoot(document.getElementById("root")); 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(); reportWebVitals();

38
src/routes/AboutRoute.js
View File

@@ -1,31 +1,37 @@
import React, { Component } from "react"; import React, { Component, useEffect } from "react";
import NavBar from "../components/NavBar"; import NavBar from "../components/NavBar";
import About from "../components/About"; import About from "../components/About";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
import DropdownContainer from "../components/DropdownContainer"; import DropdownContainer from "../components/DropdownContainer";
import "../assets/stylesheets/app.scss"; import "../assets/stylesheets/app.scss";
import { useContainer } from "unstated-next";
import GlobalStore from "../store/global";
export default class AboutRoute extends Component {
constructor(props) {
super(props);
this.state = {
hamburger: false
};
document.title = "ITR - About";
}
hamburgerToggle = () => { const Inner = () => {
this.setState({ hamburger: !this.state.hamburger }); const { isHamburger, setIsHamburger } = useContainer(GlobalStore);
} useEffect(() => {
setIsHamburger(false);
render() { }, []);
return ( return (
<div className="container"> <div className="container">
{this.state.hamburger ? <DropdownContainer hamburgerToggle={this.hamburgerToggle}/> : null} {isHamburger ? <DropdownContainer hamburgerToggle={setIsHamburger}/> : null}
<About></About> <About></About>
<NavBar hamburgerToggle={this.hamburgerToggle}></NavBar> <NavBar hamburgerToggle={setIsHamburger}></NavBar>
<Footer></Footer> <Footer></Footer>
</div> </div>
); );
} }
export default class AboutRoute extends Component {
constructor(props) {
super(props);
document.title = "ITR - About";
}
render() {
return (
<Inner />
);
}
} }

5
src/routes/AwardsRoute.js
View File

@@ -2,7 +2,6 @@ import React, { Component } from "react";
import NavBar from "../components/NavBar"; import NavBar from "../components/NavBar";
import Awards from "../components/Awards"; import Awards from "../components/Awards";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
import DropdownContainer from "../components/DropdownContainer";
import "../assets/stylesheets/app.scss"; import "../assets/stylesheets/app.scss";
export default class AboutRoute extends Component { export default class AboutRoute extends Component {
@@ -11,10 +10,6 @@ export default class AboutRoute extends Component {
document.title = "ITR - Awards"; document.title = "ITR - Awards";
} }
hamburgerToggle = () => {
this.setState({ hamburger: !this.state.hamburger });
}
render() { render() {
return ( return (
<div className="container"> <div className="container">

10
src/routes/ErrorRoute.js
View File

@@ -1,18 +1,22 @@
import { useRouteError } from "react-router-dom"; import { useRouteError } from "react-router-dom";
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import NavBar from "../components/NavBar"; import NavBar from "../components/NavBar";
import Error from "../components/Error"; import Error from "../components/Error";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
import DropdownContainer from "../components/DropdownContainer"; import DropdownContainer from "../components/DropdownContainer";
import "../assets/stylesheets/app.scss"; import "../assets/stylesheets/app.scss";
import "../assets/stylesheets/error.scss"; import "../assets/stylesheets/error.scss";
import { useContainer } from "unstated-next";
import GlobalStore from "../store/global";
export default function ErrorRoute() { export default function ErrorRoute() {
const error = useRouteError(); const error = useRouteError();
console.error(error); console.error(error);
const { isHamburger: hamburger, setIsHamburger: setHamburger } = useContainer(GlobalStore);
useEffect(() => {
setHamburger(false);
}, []);
// create state for hamburger // create state for hamburger
const [hamburger, setHamburger] = useState(false);
// create function to toggle hamburger // create function to toggle hamburger
const hamburgerToggle = () => { const hamburgerToggle = () => {
setHamburger(!hamburger); setHamburger(!hamburger);

41
src/routes/HomeRoute.js
View File

@@ -1,4 +1,4 @@
import React, { Component } from "react"; import React, { Component, useEffect } from "react";
import NavBar from "../components/NavBar"; import NavBar from "../components/NavBar";
import DropdownContainer from "../components/DropdownContainer"; import DropdownContainer from "../components/DropdownContainer";
import Home from "../components/Home"; import Home from "../components/Home";
@@ -6,28 +6,20 @@ import Footer from "../components/Footer";
import "../assets/stylesheets/app.scss"; import "../assets/stylesheets/app.scss";
import { ToastContainer, toast } from "react-toastify"; import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; 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 = () => { const Inner = () => {
this.setState({ hamburger: !this.state.hamburger }); const { isHamburger, setIsHamburger } = useContainer(GlobalStore);
} useEffect(() => {
setIsHamburger(false);
render() { }, []);
return ( return (
<div className="container"> <div className="container">
{this.state.hamburger ? <DropdownContainer hamburgerToggle={this.hamburgerToggle}/> : null} {isHamburger ? <DropdownContainer hamburgerToggle={setIsHamburger}/> : null}
<Home></Home> <Home></Home>
<NavBar hamburgerToggle={this.hamburgerToggle}></NavBar> <NavBar hamburgerToggle={setIsHamburger}></NavBar>
<ToastContainer <ToastContainer
position="bottom-right" position="bottom-right"
autoClose={5000} autoClose={5000}
@@ -44,4 +36,17 @@ export default class HomeRoute extends Component {
</div> </div>
); );
} }
export default class HomeRoute extends Component {
constructor(props) {
super(props);
toast("The new ITR Webpage! 🎉");
document.title = "ITR - Home";
}
render() {
return (
<Inner />
);
}
} }

40
src/store/global.js Normal file
View File

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