admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add margin bottom to all navigation drawer items (#7544)

Browse Source 
<img width="259" alt="Capture d’écran 2024-10-09 à 15 43 39"
src="https://github.com/user-attachments/assets/4ddf2ca6-73a6-4d18-9ec6-83b30d66514f">
<img width="259" alt="Capture d’écran 2024-10-09 à 15 43 49"
src="https://github.com/user-attachments/assets/a2c82fba-954a-4104-9a83-427d11644567">
This commit is contained in:
Thomas Trompette
2024-10-09 16:20:24 +02:00
committed by GitHub
parent be49d4fe5d
commit 10fa6e1a6f
2 changed files with 9 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
View File

@ -47,10 +47,6 @@ type SettingsNavigationItem = {
indentationLevel?: NavigationDrawerItemIndentationLevel; indentationLevel?: NavigationDrawerItemIndentationLevel;
}; };
const StyledNavigationDrawerSection = styled(NavigationDrawerSection)`
margin-bottom: ${({ theme }) => theme.spacing(3)};
`;
const StyledIconContainer = styled.div` const StyledIconContainer = styled.div`
border-right: 1px solid ${MAIN_COLORS.yellow}; border-right: 1px solid ${MAIN_COLORS.yellow};
position: absolute; position: absolute;
@ -121,7 +117,7 @@ export const SettingsNavigationDrawerItems = () => {
return ( return (
<> <>
<StyledNavigationDrawerSection> <NavigationDrawerSection>
<NavigationDrawerSectionTitle label="User" /> <NavigationDrawerSectionTitle label="User" />
<SettingsNavigationDrawerItem <SettingsNavigationDrawerItem
label="Profile" label="Profile"
@ -154,8 +150,8 @@ export const SettingsNavigationDrawerItems = () => {
/> />
))} ))}
</NavigationDrawerItemGroup> </NavigationDrawerItemGroup>
</StyledNavigationDrawerSection> </NavigationDrawerSection>
<StyledNavigationDrawerSection> <NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Workspace" /> <NavigationDrawerSectionTitle label="Workspace" />
<SettingsNavigationDrawerItem <SettingsNavigationDrawerItem
label="General" label="General"
@ -192,7 +188,7 @@ export const SettingsNavigationDrawerItems = () => {
Icon={IconCode} Icon={IconCode}
/> />
)} )}
</StyledNavigationDrawerSection> </NavigationDrawerSection>
<AnimatePresence> <AnimatePresence>
{isAdvancedModeEnabled && ( {isAdvancedModeEnabled && (
<motion.div <motion.div
@ -206,7 +202,7 @@ export const SettingsNavigationDrawerItems = () => {
<StyledIconContainer> <StyledIconContainer>
<StyledIconTool size={12} color={MAIN_COLORS.yellow} /> <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
</StyledIconContainer> </StyledIconContainer>
<StyledNavigationDrawerSection> <NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Developers" /> <NavigationDrawerSectionTitle label="Developers" />
<SettingsNavigationDrawerItem <SettingsNavigationDrawerItem
label="API & Webhooks" label="API & Webhooks"
@ -220,12 +216,12 @@ export const SettingsNavigationDrawerItems = () => {
Icon={IconFunction} Icon={IconFunction}
/> />
)} )}
</StyledNavigationDrawerSection> </NavigationDrawerSection>
</StyledDeveloperSection> </StyledDeveloperSection>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
<StyledNavigationDrawerSection> <NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Other" /> <NavigationDrawerSectionTitle label="Other" />
<SettingsNavigationDrawerItem <SettingsNavigationDrawerItem
label="Releases" label="Releases"
@ -237,7 +233,7 @@ export const SettingsNavigationDrawerItems = () => {
onClick={signOut} onClick={signOut}
Icon={IconDoorEnter} Icon={IconDoorEnter}
/> />
</StyledNavigationDrawerSection> </NavigationDrawerSection>
</> </>
); );
}; };

1
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
View File

@ -5,6 +5,7 @@ const StyledSection = styled.div`
flex-direction: column; flex-direction: column;
gap: ${({ theme }) => theme.betweenSiblingsGap}; gap: ${({ theme }) => theme.betweenSiblingsGap};
width: 100%; width: 100%;
margin-bottom: ${({ theme }) => theme.spacing(3)};
`; `;
export { StyledSection as NavigationDrawerSection }; export { StyledSection as NavigationDrawerSection };