diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
index e721e8d8e..f2ea6c95a 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
@@ -39,31 +39,6 @@ import styled from '@emotion/styled';
import { AnimatePresence, motion } from 'framer-motion';
import { matchPath, resolvePath, useLocation } from 'react-router-dom';
-const StyledNavigationDrawerSection = styled(NavigationDrawerSection)<{
- withLeftMargin?: boolean;
-}>`
- margin-left: ${({ withLeftMargin, theme }) =>
- withLeftMargin && theme.spacing(5)};
- margin-top: ${({ theme }) => theme.spacing(3)};
-`;
-
-const StyledIconContainer = styled.div`
- border-right: 1px solid ${MAIN_COLORS.yellow};
- display: flex;
- margin-top: ${({ theme }) => theme.spacing(5)};
- width: 16px;
-`;
-
-const StyledDeveloperSection = styled.div`
- display: flex;
- width: 100%;
- gap: ${({ theme }) => theme.spacing(1)};
-`;
-
-const StyledIconTool = styled(IconTool)`
- margin-right: ${({ theme }) => theme.spacing(0.5)};
-`;
-
type SettingsNavigationItem = {
label: string;
path: SettingsPath;
@@ -72,6 +47,27 @@ type SettingsNavigationItem = {
indentationLevel?: NavigationDrawerItemIndentationLevel;
};
+const StyledIconContainer = styled.div`
+ border-right: 1px solid ${MAIN_COLORS.yellow};
+ display: flex;
+ width: 16px;
+ position: absolute;
+ left: ${({ theme }) => theme.spacing(-5)};
+ margin-top: ${({ theme }) => theme.spacing(2)};
+ height: 90%;
+`;
+
+const StyledDeveloperSection = styled.div`
+ display: flex;
+ width: 100%;
+ gap: ${({ theme }) => theme.spacing(1)};
+ position: relative;
+`;
+
+const StyledIconTool = styled(IconTool)`
+ margin-right: ${({ theme }) => theme.spacing(0.5)};
+`;
+
export const SettingsNavigationDrawerItems = () => {
const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
const { contentRef, motionAnimationVariants } = useExpandedHeightAnimation(
@@ -123,7 +119,7 @@ export const SettingsNavigationDrawerItems = () => {
return (
<>
-
+
{
/>
))}
-
-
+
+
{
Icon={IconCode}
/>
)}
-
+
{isAdvancedModeEnabled && (
{
-
+
{
Icon={IconFunction}
/>
)}
-
+
)}
-
+
{
onClick={signOut}
Icon={IconDoorEnter}
/>
-
+
>
);
};
diff --git a/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx
index 555e068d6..0a05da365 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx
@@ -85,7 +85,7 @@ export const DefaultLayout = () => {
? (windowsWidth -
(OBJECT_SETTINGS_WIDTH +
DESKTOP_NAV_DRAWER_WIDTHS.menu +
- 88)) /
+ 64)) /
2
: 0,
}}
diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/AdvancedSettingsToggle.tsx b/packages/twenty-front/src/modules/ui/navigation/link/components/AdvancedSettingsToggle.tsx
index a45814691..e08f60031 100644
--- a/packages/twenty-front/src/modules/ui/navigation/link/components/AdvancedSettingsToggle.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/link/components/AdvancedSettingsToggle.tsx
@@ -9,6 +9,7 @@ const StyledContainer = styled.div`
display: flex;
width: 100%;
gap: ${({ theme }) => theme.spacing(2)};
+ position: relative;
`;
const StyledText = styled.span`
@@ -20,8 +21,9 @@ const StyledText = styled.span`
const StyledIconContainer = styled.div`
border-right: 1px solid ${MAIN_COLORS.yellow};
- display: flex;
height: 16px;
+ position: absolute;
+ left: ${({ theme }) => theme.spacing(-5)};
`;
const StyledToggleContainer = styled.div`
@@ -50,7 +52,7 @@ export const AdvancedSettingsToggle = () => {
- Advanced
+ Advanced:
`
display: flex;
flex-direction: column;
margin-bottom: auto;
- overflow-y: auto;
- ${({ isSubMenu, theme }) => !isSubMenu && `gap: ${theme.spacing(3)}`}
+ gap: ${({ theme }) => theme.spacing(3)};
+ ${({ isSubMenu }) => (!isSubMenu ? 'overflow-y: auto' : '')};
`;
export const NavigationDrawer = ({
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
index d906f45aa..96490d7f0 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
@@ -35,7 +35,6 @@ const StyledContainer = styled.div`
flex-direction: row;
height: ${({ theme }) => theme.spacing(8)};
justify-content: space-between;
- margin-left: ${({ theme }) => theme.spacing(5)};
`;
export const NavigationDrawerBackButton = ({
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
index c1fd93847..bea1d0f8e 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
@@ -4,7 +4,6 @@ const StyledSection = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.betweenSiblingsGap};
- width: 100%;
`;
export { StyledSection as NavigationDrawerSection };