Settings Advanced Mode (#7130)

### Description

- We implemented the Advanced Mode state and used this on a section of
the settings sidebar
- in DefaultLayout.tsx, was updated because of the 64 + 16(container
size of IconTool + the margins)

### <https://jam.dev/c/29bcec70-0b7f-4afa-98e6-9755657cf09d>

### Refs

#6147 

Fixes #6147

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>

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

@@ -1,7 +1,4 @@
-import { css, Global, useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
-import { Outlet } from 'react-router-dom';
+import { AuthModal } from '@/auth/components/AuthModal';
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
 import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
@@ -14,7 +11,10 @@ import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
 import { DESKTOP_NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useScreenSize } from '@/ui/utilities/screen-size/hooks/useScreenSize';
-import { AuthModal } from '@/auth/components/AuthModal';
+import { css, Global, useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
+import { Outlet } from 'react-router-dom';
 
 const StyledLayout = styled.div`
   background: ${({ theme }) => theme.background.noisy};
@@ -85,7 +85,7 @@ export const DefaultLayout = () => {
                 ? (windowsWidth -
                     (OBJECT_SETTINGS_WIDTH +
                       DESKTOP_NAV_DRAWER_WIDTHS.menu +
-                      64)) /
+                      88)) /
                   2
                 : 0,
           }}

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

@@ -0,0 +1,62 @@
+import { Toggle } from '@/ui/input/components/Toggle';
+import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+import { IconTool, MAIN_COLORS } from 'twenty-ui';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledText = styled.span`
+  color: ${({ theme }) => theme.font.color.secondary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledIconContainer = styled.div`
+  border-right: 1px solid ${MAIN_COLORS.yellow};
+  display: flex;
+  height: 16px;
+`;
+
+const StyledToggleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+const StyledIconTool = styled(IconTool)`
+  margin-right: ${({ theme }) => theme.spacing(0.5)};
+`;
+
+export const AdvancedSettingsToggle = () => {
+  const [isAdvancedModeEnabled, setIsAdvancedModeEnabled] = useRecoilState(
+    isAdvancedModeEnabledState,
+  );
+
+  const onChange = (newValue: boolean) => {
+    setIsAdvancedModeEnabled(newValue);
+  };
+
+  return (
+    <StyledContainer>
+      <StyledIconContainer>
+        <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
+      </StyledIconContainer>
+      <StyledToggleContainer>
+        <StyledText>Advanced</StyledText>
+        <Toggle
+          onChange={onChange}
+          color={MAIN_COLORS.yellow}
+          value={isAdvancedModeEnabled}
+        />
+      </StyledToggleContainer>
+    </StyledContainer>
+  );
+};

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

@@ -40,6 +40,7 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
   ${({ isSubMenu, theme }) =>
     isSubMenu
       ? css`
+          padding-left: ${theme.spacing(0)};
           padding-right: ${theme.spacing(8)};
         `
       : ''}
@@ -48,13 +49,12 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
     width: 100%;
   }
 `;
-
-const StyledItemsContainer = styled.div`
+const StyledItemsContainer = styled.div<{ isSubMenu?: boolean }>`
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(3)};
   margin-bottom: auto;
   overflow-y: auto;
+  ${({ isSubMenu, theme }) => !isSubMenu && `gap: ${theme.spacing(3)}`}
 `;
 
 export const NavigationDrawer = ({
@@ -111,7 +111,9 @@ export const NavigationDrawer = ({
             showCollapseButton={isHovered}
           />
         )}
-        <StyledItemsContainer>{children}</StyledItemsContainer>
+        <StyledItemsContainer isSubMenu={isSubMenu}>
+          {children}
+        </StyledItemsContainer>
         {footer}
       </StyledContainer>
     </StyledAnimatedContainer>

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

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

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+import { localStorageEffect } from '~/utils/recoil-effects';
+
+export const isAdvancedModeEnabledState = atom<boolean>({
+  key: 'isAdvancedModeEnabledAtom',
+  default: false,
+  effects: [localStorageEffect()],
+});