Disable going to settings in layout edit mode (#19265)

https://github.com/user-attachments/assets/c5e07ef3-f4c5-4dc1-b577-c333525327f5

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 (
     <StyledScrollableItemsContainer>
       <NavigationDrawerOpenedSection />
@@ -37,7 +43,7 @@ export const MainNavigationDrawerScrollableItems = () => {
         <FavoritesSectionDispatcher />
         <WorkspaceSectionDispatcher />
       </Suspense>
-      <NavigationDrawerOtherSection />
+      {!isLayoutCustomizationModeEnabled && <NavigationDrawerOtherSection />}
     </StyledScrollableItemsContainer>
   );
 };

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 = () => {
     <Dropdown
       dropdownId={MULTI_WORKSPACE_DROPDOWN_ID}
       dropdownOffset={{ y: -29, x: -5 }}
-      clickableComponent={<MultiWorkspaceDropdownClickableComponent />}
+      clickableComponent={
+        <MultiWorkspaceDropdownClickableComponent
+          disabled={isLayoutCustomizationModeEnabled}
+        />
+      }
       clickableComponentWidth="100%"
+      disableClickForClickableComponent={isLayoutCustomizationModeEnabled}
       dropdownComponents={<DropdownComponents />}
       onClose={() => {
         setMultiWorkspaceDropdown('default');

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 { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
 import {
   StyledContainer,
   StyledIconChevronDown,
   StyledLabel,
   StyledLabelWrapper,
 } from '@/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles';
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
-import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+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 = () => {
     <StyledContainer
       data-testid="workspace-dropdown"
       isNavigationDrawerExpanded={isNavigationDrawerExpanded}
+      disabled={disabled}
     >
       <Avatar
         placeholder={currentWorkspace?.displayName || ''}

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx

@@ -4,23 +4,32 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 export const StyledContainer = styled.div<{
   isNavigationDrawerExpanded: boolean;
+  disabled?: boolean;
 }>`
   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};
+    background-color: ${({ disabled }) =>
-    border: 1px solid ${themeCssVariables.border.color.medium};
+      disabled
+        ? 'transparent'
+        : themeCssVariables.background.transparent.lighter};
+    border: 1px solid
+      ${({ disabled }) =>
+        disabled ? 'transparent' : themeCssVariables.border.color.medium};
   }
 `;