From 4dfd6426c2c2e4657071a25e025ddec7d46f08c4 Mon Sep 17 00:00:00 2001 From: Baptiste Devessier Date: Thu, 2 Apr 2026 15:54:20 +0200 Subject: [PATCH] Disable going to settings in layout edit mode (#19265) https://github.com/user-attachments/assets/c5e07ef3-f4c5-4dc1-b577-c333525327f5 --- .../MainNavigationDrawerScrollableItems.tsx | 8 +++++++- .../MultiWorkspaceDropdownButton.tsx | 12 +++++++++++- ...MultiWorkspaceDropdownClickableComponent.tsx | 17 ++++++++++++----- .../internal/MultiWorkspacesDropdownStyles.tsx | 15 ++++++++++++--- 4 files changed, 42 insertions(+), 10 deletions(-) diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx index cffe96eca2..fe0bfc3c9e 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx @@ -1,7 +1,9 @@ import { NavigationDrawerOpenedSection } from '@/navigation-menu-item/display/sections/components/NavigationDrawerOpenedSection'; import { NavigationDrawerWorkspaceSectionSkeletonLoader } from '@/object-metadata/components/NavigationDrawerWorkspaceSectionSkeletonLoader'; +import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState'; import { NavigationDrawerOtherSection } from '@/navigation/components/NavigationDrawerOtherSection'; +import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { styled } from '@linaria/react'; import { lazy, Suspense } from 'react'; @@ -30,6 +32,10 @@ const StyledScrollableItemsContainer = styled.div` `; export const MainNavigationDrawerScrollableItems = () => { + const isLayoutCustomizationModeEnabled = useAtomStateValue( + isLayoutCustomizationModeEnabledState, + ); + return ( @@ -37,7 +43,7 @@ export const MainNavigationDrawerScrollableItems = () => { - + {!isLayoutCustomizationModeEnabled && } ); }; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton.tsx index 6480a90bf2..76a8e107bb 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton.tsx @@ -1,3 +1,4 @@ +import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { MultiWorkspaceDropdownClickableComponent } from '@/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent'; import { MultiWorkspaceDropdownDefaultComponents } from '@/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents'; @@ -6,12 +7,16 @@ import { MultiWorkspaceDropdownWorkspacesListComponents } from '@/ui/navigation/ import { MULTI_WORKSPACE_DROPDOWN_ID } from '@/ui/navigation/navigation-drawer/constants/MultiWorkspaceDropdownId'; import { multiWorkspaceDropdownState } from '@/ui/navigation/navigation-drawer/states/multiWorkspaceDropdownState'; import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; +import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { useMemo } from 'react'; export const MultiWorkspaceDropdownButton = () => { const [multiWorkspaceDropdown, setMultiWorkspaceDropdown] = useAtomState( multiWorkspaceDropdownState, ); + const isLayoutCustomizationModeEnabled = useAtomStateValue( + isLayoutCustomizationModeEnabledState, + ); const DropdownComponents = useMemo(() => { switch (multiWorkspaceDropdown) { @@ -28,8 +33,13 @@ export const MultiWorkspaceDropdownButton = () => { } + clickableComponent={ + + } clickableComponentWidth="100%" + disableClickForClickableComponent={isLayoutCustomizationModeEnabled} dropdownComponents={} onClose={() => { setMultiWorkspaceDropdown('default'); diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx index 7a9983fbf1..e3771dda34 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx @@ -1,19 +1,25 @@ -import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo'; -import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper'; +import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { StyledContainer, StyledIconChevronDown, StyledLabel, StyledLabelWrapper, } from '@/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles'; -import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; -import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; +import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper'; +import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; +import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { useContext } from 'react'; import { Avatar } from 'twenty-ui/display'; import { ThemeContext } from 'twenty-ui/theme-constants'; -export const MultiWorkspaceDropdownClickableComponent = () => { +type MultiWorkspaceDropdownClickableComponentProps = { + disabled?: boolean; +}; + +export const MultiWorkspaceDropdownClickableComponent = ({ + disabled, +}: MultiWorkspaceDropdownClickableComponentProps) => { const { theme } = useContext(ThemeContext); const currentWorkspace = useAtomStateValue(currentWorkspaceState); @@ -24,6 +30,7 @@ export const MultiWorkspaceDropdownClickableComponent = () => { ` align-items: center; border: 1px solid transparent; border-radius: ${themeCssVariables.border.radius.sm}; box-sizing: border-box; color: ${themeCssVariables.font.color.primary}; - cursor: pointer; + cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')}; display: flex; gap: ${({ isNavigationDrawerExpanded }) => isNavigationDrawerExpanded ? themeCssVariables.spacing[2] : '0'}; max-width: 100%; min-width: 0; + opacity: ${({ disabled }) => (disabled ? 0.5 : 1)}; padding: calc(${themeCssVariables.spacing[1]} - 1px); + pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')}; width: fit-content; + &:hover { - background-color: ${themeCssVariables.background.transparent.lighter}; - border: 1px solid ${themeCssVariables.border.color.medium}; + background-color: ${({ disabled }) => + disabled + ? 'transparent' + : themeCssVariables.background.transparent.lighter}; + border: 1px solid + ${({ disabled }) => + disabled ? 'transparent' : themeCssVariables.border.color.medium}; } `;