2308091b13
## What - Deprecate overlayscrollbars as we decided to follow the native behavior - rework on performances (avoid calling recoil states too much at field level which is quite expensive) - Also implements: https://github.com/twentyhq/core-team-issues/issues/569 --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
83 lines
3.4 KiB
TypeScript
83 lines
3.4 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
};
|