autocollapse navigation for medium screens

theme/foundations/breakpoints.ts

@@ -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

 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);