feat - Compact sidebar (#7414)

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx

@@ -1,49 +1,45 @@
-import { css, useTheme } from '@emotion/react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { ReactNode, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { MOBILE_VIEWPORT } from 'twenty-ui';
 
-import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
-import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
-import { DESKTOP_NAV_DRAWER_WIDTHS } from '../constants/DesktopNavDrawerWidths';
+import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 
+import { isNavigationDrawerExpandedState } from '../../states/isNavigationDrawerExpanded';
 import { NavigationDrawerBackButton } from './NavigationDrawerBackButton';
 import { NavigationDrawerHeader } from './NavigationDrawerHeader';
+import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
 
 export type NavigationDrawerProps = {
   children: ReactNode;
   className?: string;
   footer?: ReactNode;
-  isSubMenu?: boolean;
   logo?: string;
   title?: string;
 };
 
-const StyledAnimatedContainer = styled(motion.div)`
-  display: flex;
-  justify-content: end;
-`;
+const StyledAnimatedContainer = styled(motion.div)``;
 
-const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
+const StyledContainer = styled.div<{
+  isSettings?: boolean;
+  isMobile?: boolean;
+}>`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  width: ${NAV_DRAWER_WIDTHS.menu.desktop.expanded}px;
   gap: ${({ theme }) => theme.spacing(3)};
   height: 100%;
-  min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px;
-  padding: ${({ theme }) => theme.spacing(3, 2, 4)};
-
-  ${({ isSubMenu, theme }) =>
-    isSubMenu
-      ? css`
-          padding-left: ${theme.spacing(0)};
-          padding-right: ${theme.spacing(8)};
-        `
-      : ''}
+  padding: ${({ theme, isSettings, isMobile }) =>
+    isSettings
+      ? isMobile
+        ? theme.spacing(3, 8)
+        : theme.spacing(3, 8, 4, 0)
+      : theme.spacing(3, 2, 4)};
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: 100%;
@@ -61,15 +57,16 @@ export const NavigationDrawer = ({
   children,
   className,
   footer,
-  isSubMenu,
   logo,
   title,
 }: NavigationDrawerProps) => {
   const [isHovered, setIsHovered] = useState(false);
   const isMobile = useIsMobile();
+  const isSettingsDrawer = useIsSettingsDrawer();
   const theme = useTheme();
-  const isNavigationDrawerOpen = useRecoilValue(isNavigationDrawerOpenState);
-  const isSettingsPage = useIsSettingsPage();
+  const isNavigationDrawerExpanded = useRecoilValue(
+    isNavigationDrawerExpandedState,
+  );
 
   const handleHover = () => {
     setIsHovered(true);
@@ -79,30 +76,35 @@ export const NavigationDrawer = ({
     setIsHovered(false);
   };
 
-  const desktopWidth = !isNavigationDrawerOpen
-    ? 12
-    : DESKTOP_NAV_DRAWER_WIDTHS.menu;
+  const desktopWidth = isNavigationDrawerExpanded
+    ? NAV_DRAWER_WIDTHS.menu.desktop.expanded
+    : NAV_DRAWER_WIDTHS.menu.desktop.collapsed;
 
-  const mobileWidth = isNavigationDrawerOpen ? '100%' : 0;
+  const mobileWidth = isNavigationDrawerExpanded
+    ? NAV_DRAWER_WIDTHS.menu.mobile.expanded
+    : NAV_DRAWER_WIDTHS.menu.mobile.collapsed;
+
+  const navigationDrawerAnimate = {
+    width: isMobile ? mobileWidth : desktopWidth,
+    opacity: isNavigationDrawerExpanded || !isSettingsDrawer ? 1 : 0,
+  };
 
   return (
     <StyledAnimatedContainer
       className={className}
       initial={false}
-      animate={{
-        width: isMobile ? mobileWidth : desktopWidth,
-        opacity: isNavigationDrawerOpen || isSettingsPage ? 1 : 0,
-      }}
+      animate={navigationDrawerAnimate}
       transition={{
         duration: theme.animation.duration.normal,
       }}
     >
       <StyledContainer
-        isSubMenu={isSubMenu}
+        isSettings={isSettingsDrawer}
+        isMobile={isMobile}
         onMouseEnter={handleHover}
         onMouseLeave={handleMouseLeave}
       >
-        {isSubMenu && title ? (
+        {isSettingsDrawer && title ? (
           !isMobile && <NavigationDrawerBackButton title={title} />
         ) : (
           <NavigationDrawerHeader