Fix gap between releases and logout (#10649)

## Context
A gap was introduced when we refactored the menu rendering as Logout
menu item was handled differently in its own NavigationDrawer section
which added the gap.
To fix that we are moving the Logout to the menu rendering logic in
useSettingsNavigationItems hook, allowing items to have onClick prop
instead of a path.

Before
<img width="213" alt="Screenshot 2025-03-04 at 14 36 55"
src="https://github.com/user-attachments/assets/23b63673-a9c4-47de-af71-7dda74469e9f"
/>

After
<img width="225" alt="Screenshot 2025-03-04 at 14 36 38"
src="https://github.com/user-attachments/assets/053c0c0d-8876-40b6-ae2c-b68124393f7f"
/>

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx

@@ -16,7 +16,7 @@ export const SettingsNavigationDrawerItem = ({
   item,
   subItemState,
 }: SettingsNavigationDrawerItemProps) => {
-  const href = getSettingsPath(item.path);
+  const href = item.path ? getSettingsPath(item.path) : '';
   const pathName = useResolvedPath(href).pathname;
   const isActive = !!useMatch({
     path: pathName,
@@ -38,6 +38,7 @@ export const SettingsNavigationDrawerItem = ({
           Icon={item.Icon}
           active={isActive}
           soon={item.soon}
+          onClick={item.onClick}
         />
       </AdvancedSettingsWrapper>
     );
@@ -52,6 +53,7 @@ export const SettingsNavigationDrawerItem = ({
       Icon={item.Icon}
       active={isActive}
       soon={item.soon}
+      onClick={item.onClick}
     />
   );
 };

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -1,6 +1,3 @@
-import { IconDoorEnter } from 'twenty-ui';
-
-import { useAuth } from '@/auth/hooks/useAuth';
 import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
 import { SettingsNavigationDrawerItem } from '@/settings/components/SettingsNavigationDrawerItem';
 import {
@@ -8,19 +5,14 @@ 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';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
-import { useLingui } from '@lingui/react/macro';
 import { matchPath, resolvePath, useLocation } from 'react-router-dom';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsNavigationDrawerItems = () => {
-  const { signOut } = useAuth();
-  const { t } = useLingui();
-
   const settingsNavigationItems: SettingsNavigationSection[] =
     useSettingsNavigationItems();
 
@@ -28,7 +20,7 @@ export const SettingsNavigationDrawerItems = () => {
 
   const getSelectedIndexForSubItems = (subItems: SettingsNavigationItem[]) => {
     return subItems.findIndex((subItem) => {
-      const href = getSettingsPath(subItem.path);
+      const href = subItem.path ? getSettingsPath(subItem.path) : '';
       const pathName = resolvePath(href).pathname;
 
       return matchPath(
@@ -115,13 +107,6 @@ export const SettingsNavigationDrawerItems = () => {
           </NavigationDrawerSection>
         );
       })}
-      <NavigationDrawerSection>
-        <NavigationDrawerItem
-          label={t`Logout`}
-          onClick={signOut}
-          Icon={IconDoorEnter}
-        />
-      </NavigationDrawerSection>
     </>
   );
 };

packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx

@@ -6,6 +6,7 @@ import {
   IconColorSwatch,
   IconComponent,
   IconCurrencyDollar,
+  IconDoorEnter,
   IconFlask,
   IconFunction,
   IconHierarchy2,
@@ -23,6 +24,7 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
 import { SettingsPermissions } from '~/generated/graphql';
 
+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';
@@ -40,7 +42,8 @@ export type SettingsNavigationSection = {
 
 export type SettingsNavigationItem = {
   label: string;
-  path: SettingsPath;
+  path?: SettingsPath;
+  onClick?: () => void;
   Icon: IconComponent;
   indentationLevel?: NavigationDrawerItemIndentationLevel;
   matchSubPages?: boolean;
@@ -63,7 +66,7 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
 
   const featureFlags = useFeatureFlagsMap();
   const permissionMap = useSettingsPermissionMap();
-
+  const { signOut } = useAuth();
   return [
     {
       label: t`User`,
@@ -193,6 +196,11 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
           path: SettingsPath.Releases,
           Icon: IconRocket,
         },
+        {
+          label: t`Logout`,
+          onClick: signOut,
+          Icon: IconDoorEnter,
+        },
       ],
     },
   ];