mirror of
https://github.com/maelgangloff/domain-watchdog.git
synced 2025-12-17 09:45:29 +00:00
feat: responsive sidebar
This commit is contained in:
vinceh121
parent
6b9cbab225
commit
c425be691d
@ -32,6 +32,7 @@ import ConnectorsPage from "./pages/tracking/ConnectorsPage";
|
||||
import NotFoundPage from "./pages/NotFoundPage";
|
||||
import {ItemType, MenuItemType} from "antd/lib/menu/interface";
|
||||
import {t} from 'ttag'
|
||||
import useBreakpoint from "./hooks/useBreakpoint";
|
||||
|
||||
export default function App() {
|
||||
const {
|
||||
@ -40,6 +41,7 @@ export default function App() {
|
||||
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
const sm = useBreakpoint('sm')
|
||||
|
||||
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false)
|
||||
@ -184,7 +186,8 @@ export default function App() {
|
||||
|
||||
return <AuthenticatedContext.Provider value={contextValue}>
|
||||
<Layout hasSider style={{minHeight: '100vh'}}>
|
||||
<Layout.Sider collapsible>
|
||||
{/* Ant will use a break-off tab to toggle the collapse of the sider when collapseWidth = 0*/}
|
||||
<Layout.Sider collapsible breakpoint="sm" {...(sm ? {collapsedWidth: 0} : {})}>
|
||||
<Menu
|
||||
defaultSelectedKeys={['home']}
|
||||
defaultOpenKeys={['search', 'info', 'tracking', 'watchdog']}
|
||||
@ -203,7 +206,6 @@ export default function App() {
|
||||
onClick: () => navigate('/login')
|
||||
}]}
|
||||
/>
|
||||
<div className="demo-logo-vertical"></div>
|
||||
</Layout.Sider>
|
||||
<Layout>
|
||||
<Layout.Header style={{padding: 0, background: colorBgContainer}}/>
|
||||
@ -243,7 +245,7 @@ export default function App() {
|
||||
</Layout.Content>
|
||||
<Layout.Footer style={{textAlign: 'center'}}>
|
||||
<Link to='https://github.com/maelgangloff/domain-watchdog'>Domain
|
||||
Watchdog</Link> ©{new Date().getFullYear()} Created by Maël Gangloff
|
||||
Watchdog</Link> © {new Date().getFullYear()} Created by Maël Gangloff
|
||||
</Layout.Footer>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
19
assets/hooks/useBreakpoint.tsx
Normal file
19
assets/hooks/useBreakpoint.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { Breakpoint, theme } from 'antd';
|
||||
import { useMediaQuery } from 'react-responsive';
|
||||
|
||||
const { useToken } = theme;
|
||||
|
||||
type ScreenProperty = 'screenXXL' | 'screenXL' | 'screenLG' | 'screenMD' | 'screenSM' | 'screenXS';
|
||||
|
||||
const propertyName = (breakpoint: Breakpoint): ScreenProperty => {
|
||||
return 'screen' + breakpoint.toUpperCase() as ScreenProperty
|
||||
};
|
||||
|
||||
export default function useBreakpoint(
|
||||
breakpoint: Breakpoint
|
||||
) {
|
||||
const { token } = useToken()
|
||||
const width: number = token[propertyName(breakpoint)]
|
||||
|
||||
return useMediaQuery({maxWidth: width})
|
||||
}
|
||||
@ -24,6 +24,7 @@
|
||||
"@types/punycode": "^2.1.4",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@types/react-responsive": "^8.0.8",
|
||||
"@types/vcf": "^2.0.7",
|
||||
"antd": "^5.19.3",
|
||||
"axios": "^1.7.2",
|
||||
@ -33,6 +34,7 @@
|
||||
"punycode": "^2.3.1",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-responsive": "^10.0.0",
|
||||
"react-router-dom": "^6.25.1",
|
||||
"regenerator-runtime": "^0.13.9",
|
||||
"snarkdown": "^2.0.0",
|
||||
|
||||
57
yarn.lock
57
yarn.lock
@ -1886,6 +1886,13 @@
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-responsive@^8.0.8":
|
||||
version "8.0.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-responsive/-/react-responsive-8.0.8.tgz#e351be7cc4d03bc476075839922bb5f9a3094e76"
|
||||
integrity sha512-HDUZtoeFRHrShCGaND23HmXAB9evOOTjkghd2wAasLkuorYYitm5A1XLeKkhXKZppcMBxqB/8V4Snl6hRUTA8g==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react@*", "@types/react@^18.3.3":
|
||||
version "18.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f"
|
||||
@ -2932,6 +2939,11 @@ css-loader@^6.7.0:
|
||||
postcss-value-parser "^4.2.0"
|
||||
semver "^7.5.4"
|
||||
|
||||
css-mediaquery@^0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
|
||||
integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==
|
||||
|
||||
css-minimizer-webpack-plugin@^5.0.0:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-5.0.1.tgz#33effe662edb1a0bf08ad633c32fa75d0f7ec565"
|
||||
@ -4058,6 +4070,11 @@ hunspell-spellchecker@^1.0.2:
|
||||
resolved "https://registry.yarnpkg.com/hunspell-spellchecker/-/hunspell-spellchecker-1.0.2.tgz#a10b0bd2fa00a65ab62a4c6b734ce496d318910e"
|
||||
integrity sha512-4DwmFAvlz+ChsqLDsZT2cwBsYNXh+oWboemxXtafwKIyItq52xfR4e4kr017sLAoPaSYVofSOvPUfmOAhXyYvw==
|
||||
|
||||
hyphenate-style-name@^1.0.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436"
|
||||
integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==
|
||||
|
||||
iconv-lite@0.4.24:
|
||||
version "0.4.24"
|
||||
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
|
||||
@ -4624,7 +4641,7 @@ log-symbols@^1.0.2:
|
||||
dependencies:
|
||||
chalk "^1.0.0"
|
||||
|
||||
loose-envify@^1.1.0:
|
||||
loose-envify@^1.1.0, loose-envify@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
|
||||
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
|
||||
@ -4660,6 +4677,13 @@ lru-cache@^6.0.0:
|
||||
dependencies:
|
||||
yallist "^4.0.0"
|
||||
|
||||
matchmediaquery@^0.4.2:
|
||||
version "0.4.2"
|
||||
resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.4.2.tgz#22582bd4ae63ad9f54c53001bba80cbed0f7eafa"
|
||||
integrity sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==
|
||||
dependencies:
|
||||
css-mediaquery "^0.1.2"
|
||||
|
||||
mdn-data@2.0.28:
|
||||
version "2.0.28"
|
||||
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba"
|
||||
@ -4882,7 +4906,7 @@ nth-check@^2.0.1:
|
||||
dependencies:
|
||||
boolbase "^1.0.0"
|
||||
|
||||
object-assign@^4.0.1:
|
||||
object-assign@^4.0.1, object-assign@^4.1.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
|
||||
integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
|
||||
@ -5461,6 +5485,15 @@ process@^0.11.10:
|
||||
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
|
||||
integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
|
||||
|
||||
prop-types@^15.6.1:
|
||||
version "15.8.1"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
|
||||
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
|
||||
dependencies:
|
||||
loose-envify "^1.4.0"
|
||||
object-assign "^4.1.1"
|
||||
react-is "^16.13.1"
|
||||
|
||||
proxy-addr@~2.0.7:
|
||||
version "2.0.7"
|
||||
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
|
||||
@ -5886,11 +5919,26 @@ react-dom@^18.3.1:
|
||||
loose-envify "^1.1.0"
|
||||
scheduler "^0.23.2"
|
||||
|
||||
react-is@^16.13.1:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||
|
||||
react-is@^18.2.0:
|
||||
version "18.3.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
|
||||
integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
|
||||
|
||||
react-responsive@^10.0.0:
|
||||
version "10.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-10.0.0.tgz#657c7a90823cd565f43aa5918bd8eb0cd2c91c91"
|
||||
integrity sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg==
|
||||
dependencies:
|
||||
hyphenate-style-name "^1.0.0"
|
||||
matchmediaquery "^0.4.2"
|
||||
prop-types "^15.6.1"
|
||||
shallow-equal "^3.1.0"
|
||||
|
||||
react-router-dom@^6.25.1:
|
||||
version "6.25.1"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.25.1.tgz#b89f8d63fc8383ea4e89c44bf31c5843e1f7afa0"
|
||||
@ -6343,6 +6391,11 @@ shallow-clone@^3.0.0:
|
||||
dependencies:
|
||||
kind-of "^6.0.2"
|
||||
|
||||
shallow-equal@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-3.1.0.tgz#e7a54bac629c7f248eff6c2f5b63122ba4320bec"
|
||||
integrity sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==
|
||||
|
||||
shebang-command@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user