db88c93eff
closes #11195 closes #11199 ### Context The yellow dots in the Settings Navigation Drawer (used to indicate advanced settings) were being hidden due to ScrollWrapper's overflow handling. This required both a fix for the visibility issue and an improvement to the component structure. ### Changes 1. Keep scrolling logic of the MainNavigationDrawer and SettingsNavigationDrawer in one place, and conditionally apply `<StyledScrollableInnerContainer>` when isSettingsDrawer is true. 2. Fixed Yellow Dots Visibility Added specific padding in NavigationDrawerScrollableContent to accommodate yellow dots: ``` padding-left: ${theme.spacing(5)}; // Space for yellow dots padding-right: ${theme.spacing(8)}; // Space for no-padding scroll ``` This ensures the yellow dots are visible while maintaining proper scroll behavior 3. Improved Component Composition Using proper component composition instead of passing components as props Components are now composed in a more React-idiomatic way: ``` <NavigationDrawer> <NavigationDrawerScrollableContent> <SettingsNavigationDrawerItems /> </NavigationDrawerScrollableContent> <NavigationDrawerFixedContent> <AdvancedSettingsToggle /> </NavigationDrawerFixedContent> </NavigationDrawer> ``` --------- Co-authored-by: Charles Bochet <charles@twenty.com>
Run yarn dev while server running on port 3000