Simplify setting padding

twentyhq · Oct 15, 2024 · 241e232 · 241e232
1 parent dee4882
commit 241e232
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx
@@ -12,8 +12,7 @@ import {
 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';
@@ -27,22 +26,14 @@ export const AppNavigationDrawer = ({
   className,
 }: AppNavigationDrawerProps) => {
   const isMobile = useIsMobile();
-  const isSettingsPage = useIsSettingsPage();
-  const currentMobileNavigationDrawer = useRecoilValue(
-    currentMobileNavigationDrawerState,
-  );
+  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 />,
@@ -64,7 +55,6 @@ export const AppNavigationDrawer = ({
   return (
     <NavigationDrawer
       className={className}
-      isSubMenu={drawerProps.isSubMenu}
       logo={drawerProps.logo}
       title={drawerProps.title}
       footer={drawerProps.footer}

diff --git a/packages/twenty-front/src/modules/navigation/hooks/useIsSettingsDrawer.ts b/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;
+};
diff --git a/.../twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/.../twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
@@ -6,36 +6,40 @@ import { useRecoilValue } from 'recoil';
 import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 
 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)``;
 
 const StyledContainer = styled.div<{
-  isSubMenu?: boolean;
+  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%;
-  padding: ${({ theme, isSubMenu }) =>
-    isSubMenu ? theme.spacing(3, 8) : theme.spacing(3, 2, 4)};
+  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%;
@@ -51,13 +55,12 @@ export const NavigationDrawer = ({
   children,
   className,
   footer,
-  isSubMenu,
   logo,
   title,
 }: NavigationDrawerProps) => {
   const [isHovered, setIsHovered] = useState(false);
   const isMobile = useIsMobile();
-  const isSettingsPage = useIsSettingsPage();
+  const isSettingsDrawer = useIsSettingsDrawer();
   const theme = useTheme();
   const isNavigationDrawerExpanded = useRecoilValue(
     isNavigationDrawerExpandedState,
@@ -81,7 +84,7 @@ export const NavigationDrawer = ({
 
   const navigationDrawerAnimate = {
     width: isMobile ? mobileWidth : desktopWidth,
-    opacity: isNavigationDrawerExpanded || !isSettingsPage ? 1 : 0,
+    opacity: isNavigationDrawerExpanded || !isSettingsDrawer ? 1 : 0,
   };
 
   return (
@@ -94,11 +97,12 @@ export const NavigationDrawer = ({
       }}
     >
       <StyledContainer
-        isSubMenu={isSubMenu}
+        isSettings={isSettingsDrawer}
+        isMobile={isMobile}
         onMouseEnter={handleHover}
         onMouseLeave={handleMouseLeave}
       >
-        {isSubMenu && title ? (
+        {isSettingsDrawer && title ? (
           !isMobile && <NavigationDrawerBackButton title={title} />
         ) : (
           <NavigationDrawerHeader