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