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/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>
+  );
+};