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

Fix settings navigation advanced design (#7472)

Browse Source 
This PR moved the settings navigation to the left and bottom
https://github.com/twentyhq/twenty/pull/7130

Updating the logic to:
-remove logic that move the existing
-add the setting icon to absolute

<img width="264" alt="Capture d’écran 2024-10-07 à 18 04 05"
src="https://github.com/user-attachments/assets/b848a5dd-50e9-48c2-bb50-1dcffa9481ac">
<img width="264" alt="Capture d’écran 2024-10-07 à 18 04 11"
src="https://github.com/user-attachments/assets/3812929c-dce0-410b-8caa-3ea1210af958">
This commit is contained in:
Thomas Trompette
2024-10-07 18:19:00 +02:00
committed by GitHub
parent 8b716f98f7
commit fbb5b3dfd4
6 changed files with 36 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 (
<>
<StyledNavigationDrawerSection withLeftMargin>
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="User" />
<SettingsNavigationDrawerItem
label="Profile"
@ -156,8 +152,8 @@ export const SettingsNavigationDrawerItems = () => {
/>
))}
</NavigationDrawerItemGroup>
</StyledNavigationDrawerSection>
<StyledNavigationDrawerSection withLeftMargin>
</NavigationDrawerSection>
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Workspace" />
<SettingsNavigationDrawerItem
label="General"
@ -194,7 +190,7 @@ export const SettingsNavigationDrawerItems = () => {
Icon={IconCode}
/>
)}
</StyledNavigationDrawerSection>
</NavigationDrawerSection>
<AnimatePresence>
{isAdvancedModeEnabled && (
<motion.div
@ -208,7 +204,7 @@ export const SettingsNavigationDrawerItems = () => {
<StyledIconContainer>
<StyledIconTool size={12} color={MAIN_COLORS.yellow} />
</StyledIconContainer>
<StyledNavigationDrawerSection>
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Developers" />
<SettingsNavigationDrawerItem
label="API & Webhooks"
@ -222,12 +218,12 @@ export const SettingsNavigationDrawerItems = () => {
Icon={IconFunction}
/>
)}
</StyledNavigationDrawerSection>
</NavigationDrawerSection>
</StyledDeveloperSection>
</motion.div>
)}
</AnimatePresence>
<StyledNavigationDrawerSection withLeftMargin>
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Other" />
<SettingsNavigationDrawerItem
label="Releases"
@ -239,7 +235,7 @@ export const SettingsNavigationDrawerItems = () => {
onClick={signOut}
Icon={IconDoorEnter}
/>
</StyledNavigationDrawerSection>
</NavigationDrawerSection>
</>
);
};