From 50cd18a926f405feb10e224aa5aa3a1934b4e93e Mon Sep 17 00:00:00 2001 From: Aid19801 Date: Fri, 12 Nov 2021 16:14:37 +0000 Subject: [PATCH] Add a Mobile Nav to the Network Explorer (#895) * desktop onMouseEnter and leave handlers added * clicking nav option closes drawer * All AC met * removed dead bool * added hamburger to AppBar for mobile users small refactor * nuts and bolts working needs a lot of tidying though * Functionally complete. * change hardcode colors to theming * UI theme and border changes * bug fix removed collapse nav flicker * dead code * resetting drawer to closed onload * removal of hardcoded color * made null functions into optional props * Nested sx styling not global * paperprops now working * fixed breaking changes for DataGrid * linting fix * linting fix Co-authored-by: Aid Thompson --- explorer/package-lock.json | 232 +++++++------- explorer/package.json | 2 +- explorer/src/App.tsx | 25 +- explorer/src/components/MobileNav.tsx | 169 ++++++++++ explorer/src/components/Nav.tsx | 293 ++++++++++-------- .../src/components/Universal-DataGrid.tsx | 11 +- explorer/src/context/main.tsx | 30 +- explorer/src/context/nav.tsx | 56 ++++ explorer/src/icons/MobileDrawerClose.tsx | 16 + explorer/src/styles.css | 9 +- explorer/src/theme/mui-theme.d.ts | 1 + explorer/src/theme/theme.ts | 1 + 12 files changed, 576 insertions(+), 269 deletions(-) create mode 100644 explorer/src/components/MobileNav.tsx create mode 100644 explorer/src/context/nav.tsx create mode 100644 explorer/src/icons/MobileDrawerClose.tsx diff --git a/explorer/package-lock.json b/explorer/package-lock.json index ae5a139d2a..058a29c8b3 100644 --- a/explorer/package-lock.json +++ b/explorer/package-lock.json @@ -7,6 +7,7 @@ "": { "name": "@nym/network-explorer", "version": "1.0.0", + "license": "Apache-2.0", "dependencies": { "@cosmjs/math": "^0.26.2", "@emotion/react": "^11.4.1", @@ -15,7 +16,7 @@ "@mui/material": "^5.0.1", "@mui/styles": "^5.0.1", "@mui/system": "^5.0.1", - "@mui/x-data-grid": "^5.0.0-beta.2", + "@mui/x-data-grid": "^5.0.0-beta.5", "@nymproject/nym-validator-client": "^0.18.0", "d3-scale": "^4.0.0", "date-fns": "^2.24.0", @@ -519,9 +520,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz", - "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==", + "version": "7.16.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz", + "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==", "dependencies": { "regenerator-runtime": "^0.13.4" }, @@ -2228,13 +2229,14 @@ } }, "node_modules/@mui/core": { - "version": "5.0.0-alpha.48", - "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.48.tgz", - "integrity": "sha512-H/QQwKsr2EqPAnP35DGDpWihk5BOFYGhO52rIHb3XKOfoUjDCrCHBy2kvr3dLWJDmJXr/QzYj3AX10n5XzlaMg==", + "version": "5.0.0-alpha.54", + "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.54.tgz", + "integrity": "sha512-8TxdHqDdSb6wjhsnpE5n7qtkFKDG3PUSlVY0gR3VcdsHXscUY13l3VbMQW1brI4D/R9zx5VYmxIHWaHFgw4RtA==", "dependencies": { - "@babel/runtime": "^7.15.4", + "@babel/runtime": "^7.16.0", "@emotion/is-prop-valid": "^1.1.0", - "@mui/utils": "^5.0.1", + "@mui/utils": "^5.1.0", + "@popperjs/core": "^2.4.4", "clsx": "^1.1.1", "prop-types": "^15.7.2", "react-is": "^17.0.2" @@ -2275,17 +2277,16 @@ } }, "node_modules/@mui/material": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.1.tgz", - "integrity": "sha512-+/JJzRcORUf5MiZnzuqsPFRgxm3/0CUi1wE97ZQ2y7r+EnDVsjJLcjAH9Q9GY3k9zkPIpYb9Hig/+HT6AGZRnQ==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.1.0.tgz", + "integrity": "sha512-K76v7zRhpJToInSI8sRcEmTwpVFBZ223VIusjZRKXN8JzX+PuErG7skfa1yUuhc3f4VEqcYYUw0LvI+DJJ05eg==", "dependencies": { - "@babel/runtime": "^7.15.4", - "@mui/core": "5.0.0-alpha.48", - "@mui/system": "^5.0.1", - "@mui/types": "^7.0.0", - "@mui/utils": "^5.0.1", - "@popperjs/core": "^2.4.4", - "@types/react-transition-group": "^4.4.3", + "@babel/runtime": "^7.16.0", + "@mui/core": "5.0.0-alpha.54", + "@mui/system": "^5.1.0", + "@mui/types": "^7.1.0", + "@mui/utils": "^5.1.0", + "@types/react-transition-group": "^4.4.4", "clsx": "^1.1.1", "csstype": "^3.0.9", "hoist-non-react-statics": "^3.3.2", @@ -2301,7 +2302,7 @@ "url": "https://opencollective.com/material-ui" }, "peerDependencies": { - "@emotion/react": "^11.4.1", + "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@types/react": "^16.8.6 || ^17.0.0", "react": "^17.0.2", @@ -2325,12 +2326,12 @@ "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==" }, "node_modules/@mui/private-theming": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.0.1.tgz", - "integrity": "sha512-R8Cf2+32cG1OXFAqTighA5Mx9R5BQ57cN1ZVaNgfgdbI87Yig2fVMdFSPrw3txcjKlnwsvFJF8AdwQMqq1tJ3Q==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.1.0.tgz", + "integrity": "sha512-RWzpvwZTNoCUlWFtf7uMDY4QkNL6pI3V2Ac4MZeVzJr3DLluQrt0JjUdsy8CVS7HCTp1YGiyZsJ7H8PfR9jIOw==", "dependencies": { - "@babel/runtime": "^7.15.4", - "@mui/utils": "^5.0.1", + "@babel/runtime": "^7.16.0", + "@mui/utils": "^5.1.0", "prop-types": "^15.7.2" }, "engines": { @@ -2351,11 +2352,11 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.0.2.tgz", - "integrity": "sha512-vApnXLj/5V+SbBy+jGFtPgu3tgs0ybSdwWLwXcnUAdNdRyJBffi2KyOP8fhUONLOcZBMU2heNXWz/Zqn5kbDKQ==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.1.0.tgz", + "integrity": "sha512-Z27hexqYL21z+iVat47n1E/Tj4r83JK6hXaOFj2rYMYz0lJQ6YGLF+c2B3NNJoglL76Vo0w4yKC63FsO+015kw==", "dependencies": { - "@babel/runtime": "^7.15.4", + "@babel/runtime": "^7.16.0", "@emotion/cache": "^11.5.0", "prop-types": "^15.7.2" }, @@ -2426,15 +2427,15 @@ "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==" }, "node_modules/@mui/system": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.0.6.tgz", - "integrity": "sha512-qZdgODiO82/r1bH9KV5bdqqx/q14i32OGUK/bO6phhXM/DX0TmWSUsnPqFX4F7/UKrvBHsGzIb8ohdRuihQD+Q==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.1.0.tgz", + "integrity": "sha512-1h+YDnPGfTWZkf7lgeNV+vw6altxXGLclXLdxs9GPzEMNYXX7xveUjmndYpO1p/yx7GNG2gLWWkFZ1TYCeo4+Q==", "dependencies": { - "@babel/runtime": "^7.15.4", - "@mui/private-theming": "^5.0.1", - "@mui/styled-engine": "^5.0.2", - "@mui/types": "^7.0.0", - "@mui/utils": "^5.0.1", + "@babel/runtime": "^7.16.0", + "@mui/private-theming": "^5.1.0", + "@mui/styled-engine": "^5.1.0", + "@mui/types": "^7.1.0", + "@mui/utils": "^5.1.0", "clsx": "^1.1.1", "csstype": "^3.0.9", "prop-types": "^15.7.2" @@ -2470,9 +2471,9 @@ "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==" }, "node_modules/@mui/types": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.0.0.tgz", - "integrity": "sha512-M/tkF2pZ4uoPhZ8pnNhlVnOFtz6F3dnYKIsnj8MuXKT6d26IE2u0UjA8B0275ggN74dR9rlHG5xJt5jgDx/Ung==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.0.tgz", + "integrity": "sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ==", "peerDependencies": { "@types/react": "*" }, @@ -2483,11 +2484,11 @@ } }, "node_modules/@mui/utils": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.0.1.tgz", - "integrity": "sha512-GWO104N+o9KG5fKiTEYnAg7kONKEg3vLN+VROAU0f3it6lFGLCVPcQYex/1gJ4QAy96u6Ez8/Hmmhi1+3cX0tQ==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.1.0.tgz", + "integrity": "sha512-TbAa3DZBGE6xjrVsQ6e0Iw0jwgGZqPg/48aZJJWXJJjU8NU5OhBRutYhrk/kbdDRmsIArHNdpJayBSi7yETYvg==", "dependencies": { - "@babel/runtime": "^7.15.4", + "@babel/runtime": "^7.16.0", "@types/prop-types": "^15.7.4", "@types/react-is": "^16.7.1 || ^17.0.0", "prop-types": "^15.7.2", @@ -2501,21 +2502,20 @@ } }, "node_modules/@mui/x-data-grid": { - "version": "5.0.0-beta.2", - "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.0.0-beta.2.tgz", - "integrity": "sha512-3pY8i6ABfBH16UhuA4loD66buwPABEmfhBq/JZKUA7BkaqrsDvNv2ceuhAwVWK4KzlKiPNcUtmtJ3d+joWw4Og==", + "version": "5.0.0-beta.7", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.0.0-beta.7.tgz", + "integrity": "sha512-0h7uJ/1xvXghJwGPRFcPUPB0zNlKpfAqFU2dBdAtUl6DK2ca1cPfd+sLNzApa4yvxjGUxLyNxvcc5xutka0t8A==", "dependencies": { - "@mui/utils": "^5.0.0", + "@mui/utils": "^5.0.1", "clsx": "^1.1.1", "prop-types": "^15.7.2", - "reselect": "^4.0.0" + "reselect": "^4.1.1" }, "engines": { "node": ">=12.0.0" }, "peerDependencies": { - "@mui/material": "^5.0.0", - "@mui/styles": "^5.0.0", + "@mui/material": "^5.0.6", "react": "^17.0.2" } }, @@ -2689,9 +2689,9 @@ } }, "node_modules/@popperjs/core": { - "version": "2.10.1", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz", - "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==", + "version": "2.10.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz", + "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==", "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -3298,9 +3298,9 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.3.tgz", - "integrity": "sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz", + "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==", "dependencies": { "@types/react": "*" } @@ -14107,9 +14107,9 @@ "dev": true }, "node_modules/reselect": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz", - "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==" + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.2.tgz", + "integrity": "sha512-wg60ebcPOtxcptIUfrr7Jt3h4BR86cCW3R7y4qt65lnNb4yz4QgrXcbSioVsIOYguyz42+XTHIyJ5TEruzkFgQ==" }, "node_modules/resize-img": { "version": "1.1.2", @@ -17395,9 +17395,9 @@ } }, "@babel/runtime": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz", - "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==", + "version": "7.16.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz", + "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==", "requires": { "regenerator-runtime": "^0.13.4" } @@ -18774,13 +18774,14 @@ } }, "@mui/core": { - "version": "5.0.0-alpha.48", - "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.48.tgz", - "integrity": "sha512-H/QQwKsr2EqPAnP35DGDpWihk5BOFYGhO52rIHb3XKOfoUjDCrCHBy2kvr3dLWJDmJXr/QzYj3AX10n5XzlaMg==", + "version": "5.0.0-alpha.54", + "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.54.tgz", + "integrity": "sha512-8TxdHqDdSb6wjhsnpE5n7qtkFKDG3PUSlVY0gR3VcdsHXscUY13l3VbMQW1brI4D/R9zx5VYmxIHWaHFgw4RtA==", "requires": { - "@babel/runtime": "^7.15.4", + "@babel/runtime": "^7.16.0", "@emotion/is-prop-valid": "^1.1.0", - "@mui/utils": "^5.0.1", + "@mui/utils": "^5.1.0", + "@popperjs/core": "^2.4.4", "clsx": "^1.1.1", "prop-types": "^15.7.2", "react-is": "^17.0.2" @@ -18795,17 +18796,16 @@ } }, "@mui/material": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.1.tgz", - "integrity": "sha512-+/JJzRcORUf5MiZnzuqsPFRgxm3/0CUi1wE97ZQ2y7r+EnDVsjJLcjAH9Q9GY3k9zkPIpYb9Hig/+HT6AGZRnQ==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.1.0.tgz", + "integrity": "sha512-K76v7zRhpJToInSI8sRcEmTwpVFBZ223VIusjZRKXN8JzX+PuErG7skfa1yUuhc3f4VEqcYYUw0LvI+DJJ05eg==", "requires": { - "@babel/runtime": "^7.15.4", - "@mui/core": "5.0.0-alpha.48", - "@mui/system": "^5.0.1", - "@mui/types": "^7.0.0", - "@mui/utils": "^5.0.1", - "@popperjs/core": "^2.4.4", - "@types/react-transition-group": "^4.4.3", + "@babel/runtime": "^7.16.0", + "@mui/core": "5.0.0-alpha.54", + "@mui/system": "^5.1.0", + "@mui/types": "^7.1.0", + "@mui/utils": "^5.1.0", + "@types/react-transition-group": "^4.4.4", "clsx": "^1.1.1", "csstype": "^3.0.9", "hoist-non-react-statics": "^3.3.2", @@ -18822,21 +18822,21 @@ } }, "@mui/private-theming": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.0.1.tgz", - "integrity": "sha512-R8Cf2+32cG1OXFAqTighA5Mx9R5BQ57cN1ZVaNgfgdbI87Yig2fVMdFSPrw3txcjKlnwsvFJF8AdwQMqq1tJ3Q==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.1.0.tgz", + "integrity": "sha512-RWzpvwZTNoCUlWFtf7uMDY4QkNL6pI3V2Ac4MZeVzJr3DLluQrt0JjUdsy8CVS7HCTp1YGiyZsJ7H8PfR9jIOw==", "requires": { - "@babel/runtime": "^7.15.4", - "@mui/utils": "^5.0.1", + "@babel/runtime": "^7.16.0", + "@mui/utils": "^5.1.0", "prop-types": "^15.7.2" } }, "@mui/styled-engine": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.0.2.tgz", - "integrity": "sha512-vApnXLj/5V+SbBy+jGFtPgu3tgs0ybSdwWLwXcnUAdNdRyJBffi2KyOP8fhUONLOcZBMU2heNXWz/Zqn5kbDKQ==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.1.0.tgz", + "integrity": "sha512-Z27hexqYL21z+iVat47n1E/Tj4r83JK6hXaOFj2rYMYz0lJQ6YGLF+c2B3NNJoglL76Vo0w4yKC63FsO+015kw==", "requires": { - "@babel/runtime": "^7.15.4", + "@babel/runtime": "^7.16.0", "@emotion/cache": "^11.5.0", "prop-types": "^15.7.2" } @@ -18873,15 +18873,15 @@ } }, "@mui/system": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.0.6.tgz", - "integrity": "sha512-qZdgODiO82/r1bH9KV5bdqqx/q14i32OGUK/bO6phhXM/DX0TmWSUsnPqFX4F7/UKrvBHsGzIb8ohdRuihQD+Q==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.1.0.tgz", + "integrity": "sha512-1h+YDnPGfTWZkf7lgeNV+vw6altxXGLclXLdxs9GPzEMNYXX7xveUjmndYpO1p/yx7GNG2gLWWkFZ1TYCeo4+Q==", "requires": { - "@babel/runtime": "^7.15.4", - "@mui/private-theming": "^5.0.1", - "@mui/styled-engine": "^5.0.2", - "@mui/types": "^7.0.0", - "@mui/utils": "^5.0.1", + "@babel/runtime": "^7.16.0", + "@mui/private-theming": "^5.1.0", + "@mui/styled-engine": "^5.1.0", + "@mui/types": "^7.1.0", + "@mui/utils": "^5.1.0", "clsx": "^1.1.1", "csstype": "^3.0.9", "prop-types": "^15.7.2" @@ -18895,17 +18895,17 @@ } }, "@mui/types": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.0.0.tgz", - "integrity": "sha512-M/tkF2pZ4uoPhZ8pnNhlVnOFtz6F3dnYKIsnj8MuXKT6d26IE2u0UjA8B0275ggN74dR9rlHG5xJt5jgDx/Ung==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.0.tgz", + "integrity": "sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ==", "requires": {} }, "@mui/utils": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.0.1.tgz", - "integrity": "sha512-GWO104N+o9KG5fKiTEYnAg7kONKEg3vLN+VROAU0f3it6lFGLCVPcQYex/1gJ4QAy96u6Ez8/Hmmhi1+3cX0tQ==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.1.0.tgz", + "integrity": "sha512-TbAa3DZBGE6xjrVsQ6e0Iw0jwgGZqPg/48aZJJWXJJjU8NU5OhBRutYhrk/kbdDRmsIArHNdpJayBSi7yETYvg==", "requires": { - "@babel/runtime": "^7.15.4", + "@babel/runtime": "^7.16.0", "@types/prop-types": "^15.7.4", "@types/react-is": "^16.7.1 || ^17.0.0", "prop-types": "^15.7.2", @@ -18913,14 +18913,14 @@ } }, "@mui/x-data-grid": { - "version": "5.0.0-beta.2", - "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.0.0-beta.2.tgz", - "integrity": "sha512-3pY8i6ABfBH16UhuA4loD66buwPABEmfhBq/JZKUA7BkaqrsDvNv2ceuhAwVWK4KzlKiPNcUtmtJ3d+joWw4Og==", + "version": "5.0.0-beta.7", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.0.0-beta.7.tgz", + "integrity": "sha512-0h7uJ/1xvXghJwGPRFcPUPB0zNlKpfAqFU2dBdAtUl6DK2ca1cPfd+sLNzApa4yvxjGUxLyNxvcc5xutka0t8A==", "requires": { - "@mui/utils": "^5.0.0", + "@mui/utils": "^5.0.1", "clsx": "^1.1.1", "prop-types": "^15.7.2", - "reselect": "^4.0.0" + "reselect": "^4.1.1" } }, "@nodelib/fs.scandir": { @@ -19031,9 +19031,9 @@ } }, "@popperjs/core": { - "version": "2.10.1", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz", - "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==" + "version": "2.10.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz", + "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==" }, "@protobufjs/aspromise": { "version": "1.1.2", @@ -19581,9 +19581,9 @@ } }, "@types/react-transition-group": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.3.tgz", - "integrity": "sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz", + "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==", "requires": { "@types/react": "*" } @@ -27858,9 +27858,9 @@ "dev": true }, "reselect": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz", - "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==" + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.2.tgz", + "integrity": "sha512-wg60ebcPOtxcptIUfrr7Jt3h4BR86cCW3R7y4qt65lnNb4yz4QgrXcbSioVsIOYguyz42+XTHIyJ5TEruzkFgQ==" }, "resize-img": { "version": "1.1.2", diff --git a/explorer/package.json b/explorer/package.json index 41d34f7d4b..5d296ce0f6 100644 --- a/explorer/package.json +++ b/explorer/package.json @@ -11,7 +11,7 @@ "@mui/material": "^5.0.1", "@mui/styles": "^5.0.1", "@mui/system": "^5.0.1", - "@mui/x-data-grid": "^5.0.0-beta.2", + "@mui/x-data-grid": "^5.0.0-beta.5", "@nymproject/nym-validator-client": "^0.18.0", "d3-scale": "^4.0.0", "date-fns": "^2.24.0", diff --git a/explorer/src/App.tsx b/explorer/src/App.tsx index c40c9e67d8..a33b49c8ca 100644 --- a/explorer/src/App.tsx +++ b/explorer/src/App.tsx @@ -1,9 +1,24 @@ import * as React from 'react'; +import { useMediaQuery } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; import { Nav } from './components/Nav'; +import { MobileNav } from './components/MobileNav'; import { Routes } from './routes/index'; -export const App: React.FC = () => ( - -); +export const App: React.FC = () => { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('md')); + + if (isMobile) { + return ( + + + + ); + } + return ( + + ); +}; diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx new file mode 100644 index 0000000000..42189d148b --- /dev/null +++ b/explorer/src/components/MobileNav.tsx @@ -0,0 +1,169 @@ +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { useTheme } from '@mui/material/styles'; +import MuiLink from '@mui/material/Link'; +import { + AppBar, + Box, + Button, + Drawer, + IconButton, + List, + ListItem, + ListItemButton, + ListItemIcon, + Toolbar, + Typography, +} from '@mui/material'; +import { Menu } from '@mui/icons-material'; +import { NymLogoSVG } from 'src/icons/NymLogoSVG'; +import { useMainContext } from 'src/context/main'; +import { MobileDrawerClose } from 'src/icons/MobileDrawerClose'; +import { Footer } from './Footer'; +import { NYM_WEBSITE } from '../api/constants'; +import { ExpandableButton } from './Nav'; +import { DarkLightSwitchMobile } from './Switch'; + +type MobileNavProps = { + children: React.ReactNode; +}; + +export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ + children, +}: MobileNavProps) => { + const theme = useTheme(); + const { navState, updateNavState } = useMainContext(); + const [drawerOpen, setDrawerOpen] = React.useState(false); + + const toggleDrawer = () => { + setDrawerOpen(!drawerOpen); + }; + + const handleClick = (id: number) => { + updateNavState(id); + toggleDrawer(); + }; + + const openDrawer = () => { + setDrawerOpen(true); + }; + + return ( + + + + + + + + + + Network Explorer + + + + + + + + + + + + + + + + + + + + + {navState.map((props) => ( + + ))} + + + + + + {children} +