Navigation drawer refactor (#11251)
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>
This commit is contained in:
nitin
@ -1,19 +1,7 @@
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
|
||||
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
|
||||
import { SettingsNavigationDrawerItems } from '@/settings/components/SettingsNavigationDrawerItems';
|
||||
import { SupportDropdown } from '@/support/components/SupportDropdown';
|
||||
import {
|
||||
NavigationDrawer,
|
||||
NavigationDrawerProps,
|
||||
} from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
|
||||
import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
|
||||
|
||||
import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
|
||||
|
||||
import { MainNavigationDrawerItems } from '@/navigation/components/MainNavigationDrawerItems';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { AdvancedSettingsToggle } from 'twenty-ui/navigation';
|
||||
import { MainNavigationDrawer } from '@/navigation/components/MainNavigationDrawer';
|
||||
import { SettingsNavigationDrawer } from '@/navigation/components/SettingsNavigationDrawer';
|
||||
|
||||
export type AppNavigationDrawerProps = {
|
||||
className?: string;
|
||||
@ -24,38 +12,9 @@ export const AppNavigationDrawer = ({
|
||||
}: AppNavigationDrawerProps) => {
|
||||
const isSettingsDrawer = useIsSettingsDrawer();
|
||||
|
||||
const currentWorkspace = useRecoilValue(currentWorkspaceState);
|
||||
const [isAdvancedModeEnabled, setIsAdvancedModeEnabled] = useRecoilState(
|
||||
isAdvancedModeEnabledState,
|
||||
);
|
||||
|
||||
const { t } = useLingui();
|
||||
|
||||
const drawerProps: NavigationDrawerProps = isSettingsDrawer
|
||||
? {
|
||||
title: t`Exit Settings`,
|
||||
children: <SettingsNavigationDrawerItems />,
|
||||
footer: (
|
||||
<AdvancedSettingsToggle
|
||||
isAdvancedModeEnabled={isAdvancedModeEnabled}
|
||||
setIsAdvancedModeEnabled={setIsAdvancedModeEnabled}
|
||||
label={t`Advanced:`}
|
||||
/>
|
||||
),
|
||||
}
|
||||
: {
|
||||
title: currentWorkspace?.displayName ?? '',
|
||||
children: <MainNavigationDrawerItems />,
|
||||
footer: <SupportDropdown />,
|
||||
};
|
||||
|
||||
return (
|
||||
<NavigationDrawer
|
||||
className={className}
|
||||
title={drawerProps.title}
|
||||
footer={drawerProps.footer}
|
||||
>
|
||||
{drawerProps.children}
|
||||
</NavigationDrawer>
|
||||
return isSettingsDrawer ? (
|
||||
<SettingsNavigationDrawer className={className} />
|
||||
) : (
|
||||
<MainNavigationDrawer className={className} />
|
||||
);
|
||||
};
|
||||
|
||||
@ -0,0 +1,32 @@
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
|
||||
import { MainNavigationDrawerFixedItems } from '@/navigation/components/MainNavigationDrawerFixedItems';
|
||||
import { MainNavigationDrawerScrollableItems } from '@/navigation/components/MainNavigationDrawerScrollableItems';
|
||||
import { SupportDropdown } from '@/support/components/SupportDropdown';
|
||||
import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
|
||||
import { NavigationDrawerFixedContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent';
|
||||
import { NavigationDrawerScrollableContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent';
|
||||
|
||||
export const MainNavigationDrawer = ({ className }: { className?: string }) => {
|
||||
const currentWorkspace = useRecoilValue(currentWorkspaceState);
|
||||
|
||||
return (
|
||||
<NavigationDrawer
|
||||
className={className}
|
||||
title={currentWorkspace?.displayName ?? ''}
|
||||
>
|
||||
<NavigationDrawerFixedContent>
|
||||
<MainNavigationDrawerFixedItems />
|
||||
</NavigationDrawerFixedContent>
|
||||
|
||||
<NavigationDrawerScrollableContent>
|
||||
<MainNavigationDrawerScrollableItems />
|
||||
</NavigationDrawerScrollableContent>
|
||||
|
||||
<NavigationDrawerFixedContent>
|
||||
<SupportDropdown />
|
||||
</NavigationDrawerFixedContent>
|
||||
</NavigationDrawer>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,52 @@
|
||||
import { useOpenRecordsSearchPageInCommandMenu } from '@/command-menu/hooks/useOpenRecordsSearchPageInCommandMenu';
|
||||
import { SettingsPath } from '@/types/SettingsPath';
|
||||
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
|
||||
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
|
||||
import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState';
|
||||
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { useRecoilState, useSetRecoilState } from 'recoil';
|
||||
import { IconSearch, IconSettings } from 'twenty-ui/display';
|
||||
import { useIsMobile } from 'twenty-ui/utilities';
|
||||
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
|
||||
|
||||
export const MainNavigationDrawerFixedItems = () => {
|
||||
const isMobile = useIsMobile();
|
||||
const location = useLocation();
|
||||
const setNavigationMemorizedUrl = useSetRecoilState(
|
||||
navigationMemorizedUrlState,
|
||||
);
|
||||
|
||||
const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] =
|
||||
useRecoilState(isNavigationDrawerExpandedState);
|
||||
const setNavigationDrawerExpandedMemorized = useSetRecoilState(
|
||||
navigationDrawerExpandedMemorizedState,
|
||||
);
|
||||
|
||||
const { t } = useLingui();
|
||||
|
||||
const { openRecordsSearchPage } = useOpenRecordsSearchPageInCommandMenu();
|
||||
return (
|
||||
!isMobile && (
|
||||
<>
|
||||
<NavigationDrawerItem
|
||||
label={t`Search`}
|
||||
Icon={IconSearch}
|
||||
onClick={openRecordsSearchPage}
|
||||
keyboard={['/']}
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
label={t`Settings`}
|
||||
to={getSettingsPath(SettingsPath.ProfilePage)}
|
||||
onClick={() => {
|
||||
setNavigationDrawerExpandedMemorized(isNavigationDrawerExpanded);
|
||||
setIsNavigationDrawerExpanded(true);
|
||||
setNavigationMemorizedUrl(location.pathname + location.search);
|
||||
}}
|
||||
Icon={IconSettings}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
);
|
||||
};
|
||||
@ -1,82 +0,0 @@
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { useRecoilState, useSetRecoilState } from 'recoil';
|
||||
|
||||
import { useOpenRecordsSearchPageInCommandMenu } from '@/command-menu/hooks/useOpenRecordsSearchPageInCommandMenu';
|
||||
import { CurrentWorkspaceMemberFavoritesFolders } from '@/favorites/components/CurrentWorkspaceMemberFavoritesFolders';
|
||||
import { WorkspaceFavorites } from '@/favorites/components/WorkspaceFavorites';
|
||||
import { NavigationDrawerOpenedSection } from '@/object-metadata/components/NavigationDrawerOpenedSection';
|
||||
import { RemoteNavigationDrawerSection } from '@/object-metadata/components/RemoteNavigationDrawerSection';
|
||||
import { SettingsPath } from '@/types/SettingsPath';
|
||||
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
|
||||
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
|
||||
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
|
||||
import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState';
|
||||
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
|
||||
import styled from '@emotion/styled';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
|
||||
import { IconSearch, IconSettings } from 'twenty-ui/display';
|
||||
|
||||
const StyledMainSection = styled(NavigationDrawerSection)`
|
||||
min-height: fit-content;
|
||||
`;
|
||||
const StyledInnerContainer = styled.div`
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const MainNavigationDrawerItems = () => {
|
||||
const isMobile = useIsMobile();
|
||||
const location = useLocation();
|
||||
const setNavigationMemorizedUrl = useSetRecoilState(
|
||||
navigationMemorizedUrlState,
|
||||
);
|
||||
|
||||
const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] =
|
||||
useRecoilState(isNavigationDrawerExpandedState);
|
||||
const setNavigationDrawerExpandedMemorized = useSetRecoilState(
|
||||
navigationDrawerExpandedMemorizedState,
|
||||
);
|
||||
|
||||
const { t } = useLingui();
|
||||
|
||||
const { openRecordsSearchPage } = useOpenRecordsSearchPageInCommandMenu();
|
||||
|
||||
return (
|
||||
<>
|
||||
{!isMobile && (
|
||||
<StyledMainSection>
|
||||
<NavigationDrawerItem
|
||||
label={t`Search`}
|
||||
Icon={IconSearch}
|
||||
onClick={openRecordsSearchPage}
|
||||
keyboard={['/']}
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
label={t`Settings`}
|
||||
to={getSettingsPath(SettingsPath.ProfilePage)}
|
||||
onClick={() => {
|
||||
setNavigationDrawerExpandedMemorized(isNavigationDrawerExpanded);
|
||||
setIsNavigationDrawerExpanded(true);
|
||||
setNavigationMemorizedUrl(location.pathname + location.search);
|
||||
}}
|
||||
Icon={IconSettings}
|
||||
/>
|
||||
</StyledMainSection>
|
||||
)}
|
||||
<ScrollWrapper
|
||||
componentInstanceId={`scroll-wrapper-navigation-drawer`}
|
||||
defaultEnableXScroll={false}
|
||||
>
|
||||
<StyledInnerContainer>
|
||||
<NavigationDrawerOpenedSection />
|
||||
<CurrentWorkspaceMemberFavoritesFolders />
|
||||
<WorkspaceFavorites />
|
||||
<RemoteNavigationDrawerSection />
|
||||
</StyledInnerContainer>
|
||||
</ScrollWrapper>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,22 @@
|
||||
import { CurrentWorkspaceMemberFavoritesFolders } from '@/favorites/components/CurrentWorkspaceMemberFavoritesFolders';
|
||||
import { WorkspaceFavorites } from '@/favorites/components/WorkspaceFavorites';
|
||||
import { NavigationDrawerOpenedSection } from '@/object-metadata/components/NavigationDrawerOpenedSection';
|
||||
import { RemoteNavigationDrawerSection } from '@/object-metadata/components/RemoteNavigationDrawerSection';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const StyledScrollableItemsContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(3)};
|
||||
`;
|
||||
|
||||
export const MainNavigationDrawerScrollableItems = () => {
|
||||
return (
|
||||
<StyledScrollableItemsContainer>
|
||||
<NavigationDrawerOpenedSection />
|
||||
<CurrentWorkspaceMemberFavoritesFolders />
|
||||
<WorkspaceFavorites />
|
||||
<RemoteNavigationDrawerSection />
|
||||
</StyledScrollableItemsContainer>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,35 @@
|
||||
import { SettingsNavigationDrawerItems } from '@/settings/components/SettingsNavigationDrawerItems';
|
||||
import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
|
||||
import { NavigationDrawerFixedContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent';
|
||||
import { NavigationDrawerScrollableContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent';
|
||||
import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { useRecoilState } from 'recoil';
|
||||
import { AdvancedSettingsToggle } from 'twenty-ui/navigation';
|
||||
|
||||
export const SettingsNavigationDrawer = ({
|
||||
className,
|
||||
}: {
|
||||
className?: string;
|
||||
}) => {
|
||||
const { t } = useLingui();
|
||||
const [isAdvancedModeEnabled, setIsAdvancedModeEnabled] = useRecoilState(
|
||||
isAdvancedModeEnabledState,
|
||||
);
|
||||
|
||||
return (
|
||||
<NavigationDrawer className={className} title={t`Exit Settings`}>
|
||||
<NavigationDrawerScrollableContent>
|
||||
<SettingsNavigationDrawerItems />
|
||||
</NavigationDrawerScrollableContent>
|
||||
|
||||
<NavigationDrawerFixedContent>
|
||||
<AdvancedSettingsToggle
|
||||
isAdvancedModeEnabled={isAdvancedModeEnabled}
|
||||
setIsAdvancedModeEnabled={setIsAdvancedModeEnabled}
|
||||
label={t`Advanced:`}
|
||||
/>
|
||||
</NavigationDrawerFixedContent>
|
||||
</NavigationDrawer>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user