fixed issue Refine Settings Layout (#3429)

* fixed issue Refine Settings Layout

* fixed width and issue

* Fix according to review

* Fix

* Fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { css, Global, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
 
 import { AuthModal } from '@/auth/components/Modal';
@@ -11,8 +12,12 @@ import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
 import { AppNavigationDrawer } from '@/navigation/components/AppNavigationDrawer';
 import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar';
+import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
+import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
 import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
+import { desktopNavDrawerWidths } from '@/ui/navigation/navigation-drawer/constants';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { useScreenSize } from '@/ui/utilities/screen-size/hooks/useScreenSize';
 
 const StyledLayout = styled.div`
   background: ${({ theme }) => theme.background.noisy};
@@ -39,7 +44,7 @@ const StyledLayout = styled.div`
   }
 `;
 
-const StyledPageContainer = styled.div`
+const StyledPageContainer = styled(motion.div)`
   display: flex;
   flex: 1 1 auto;
   flex-direction: row;
@@ -63,7 +68,9 @@ type DefaultLayoutProps = {
 export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
   const onboardingStatus = useOnboardingStatus();
   const isMobile = useIsMobile();
+  const isSettingsPage = useIsSettingsPage();
   const theme = useTheme();
+  const widowsWidth = useScreenSize().width;
   return (
     <>
       <Global
@@ -76,7 +83,20 @@ export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
       <StyledLayout>
         <CommandMenu />
         <KeyboardShortcutMenu />
-        <StyledPageContainer>
+
+        <StyledPageContainer
+          animate={{
+            marginLeft:
+              isSettingsPage && !isMobile
+                ? (widowsWidth -
+                    (objectSettingsWidth + desktopNavDrawerWidths.menu + 64)) /
+                  2
+                : 0,
+          }}
+          transition={{
+            duration: theme.animation.duration.normal,
+          }}
+        >
           <StyledAppNavigationDrawer />
           <StyledMainContainer>
             {onboardingStatus &&

packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx

@@ -19,8 +19,8 @@ const StyledMainContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(2)};
   min-height: 0;
   padding-bottom: ${({ theme }) => theme.spacing(3)};
-  padding-left: 0;
   padding-right: ${({ theme }) => theme.spacing(3)};
+  padding-left: 0;
   width: 100%;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {

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

@@ -33,7 +33,7 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(8)};
   height: 100%;
-  min-width: ${desktopNavDrawerWidths.menu};
+  min-width: ${desktopNavDrawerWidths.menu}px;
   padding: ${({ theme }) => theme.spacing(3, 2, 4)};
 
   ${({ isSubMenu, theme }) =>
@@ -80,9 +80,7 @@ export const NavigationDrawer = ({
 
   const desktopWidth = !isNavigationDrawerOpen
     ? 12
-    : isSubMenu
-      ? desktopNavDrawerWidths.submenu
-      : desktopNavDrawerWidths.menu;
+    : desktopNavDrawerWidths.menu;
 
   const mobileWidth = isNavigationDrawerOpen ? '100%' : 0;
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/index.ts

@@ -1,4 +1,3 @@
 export const desktopNavDrawerWidths = {
-  menu: '236px',
-  submenu: '536px',
+  menu: 236,
 };

packages/twenty-front/src/modules/ui/utilities/screen-size/hooks/useScreenSize.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+export const useScreenSize = () => {
+  const [screenSize, setScreenSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return screenSize;
+};