From 6f7e6e63f830adcae755ce57582635893006e1d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Benedet?=
 <105388117+joaobenedetmachado@users.noreply.github.com>
Date: Wed, 26 Mar 2025 18:10:12 -0300
Subject: [PATCH] fix: improve settings menu spacing by moving logout into last
 section (#11202)

Issue: https://github.com/twentyhq/twenty/issues/11194

- Remove separate navigation drawer section for logout button
- Move logout button into the last section of settings menu
- Fix visual spacing between menu items

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../components/SettingsNavigationDrawerItems.tsx      | 11 -----------
 .../settings/hooks/useSettingsNavigationItems.tsx     |  8 ++++++++
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
index e139ea1ec..8d8691fe0 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
@@ -1,4 +1,3 @@
-import { useAuth } from '@/auth/hooks/useAuth';
 import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
 import { SettingsNavigationDrawerItem } from '@/settings/components/SettingsNavigationDrawerItem';
 import {
@@ -6,7 +5,6 @@ import {
   SettingsNavigationSection,
   useSettingsNavigationItems,
 } from '@/settings/hooks/useSettingsNavigationItems';
-import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerItemGroup } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemGroup';
 import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
@@ -15,7 +13,6 @@ import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { matchPath, resolvePath, useLocation } from 'react-router-dom';
-import { IconDoorEnter } from 'twenty-ui';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledInnerContainer = styled.div`
@@ -23,7 +20,6 @@ const StyledInnerContainer = styled.div`
 `;
 
 export const SettingsNavigationDrawerItems = () => {
-  const { signOut } = useAuth();
   const { t } = useLingui();
 
   const settingsNavigationItems: SettingsNavigationSection[] =
@@ -129,13 +125,6 @@ export const SettingsNavigationDrawerItems = () => {
             </NavigationDrawerSection>
           );
         })}
-        <NavigationDrawerSection>
-          <NavigationDrawerItem
-            label={t`Logout`}
-            onClick={signOut}
-            Icon={IconDoorEnter}
-          />
-        </NavigationDrawerSection>
       </StyledInnerContainer>
     </ScrollWrapper>
   );
diff --git a/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx b/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx
index 36e091035..6c41daddf 100644
--- a/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx
+++ b/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx
@@ -6,6 +6,7 @@ import {
   IconColorSwatch,
   IconComponent,
   IconCurrencyDollar,
+  IconDoorEnter,
   IconFlask,
   IconFunction,
   IconHierarchy2,
@@ -22,6 +23,7 @@ import {
 
 import { SettingsPath } from '@/types/SettingsPath';
 
+import { useAuth } from '@/auth/hooks/useAuth';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { billingState } from '@/client-config/states/billingState';
 import { labPublicFeatureFlagsState } from '@/client-config/states/labPublicFeatureFlagsState';
@@ -52,6 +54,7 @@ export type SettingsNavigationItem = {
 
 const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
   const billing = useRecoilValue(billingState);
+  const { signOut } = useAuth();
 
   const isFunctionSettingsEnabled = false;
   const isBillingEnabled = billing?.isBillingEnabled ?? false;
@@ -197,6 +200,11 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
           path: SettingsPath.Releases,
           Icon: IconRocket,
         },
+        {
+          label: t`Logout`,
+          onClick: signOut,
+          Icon: IconDoorEnter,
+        },
       ],
     },
   ];