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};
}
`;