Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix settings navigation advanced design #7472

Merged
merged 1 commit into from
Oct 7, 2024

Conversation

thomtrp
Copy link
Contributor

@thomtrp thomtrp commented Oct 7, 2024

This PR moved the settings navigation to the left and bottom #7130

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

Capture d’écran 2024-10-07 à 18 04 05 Capture d’écran 2024-10-07 à 18 04 11

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Summary

This pull request focuses on improving the settings navigation design by adjusting layout and positioning of various components. Key changes include:

  • Removed logic that moved existing elements and added the settings icon to an absolute position in SettingsNavigationDrawerItems.tsx
  • Adjusted the marginLeft calculation in DefaultLayout.tsx for the settings page, potentially making it slightly wider
  • Modified AdvancedSettingsToggle.tsx to use relative and absolute positioning for better layout control
  • Updated NavigationDrawer.tsx to improve responsiveness and animation logic for drawer width
  • Removed left margin from NavigationDrawerBackButton.tsx to align with new positioning
  • Removed fixed width from NavigationDrawerSection.tsx for more flexible layout

These changes collectively aim to create a more consistent and visually appealing settings navigation experience.

6 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings

Comment on lines 50 to 58
const StyledIconContainer = styled.div`
border-right: 1px solid ${MAIN_COLORS.yellow};
display: flex;
margin-top: ${({ theme }) => theme.spacing(5)};
width: 16px;
position: absolute;
left: ${({ theme }) => theme.spacing(-5)};
margin-top: ${({ theme }) => theme.spacing(2)};
height: 90%;
`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: The StyledIconContainer is now positioned absolutely. Ensure this doesn't cause layout issues in different viewport sizes.

Copy link
Collaborator

@ijreilly ijreilly left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

briliant

@thomtrp thomtrp merged commit fbb5b3d into main Oct 7, 2024
13 checks passed
@thomtrp thomtrp deleted the tt-fix-advanced-design-settings branch October 7, 2024 16:19
harshit078 pushed a commit to harshit078/twenty that referenced this pull request Oct 14, 2024
This PR moved the settings navigation to the left and bottom
twentyhq#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">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants