Fix settings navigation advanced design (#7472)

This PR moved the settings navigation to the left and bottom
https://github.com/twentyhq/twenty/pull/7130

Updating the logic to:
-remove logic that move the existing
-add the setting icon to absolute

<img width="264" alt="Capture d’écran 2024-10-07 à 18 04 05"
src="https://github.com/user-attachments/assets/b848a5dd-50e9-48c2-bb50-1dcffa9481ac">
<img width="264" alt="Capture d’écran 2024-10-07 à 18 04 11"
src="https://github.com/user-attachments/assets/3812929c-dce0-410b-8caa-3ea1210af958">

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

@@ -85,7 +85,7 @@ export const DefaultLayout = () => {
                 ? (windowsWidth -
                     (OBJECT_SETTINGS_WIDTH +
                       DESKTOP_NAV_DRAWER_WIDTHS.menu +
-                      88)) /
+                      64)) /
                   2
                 : 0,
           }}

packages/twenty-front/src/modules/ui/navigation/link/components/AdvancedSettingsToggle.tsx

@@ -9,6 +9,7 @@ const StyledContainer = styled.div`
   display: flex;
   width: 100%;
   gap: ${({ theme }) => theme.spacing(2)};
+  position: relative;
 `;
 
 const StyledText = styled.span`
@@ -20,8 +21,9 @@ const StyledText = styled.span`
 
 const StyledIconContainer = styled.div`
   border-right: 1px solid ${MAIN_COLORS.yellow};
-  display: flex;
   height: 16px;
+  position: absolute;
+  left: ${({ theme }) => theme.spacing(-5)};
 `;
 
 const StyledToggleContainer = styled.div`
@@ -50,7 +52,7 @@ export const AdvancedSettingsToggle = () => {
         <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
       </StyledIconContainer>
       <StyledToggleContainer>
-        <StyledText>Advanced</StyledText>
+        <StyledText>Advanced:</StyledText>
         <Toggle
           onChange={onChange}
           color={MAIN_COLORS.yellow}

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

@@ -53,8 +53,8 @@ const StyledItemsContainer = styled.div<{ isSubMenu?: boolean }>`
   display: flex;
   flex-direction: column;
   margin-bottom: auto;
-  overflow-y: auto;
-  ${({ isSubMenu, theme }) => !isSubMenu && `gap: ${theme.spacing(3)}`}
+  gap: ${({ theme }) => theme.spacing(3)};
+  ${({ isSubMenu }) => (!isSubMenu ? 'overflow-y: auto' : '')};
 `;
 
 export const NavigationDrawer = ({

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

@@ -35,7 +35,6 @@ const StyledContainer = styled.div`
   flex-direction: row;
   height: ${({ theme }) => theme.spacing(8)};
   justify-content: space-between;
-  margin-left: ${({ theme }) => theme.spacing(5)};
 `;
 
 export const NavigationDrawerBackButton = ({

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

@@ -4,7 +4,6 @@ const StyledSection = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.betweenSiblingsGap};
-  width: 100%;
 `;
 
 export { StyledSection as NavigationDrawerSection };