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"
/>
This commit is contained in:
Weiko
2025-03-04 14:58:36 +01:00
committed by GitHub
parent 696c510933
commit 19fce0c77d
3 changed files with 14 additions and 19 deletions

View File

@ -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,
},
],
},
];