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/settings/components/SettingsNavigationDrawerItems.tsx

@@ -39,31 +39,6 @@ import styled from '@emotion/styled';
 import { AnimatePresence, motion } from 'framer-motion';
 import { matchPath, resolvePath, useLocation } from 'react-router-dom';
 
-const StyledNavigationDrawerSection = styled(NavigationDrawerSection)<{
-  withLeftMargin?: boolean;
-}>`
-  margin-left: ${({ withLeftMargin, theme }) =>
-    withLeftMargin && theme.spacing(5)};
-  margin-top: ${({ theme }) => theme.spacing(3)};
-`;
-
-const StyledIconContainer = styled.div`
-  border-right: 1px solid ${MAIN_COLORS.yellow};
-  display: flex;
-  margin-top: ${({ theme }) => theme.spacing(5)};
-  width: 16px;
-`;
-
-const StyledDeveloperSection = styled.div`
-  display: flex;
-  width: 100%;
-  gap: ${({ theme }) => theme.spacing(1)};
-`;
-
-const StyledIconTool = styled(IconTool)`
-  margin-right: ${({ theme }) => theme.spacing(0.5)};
-`;
-
 type SettingsNavigationItem = {
   label: string;
   path: SettingsPath;
@@ -72,6 +47,27 @@ type SettingsNavigationItem = {
   indentationLevel?: NavigationDrawerItemIndentationLevel;
 };
 
+const StyledIconContainer = styled.div`
+  border-right: 1px solid ${MAIN_COLORS.yellow};
+  display: flex;
+  width: 16px;
+  position: absolute;
+  left: ${({ theme }) => theme.spacing(-5)};
+  margin-top: ${({ theme }) => theme.spacing(2)};
+  height: 90%;
+`;
+
+const StyledDeveloperSection = styled.div`
+  display: flex;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing(1)};
+  position: relative;
+`;
+
+const StyledIconTool = styled(IconTool)`
+  margin-right: ${({ theme }) => theme.spacing(0.5)};
+`;
+
 export const SettingsNavigationDrawerItems = () => {
   const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
   const { contentRef, motionAnimationVariants } = useExpandedHeightAnimation(
@@ -123,7 +119,7 @@ export const SettingsNavigationDrawerItems = () => {
 
   return (
     <>
-      <StyledNavigationDrawerSection withLeftMargin>
+      <NavigationDrawerSection>
         <NavigationDrawerSectionTitle label="User" />
         <SettingsNavigationDrawerItem
           label="Profile"
@@ -156,8 +152,8 @@ export const SettingsNavigationDrawerItems = () => {
             />
           ))}
         </NavigationDrawerItemGroup>
-      </StyledNavigationDrawerSection>
+      </NavigationDrawerSection>
-      <StyledNavigationDrawerSection withLeftMargin>
+      <NavigationDrawerSection>
         <NavigationDrawerSectionTitle label="Workspace" />
         <SettingsNavigationDrawerItem
           label="General"
@@ -194,7 +190,7 @@ export const SettingsNavigationDrawerItems = () => {
             Icon={IconCode}
           />
         )}
-      </StyledNavigationDrawerSection>
+      </NavigationDrawerSection>
       <AnimatePresence>
         {isAdvancedModeEnabled && (
           <motion.div
@@ -208,7 +204,7 @@ export const SettingsNavigationDrawerItems = () => {
               <StyledIconContainer>
                 <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
               </StyledIconContainer>
-              <StyledNavigationDrawerSection>
+              <NavigationDrawerSection>
                 <NavigationDrawerSectionTitle label="Developers" />
                 <SettingsNavigationDrawerItem
                   label="API & Webhooks"
@@ -222,12 +218,12 @@ export const SettingsNavigationDrawerItems = () => {
                     Icon={IconFunction}
                   />
                 )}
-              </StyledNavigationDrawerSection>
+              </NavigationDrawerSection>
             </StyledDeveloperSection>
           </motion.div>
         )}
       </AnimatePresence>
-      <StyledNavigationDrawerSection withLeftMargin>
+      <NavigationDrawerSection>
         <NavigationDrawerSectionTitle label="Other" />
         <SettingsNavigationDrawerItem
           label="Releases"
@@ -239,7 +235,7 @@ export const SettingsNavigationDrawerItems = () => {
           onClick={signOut}
           Icon={IconDoorEnter}
         />
-      </StyledNavigationDrawerSection>
+      </NavigationDrawerSection>
     </>
   );
 };

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;
+  gap: ${({ theme }) => theme.spacing(3)};
-  ${({ isSubMenu, theme }) => !isSubMenu && `gap: ${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 };