fix: hidden settings menu affects settings layout

packages/twenty-front/src/modules/app/effect-components/GoToHotkeyItemEffect.tsx

@@ -6,7 +6,7 @@ export const GoToHotkeyItemEffect = (props: {
 }) => {
   const { hotkey, pathToNavigateTo } = props;
 
-  useGoToHotkeys(hotkey, pathToNavigateTo);
+  useGoToHotkeys({ key: hotkey, location: pathToNavigateTo });
 
   return <></>;
 };

packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx

@@ -1,13 +1,31 @@
 import { GoToHotkeyItemEffect } from '@/app/effect-components/GoToHotkeyItemEffect';
 import { useNonSystemActiveObjectMetadataItems } from '@/object-metadata/hooks/useNonSystemActiveObjectMetadataItems';
+import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
+import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState';
+import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useGoToHotkeys } from '@/ui/utilities/hotkey/hooks/useGoToHotkeys';
+import { useLocation } from 'react-router-dom';
+import { useRecoilCallback } from 'recoil';
 
 export const GotoHotkeys = () => {
   const { nonSystemActiveObjectMetadataItems } =
     useNonSystemActiveObjectMetadataItems();
 
-  // Hardcoded since settings is static
-  useGoToHotkeys('s', '/settings/profile');
+  const location = useLocation();
+
+  useGoToHotkeys({
+    key: 's',
+    location: '/settings/profile',
+    preNavigateFunction: useRecoilCallback(
+      ({ set }) =>
+        () => {
+          set(isNavigationDrawerExpandedState, true);
+          set(navigationDrawerExpandedMemorizedState, true);
+          set(navigationMemorizedUrlState, location.pathname + location.search);
+        },
+      [],
+    ),
+  });
 
   return nonSystemActiveObjectMetadataItems.map((objectMetadataItem) => (
     <GoToHotkeyItemEffect

packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx

@@ -1,5 +1,4 @@
-import { useEffect } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsNavigationDrawerItems } from '@/settings/components/SettingsNavigationDrawerItems';
@@ -9,13 +8,11 @@ import {
   NavigationDrawerProps,
 } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
 
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
 
 import { AdvancedSettingsToggle } from '@/ui/navigation/link/components/AdvancedSettingsToggle';
-import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { MainNavigationDrawerItems } from './MainNavigationDrawerItems';
 
 export type AppNavigationDrawerProps = {
@@ -25,11 +22,8 @@ export type AppNavigationDrawerProps = {
 export const AppNavigationDrawer = ({
   className,
 }: AppNavigationDrawerProps) => {
-  const isMobile = useIsMobile();
   const isSettingsDrawer = useIsSettingsDrawer();
-  const setIsNavigationDrawerExpanded = useSetRecoilState(
-    isNavigationDrawerExpandedState,
-  );
+
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   const drawerProps: NavigationDrawerProps = isSettingsDrawer
@@ -48,10 +42,6 @@ export const AppNavigationDrawer = ({
         footer: <SupportDropdown />,
       };
 
-  useEffect(() => {
-    setIsNavigationDrawerExpanded(!isMobile);
-  }, [isMobile, setIsNavigationDrawerExpanded]);
-
   return (
     <NavigationDrawer
       className={className}

packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/__tests__/useGoToHotkeys.test.tsx

@@ -1,6 +1,6 @@
+import { fireEvent, renderHook } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter, useLocation } from 'react-router-dom';
-import { fireEvent, renderHook } from '@testing-library/react';
 import { RecoilRoot } from 'recoil';
 
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
@@ -23,7 +23,7 @@ const renderHookConfig = {
 describe('useGoToHotkeys', () => {
   it('should navigate on hotkey trigger', () => {
     const { result } = renderHook(() => {
-      useGoToHotkeys('a', '/three');
+      useGoToHotkeys({ key: 'a', location: '/three' });
 
       const setHotkeyScope = useSetHotkeyScope();
 

packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useGoToHotkeys.ts

@@ -5,13 +5,24 @@ import { AppHotkeyScope } from '../types/AppHotkeyScope';
 
 import { useSequenceHotkeys } from './useSequenceScopedHotkeys';
 
-export const useGoToHotkeys = (key: Keys, location: string) => {
+type GoToHotkeysProps = {
+  key: Keys;
+  location: string;
+  preNavigateFunction?: () => void;
+};
+
+export const useGoToHotkeys = ({
+  key,
+  location,
+  preNavigateFunction,
+}: GoToHotkeysProps) => {
   const navigate = useNavigate();
 
   useSequenceHotkeys(
     'g',
     key,
     () => {
+      preNavigateFunction?.();
       navigate(location);
     },
     AppHotkeyScope.Goto,