feat: responsive sidebar

assets/hooks/useBreakpoint.tsx

@@ -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})
+}