-
Notifications
You must be signed in to change notification settings - Fork 2.4k
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
Conversation
There was a problem hiding this 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 inDefaultLayout.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
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%; | ||
`; |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
briliant
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">
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