fix: side menu navigation

twentyhq · Oct 18, 2024 · c0c8f2d · c0c8f2d
1 parent e85cbd7
commit c0c8f2d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
@@ -110,15 +110,14 @@ export const PageHeader = ({
 }: PageHeaderProps) => {
   const isMobile = useIsMobile();
   const theme = useTheme();
-  const isNavigationDrawerOpen = useRecoilValue(isNavigationDrawerOpenState);
-  const { pathname } = useLocation();
-  const isSettingsPage = matchPath('/settings/*', pathname);
-
+  const isNavigationDrawerExpanded = useRecoilValue(
+    isNavigationDrawerExpandedState,
+  );
 
   return (
     <StyledTopBarContainer width={width}>
       <StyledLeftContainer>
-       {!isMobile && !isNavigationDrawerOpen && !isSettingsPage && (
+        {!isMobile && !isNavigationDrawerExpanded && (
           <StyledTopBarButtonContainer>
             <NavigationDrawerCollapseButton direction="right" />
           </StyledTopBarButtonContainer>

diff --git a/...src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx b/...src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx
@@ -1,7 +1,9 @@
+import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { IconButton } from '@/ui/input/button/components/IconButton';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import styled from '@emotion/styled';
-import { useSetRecoilState } from 'recoil';
+import { useEffect } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse,
@@ -28,9 +30,22 @@ export const NavigationDrawerCollapseButton = ({
   className,
   direction = 'left',
 }: NavigationDrawerCollapseButtonProps) => {
+  const isSettingsPage = useIsSettingsPage();
+
   const setIsNavigationDrawerExpanded = useSetRecoilState(
     isNavigationDrawerExpandedState,
   );
+  const isNavigationDrawerExpanded = useRecoilValue(
+    isNavigationDrawerExpandedState,
+  );
+
+  // Check if the user is on the settings page and the navigation drawer is not expanded
+  // Then open it automatically
+  useEffect(() => {
+    if (!isNavigationDrawerExpanded && isSettingsPage) {
+      setIsNavigationDrawerExpanded(true);
+    }
+  }, [isSettingsPage]);
 
   return (
     <StyledCollapseButton