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