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’écran 2024-10-07 à 18 04 05" src="https://github.com/user-attachments/assets/b848a5dd-50e9-48c2-bb50-1dcffa9481ac"> <img width="264" alt="Capture d’écran 2024-10-07 à 18 04 11" src="https://github.com/user-attachments/assets/3812929c-dce0-410b-8caa-3ea1210af958">
2025-11-01 13:17:57 +00:00 · 2024-10-07 18:19:00 +02:00
parent 8b716f98f7
commit fbb5b3dfd4
6 changed files with 36 additions and 40 deletions
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
+++ b/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>
-      <StyledNavigationDrawerSection withLeftMargin>
+      </NavigationDrawerSection>
+      <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>
    </>
  );
 };
--- a/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx
+++ b/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,
          }}
--- a/packages/twenty-front/src/modules/ui/navigation/link/components/AdvancedSettingsToggle.tsx
+++ b/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}
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
+++ b/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 = ({
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
+++ b/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 = ({
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
+++ b/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 };