feat: change menu style
This commit is contained in:
Jianqi Jin
parent
065b3d1e28
commit
d719a45b92
163
package-lock.json
generated
163
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
},
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.container = React.createRef();
|
||||
}
|
||||
|
||||
toggleHamburger() {
|
||||
this.container.current.className = "slideOut c";
|
||||
setTimeout(() => {this.props.hamburgerToggle();}
|
||||
, 500);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<nav ref={this.container} className="c slideIn">
|
||||
<div className="header">
|
||||
<label className="header__text">ITR</label>
|
||||
<button className="header__x" onClick={() => this.toggleHamburger()}>X</button>
|
||||
</div>
|
||||
<div className="dd">
|
||||
<li>
|
||||
<NavLink className="dd__link" to="/">
|
||||
<label className="dd__link_label">Home</label>
|
||||
<label className="dd__link_arrow">{">"}</label>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink className="dd__link" to="/about">
|
||||
<label className="dd__link_label">About</label>
|
||||
<label className="dd__link_arrow">{">"}</label>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink className="dd__link" to="/projects">
|
||||
<label className="dd__link_label">Projects</label>
|
||||
<label className="dd__link_arrow">{">"}</label>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink className="dd__link" to="/gallery">
|
||||
<label className="dd__link_label">Gallery</label>
|
||||
<label className="dd__link_arrow">{">"}</label>
|
||||
</NavLink>
|
||||
</li>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
const DropdownContainer = () => {
|
||||
const container = useRef();
|
||||
const { isMobile, toggleMenu } = useContainer(GlobalStore);
|
||||
const toggleHamburger = () => {
|
||||
container.current.className = "slideOut c";
|
||||
setTimeout(() => {
|
||||
toggleMenu();
|
||||
}, 500);
|
||||
};
|
||||
return (
|
||||
<nav ref={container} className={`dropdown c slideIn ${isMobile ? 'mobile' : ''}`}>
|
||||
{!isMobile && (
|
||||
<div className="header">
|
||||
<label className="header__text">ITR</label>
|
||||
<button className="header__x" onClick={() => toggleHamburger()}>X</button>
|
||||
</div>)}
|
||||
<div className="dd">
|
||||
<li>
|
||||
<NavLink className="dd__link" to="/">
|
||||
<label className="dd__link_label">Home</label>
|
||||
<label className="dd__link_arrow">{">"}</label>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink className="dd__link" to="/about">
|
||||
<label className="dd__link_label">About</label>
|
||||
<label className="dd__link_arrow">{">"}</label>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink className="dd__link" to="/projects">
|
||||
<label className="dd__link_label">Projects</label>
|
||||
<label className="dd__link_arrow">{">"}</label>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink className="dd__link" to="/gallery">
|
||||
<label className="dd__link_label">Gallery</label>
|
||||
<label className="dd__link_arrow">{">"}</label>
|
||||
</NavLink>
|
||||
</li>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default DropdownContainer;
|
||||
|
||||
@ -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 {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { navBackground: { backgroundColor: "transparent" }, hamburger: false };
|
||||
const NavBar = () => {
|
||||
const [navBackground, setNavBackground] = useState({ backgroundColor: "transparent" });
|
||||
const { toggleMenu, isMenu } = 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}>
|
||||
<a id="logo" href="http://localhost:3000">
|
||||
<h2 className="navbar__logotext">ITR</h2>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<NavLink to="/">Home</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to="/about">About</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to="/projects">Projects</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to="/gallery">Gallery</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
{/* <NavLink className="nav__login" to="/login">
|
||||
Login
|
||||
</NavLink> */}
|
||||
<div className="nav__placeholder"></div>
|
||||
<div className="navbar__hamburger" onClick={() => this.toggleHamburger()}>
|
||||
<div className="navbar__hamburger_line"></div>
|
||||
<div className="navbar__hamburger_line"></div>
|
||||
<div className="navbar__hamburger_line"></div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<nav className="navbar" style={navBackground}>
|
||||
<a id="logo" href="http://localhost:3000">
|
||||
<h2 className="navbar__logotext">ITR</h2>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<NavLink to="/">Home</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to="/about">About</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to="/projects">Projects</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to="/gallery">Gallery</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
{/* <NavLink className="nav__login" to="/login">
|
||||
Login
|
||||
</NavLink> */}
|
||||
<div className="nav__placeholder"></div>
|
||||
<Hamburger toggled={isMenu} 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> */}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default NavBar;
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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 { isMenu, setIsMenu } = useContainer(GlobalStore);
|
||||
useEffect(() => {
|
||||
setIsMenu(false);
|
||||
}, []);
|
||||
return (
|
||||
<div className="container">
|
||||
{isMenu ? <DropdownContainer hamburgerToggle={setIsMenu}/> : null}
|
||||
<About></About>
|
||||
<NavBar hamburgerToggle={setIsMenu}></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 />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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 { isMenu: hamburger, setIsMenu: setHamburger } = useContainer(GlobalStore);
|
||||
useEffect(() => {
|
||||
setHamburger(false);
|
||||
}, []);
|
||||
// create state for hamburger
|
||||
const [hamburger, setHamburger] = useState(false);
|
||||
// create function to toggle hamburger
|
||||
const hamburgerToggle = () => {
|
||||
setHamburger(!hamburger);
|
||||
|
||||
@ -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 { isMenu, setIsMenu } = useContainer(GlobalStore);
|
||||
useEffect(() => {
|
||||
setIsMenu(false);
|
||||
}, []);
|
||||
return (
|
||||
<div className="container">
|
||||
{isMenu ? <DropdownContainer hamburgerToggle={setIsMenu}/> : null}
|
||||
<Home></Home>
|
||||
<NavBar hamburgerToggle={setIsMenu}></NavBar>
|
||||
<ToastContainer
|
||||
position="bottom-right"
|
||||
autoClose={5000}
|
||||
hideProgressBar={false}
|
||||
newestOnTop={false}
|
||||
closeOnClick
|
||||
rtl={false}
|
||||
pauseOnFocusLoss
|
||||
draggable
|
||||
pauseOnHover
|
||||
theme="dark"
|
||||
/>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default class HomeRoute extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
text: "",
|
||||
hamburger: false
|
||||
};
|
||||
toast("The new ITR Webpage! 🎉");
|
||||
document.title = "ITR - Home";
|
||||
}
|
||||
|
||||
hamburgerToggle = () => {
|
||||
this.setState({ hamburger: !this.state.hamburger });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
{this.state.hamburger ? <DropdownContainer hamburgerToggle={this.hamburgerToggle}/> : null}
|
||||
<Home></Home>
|
||||
<NavBar hamburgerToggle={this.hamburgerToggle}></NavBar>
|
||||
<ToastContainer
|
||||
position="bottom-right"
|
||||
autoClose={5000}
|
||||
hideProgressBar={false}
|
||||
newestOnTop={false}
|
||||
closeOnClick
|
||||
rtl={false}
|
||||
pauseOnFocusLoss
|
||||
draggable
|
||||
pauseOnHover
|
||||
theme="dark"
|
||||
/>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
<Inner />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
40
src/store/global.js
Normal file
40
src/store/global.js
Normal 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 [isMenu, setIsMenu] = useState(false);
|
||||
const toggleMenu = () => {
|
||||
setIsMenu(!isMenu);
|
||||
};
|
||||
const isScrollLock = isMenu && isMobile;
|
||||
useEffect(() => {
|
||||
const isMobile = (bodySize?.width || 1200) < 650;
|
||||
setIsMobile(isMobile);
|
||||
if (!isMobile) {
|
||||
setIsMenu(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,
|
||||
isMenu, toggleMenu, setIsMenu,
|
||||
isScrollLock
|
||||
};
|
||||
};
|
||||
|
||||
const GlobalStore = createContainer(useGlobalStore);
|
||||
|
||||
export default GlobalStore;
|
||||
Loading…
x
Reference in New Issue
Block a user