lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

autocollapse navigation for medium screens

Browse Source
This commit is contained in:
tom
2022-08-27 15:25:32 +03:00
parent 2d6d1b392a
commit 021b9b0848
2 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme/foundations/breakpoints.ts
+2 -2
View File
@@ -3,8 +3,8 @@ const breakpoints = {
// sm: '320px',
// md: '768px',
lg: '1000px',
// these breakpoints are needed just to make "lg" work
xl: '2000px',
xl: '1440px',
// these breakpoint are needed just to make others work
'2xl': '3000px',
};
ui/blocks/navigation/NavigationDesktop.tsx
+10 -2
View File
@@ -1,5 +1,5 @@
import { ChevronLeftIcon } from '@chakra-ui/icons';
import { Flex, Box, VStack, useColorModeValue } from '@chakra-ui/react';
import { Flex, Box, VStack, useColorModeValue, useBreakpointValue } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
@@ -16,8 +16,16 @@ const NavigationDesktop = () => {
const router = useRouter();
const { mainNavItems, accountNavItems } = useNavItems();
const isLargeScreen = useBreakpointValue({ base: false, xl: true });
const cookieValue = cookies.get(cookies.NAMES.NAV_BAR_COLLAPSED);
const [ isCollapsed, setCollapsedState ] = React.useState(cookies.get(cookies.NAMES.NAV_BAR_COLLAPSED) === 'true');
const [ isCollapsed, setCollapsedState ] = React.useState(cookieValue === 'true');
React.useEffect(() => {
if (!cookieValue) {
setCollapsedState(!isLargeScreen);
}
}, [ isLargeScreen, cookieValue ]);
const handleTogglerClick = React.useCallback(() => {
setCollapsedState((flag) => !flag);