feat - Compact sidebar (#7414)

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

@@ -8,14 +8,14 @@ import {
   NavigationDrawer,
   NavigationDrawerProps,
 } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
-import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
+
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
-import { useIsSettingsPage } from '../hooks/useIsSettingsPage';
-import { currentMobileNavigationDrawerState } from '../states/currentMobileNavigationDrawerState';
+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 = {
@@ -26,22 +26,14 @@ export const AppNavigationDrawer = ({
   className,
 }: AppNavigationDrawerProps) => {
   const isMobile = useIsMobile();
-  const isSettingsPage = useIsSettingsPage();
-  const currentMobileNavigationDrawer = useRecoilValue(
-    currentMobileNavigationDrawerState,
-  );
-  const setIsNavigationDrawerOpen = useSetRecoilState(
-    isNavigationDrawerOpenState,
+  const isSettingsDrawer = useIsSettingsDrawer();
+  const setIsNavigationDrawerExpanded = useSetRecoilState(
+    isNavigationDrawerExpandedState,
   );
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
-  const isSettingsDrawer = isMobile
-    ? currentMobileNavigationDrawer === 'settings'
-    : isSettingsPage;
-
   const drawerProps: NavigationDrawerProps = isSettingsDrawer
     ? {
-        isSubMenu: true,
         title: 'Exit Settings',
         children: <SettingsNavigationDrawerItems />,
         footer: <AdvancedSettingsToggle />,
@@ -57,13 +49,12 @@ export const AppNavigationDrawer = ({
       };
 
   useEffect(() => {
-    setIsNavigationDrawerOpen(!isMobile);
-  }, [isMobile, setIsNavigationDrawerOpen]);
+    setIsNavigationDrawerExpanded(!isMobile);
+  }, [isMobile, setIsNavigationDrawerExpanded]);
 
   return (
     <NavigationDrawer
       className={className}
-      isSubMenu={drawerProps.isSubMenu}
       logo={drawerProps.logo}
       title={drawerProps.title}
       footer={drawerProps.footer}

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

@@ -1,5 +1,5 @@
 import { useLocation } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 import { IconSearch, IconSettings } from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
@@ -9,6 +9,8 @@ import { NavigationDrawerOpenedSection } from '@/object-metadata/components/Navi
 import { NavigationDrawerSectionForObjectMetadataItemsWrapper } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsWrapper';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
+import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
+import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
@@ -23,6 +25,11 @@ export const MainNavigationDrawerItems = () => {
   const isWorkspaceFavoriteEnabled = useIsFeatureEnabled(
     'IS_WORKSPACE_FAVORITE_ENABLED',
   );
+  const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] =
+    useRecoilState(isNavigationDrawerExpandedState);
+  const setNavigationDrawerExpandedMemorized = useSetRecoilState(
+    navigationDrawerExpandedMemorizedState,
+  );
 
   return (
     <>
@@ -38,6 +45,8 @@ export const MainNavigationDrawerItems = () => {
             label="Settings"
             to={'/settings/profile'}
             onClick={() => {
+              setNavigationDrawerExpandedMemorized(isNavigationDrawerExpanded);
+              setIsNavigationDrawerExpanded(true);
               setNavigationMemorizedUrl(location.pathname + location.search);
             }}
             Icon={IconSettings}

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

@@ -1,11 +1,9 @@
-import { useRecoilState } from 'recoil';
-import { IconComponent, IconList, IconSearch, IconSettings } from 'twenty-ui';
-
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { NavigationBar } from '@/ui/navigation/navigation-bar/components/NavigationBar';
-import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
-
+import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
+import { useRecoilState } from 'recoil';
+import { IconComponent, IconList, IconSearch, IconSettings } from 'twenty-ui';
 import { useIsSettingsPage } from '../hooks/useIsSettingsPage';
 import { currentMobileNavigationDrawerState } from '../states/currentMobileNavigationDrawerState';
 
@@ -15,13 +13,12 @@ export const MobileNavigationBar = () => {
   const [isCommandMenuOpened] = useRecoilState(isCommandMenuOpenedState);
   const { closeCommandMenu, openCommandMenu } = useCommandMenu();
   const isSettingsPage = useIsSettingsPage();
-  const [isNavigationDrawerOpen, setIsNavigationDrawerOpen] = useRecoilState(
-    isNavigationDrawerOpenState,
-  );
+  const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] =
+    useRecoilState(isNavigationDrawerExpandedState);
   const [currentMobileNavigationDrawer, setCurrentMobileNavigationDrawer] =
     useRecoilState(currentMobileNavigationDrawerState);
 
-  const activeItemName = isNavigationDrawerOpen
+  const activeItemName = isNavigationDrawerExpanded
     ? currentMobileNavigationDrawer
     : isCommandMenuOpened
       ? 'search'
@@ -39,7 +36,7 @@ export const MobileNavigationBar = () => {
       Icon: IconList,
       onClick: () => {
         closeCommandMenu();
-        setIsNavigationDrawerOpen(
+        setIsNavigationDrawerExpanded(
           (previousIsOpen) => activeItemName !== 'main' || !previousIsOpen,
         );
         setCurrentMobileNavigationDrawer('main');
@@ -52,7 +49,7 @@ export const MobileNavigationBar = () => {
         if (!isCommandMenuOpened) {
           openCommandMenu();
         }
-        setIsNavigationDrawerOpen(false);
+        setIsNavigationDrawerExpanded(false);
       },
     },
     {
@@ -60,7 +57,7 @@ export const MobileNavigationBar = () => {
       Icon: IconSettings,
       onClick: () => {
         closeCommandMenu();
-        setIsNavigationDrawerOpen(
+        setIsNavigationDrawerExpanded(
           (previousIsOpen) => activeItemName !== 'settings' || !previousIsOpen,
         );
         setCurrentMobileNavigationDrawer('settings');

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

@@ -1,16 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
 import { useEffect } from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { Meta, StoryObj } from '@storybook/react';
 import { useSetRecoilState } from 'recoil';
 
 import { currentMobileNavigationDrawerState } from '@/navigation/states/currentMobileNavigationDrawerState';
 import { AppPath } from '@/types/AppPath';
-import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
+
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
+import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import {
   AppNavigationDrawer,
   AppNavigationDrawerProps,
@@ -22,8 +23,8 @@ const MobileNavigationDrawerStateSetterEffect = ({
   mobileNavigationDrawer?: 'main' | 'settings';
 }) => {
   const isMobile = useIsMobile();
-  const setIsNavigationDrawerOpen = useSetRecoilState(
-    isNavigationDrawerOpenState,
+  const setIsNavigationDrawerExpanded = useSetRecoilState(
+    isNavigationDrawerExpandedState,
   );
   const setCurrentMobileNavigationDrawer = useSetRecoilState(
     currentMobileNavigationDrawerState,
@@ -32,13 +33,13 @@ const MobileNavigationDrawerStateSetterEffect = ({
   useEffect(() => {
     if (!isMobile) return;
 
-    setIsNavigationDrawerOpen(true);
+    setIsNavigationDrawerExpanded(true);
     setCurrentMobileNavigationDrawer(mobileNavigationDrawer);
   }, [
     isMobile,
     mobileNavigationDrawer,
     setCurrentMobileNavigationDrawer,
-    setIsNavigationDrawerOpen,
+    setIsNavigationDrawerExpanded,
   ]);
 
   return null;

packages/twenty-front/src/modules/navigation/hooks/useIsSettingsDrawer.ts

@@ -0,0 +1,15 @@
+import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
+import { useRecoilValue } from 'recoil';
+import { currentMobileNavigationDrawerState } from '@/navigation/states/currentMobileNavigationDrawerState';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+export const useIsSettingsDrawer = () => {
+  const isMobile = useIsMobile();
+  const isSettingsPage = useIsSettingsPage();
+  const currentMobileNavigationDrawer = useRecoilValue(
+    currentMobileNavigationDrawerState,
+  );
+  return isMobile
+    ? currentMobileNavigationDrawer === 'settings'
+    : isSettingsPage;
+};