applications/mail/src/app/components/sidebar/MailSidebar.tsx

   1 import { memo, useCallback, useRef } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { useUser } from '@proton/account/user/hooks';
   6 import {
   7     AppVersion,
   8     AppsDropdown,
   9     CollapsibleSidebarSpotlight,
  10     Icon,
  11     Sidebar,
  12     SidebarDrawerItems,
  13     SidebarLogo,
  14     SidebarNav,
  15     Tooltip,
  16     useActiveBreakpoint,
  17     useApi,
  18     useLocalState,
  19 } from '@proton/components';
  20 import SidebarStorageUpsell from '@proton/components/containers/payments/subscription/SidebarStorageUpsell';
  21 import useDisplayContactsWidget from '@proton/components/hooks/useDisplayContactsWidget';
  22 import { APPS } from '@proton/shared/lib/constants';
  23 import {
  24     COLLAPSE_EVENTS,
  25     SOURCE_EVENT,
  26     sendRequestCollapsibleSidebarReport,
  27     useLeftSidebarButton,
  28 } from '@proton/shared/lib/helpers/collapsibleSidebar';
  29 import { isElectronApp } from '@proton/shared/lib/helpers/desktop';
  30 import { CHECKLIST_DISPLAY_TYPE } from '@proton/shared/lib/interfaces';
  31 import clsx from '@proton/utils/clsx';
  32
  33 import { useMailDispatch, useMailSelector } from 'proton-mail/store/hooks';
  34
  35 import { MESSAGE_ACTIONS } from '../../constants';
  36 import { useOnCompose } from '../../containers/ComposeProvider';
  37 import { useGetStartedChecklist } from '../../containers/onboardingChecklist/provider/GetStartedChecklistProvider';
  38 import { ComposeTypes } from '../../hooks/composer/useCompose';
  39 import { layoutActions } from '../../store/layout/layoutSlice';
  40 import { selectLayoutIsExpanded } from '../../store/layout/layoutSliceSelectors';
  41 import OnboardingChecklistSidebar from '../onboarding/checklist/sidebar/OnboardingChecklistSidebar';
  42 import MailSidebarList from './MailSidebarList';
  43 import MailSidebarPrimaryButton from './MailSidebarPrimaryButton';
  44
  45 interface Props {
  46     labelID: string;
  47 }
  48
  49 const MailSidebar = ({ labelID }: Props) => {
  50     const api = useApi();
  51     const [user] = useUser();
  52     const [showSideBar, setshowSideBar] = useLocalState(true, `${user.ID}-${APPS.PROTONMAIL}-left-nav-opened`);
  53     const { viewportWidth } = useActiveBreakpoint();
  54     const collapsed = !showSideBar && !viewportWidth['<=small'];
  55
  56     const onCompose = useOnCompose();
  57     const dispatch = useMailDispatch();
  58     const expanded = useMailSelector(selectLayoutIsExpanded);
  59     const { displayState } = useGetStartedChecklist();
  60     const handleCompose = useCallback(() => {
  61         void onCompose({ type: ComposeTypes.newMessage, action: MESSAGE_ACTIONS.NEW });
  62     }, [onCompose]);
  63
  64     const logo = <SidebarLogo collapsed={collapsed} to="/inbox" app={APPS.PROTONMAIL} />;
  65
  66     const displayContactsInHeader = useDisplayContactsWidget();
  67
  68     const onClickExpandNav = (sourceEvent = SOURCE_EVENT.BUTTON_SIDEBAR) => {
  69         sendRequestCollapsibleSidebarReport({
  70             api,
  71             action: showSideBar ? COLLAPSE_EVENTS.COLLAPSE : COLLAPSE_EVENTS.EXPAND,
  72             application: APPS.PROTONMAIL,
  73             sourceEvent,
  74         });
  75         setshowSideBar(!showSideBar);
  76     };
  77
  78     const navigationRef = useRef<HTMLDivElement>(null);
  79
  80     const { isScrollPresent } = useLeftSidebarButton({
  81         navigationRef,
  82     });
  83
  84     return (
  85         <Sidebar
  86             app={APPS.PROTONMAIL}
  87             appsDropdown={<AppsDropdown app={APPS.PROTONMAIL} />}
  88             expanded={expanded}
  89             onToggleExpand={() => {
  90                 dispatch(layoutActions.toggleSidebarExpand());
  91             }}
  92             primary={<MailSidebarPrimaryButton collapsed={collapsed} handleCompose={handleCompose} />}
  93             logo={logo}
  94             version={<AppVersion />}
  95             preFooter={<SidebarStorageUpsell app={APPS.PROTONMAIL} />}
  96             collapsed={collapsed}
  97             showStorage={showSideBar}
  98             navigationRef={navigationRef}
  99         >
 100             <SidebarNav className="flex *:min-size-auto">
 101                 <MailSidebarList
 102                     labelID={labelID}
 103                     postItems={
 104                         <>
 105                             {displayContactsInHeader && (
 106                                 <SidebarDrawerItems
 107                                     toggleHeaderDropdown={() => {
 108                                         dispatch(layoutActions.setSidebarExpanded(false));
 109                                     }}
 110                                 />
 111                             )}
 112                             {displayState === CHECKLIST_DISPLAY_TYPE.REDUCED && !collapsed && (
 113                                 <OnboardingChecklistSidebar />
 114                             )}
 115                         </>
 116                     }
 117                     collapsed={collapsed}
 118                     onClickExpandNav={onClickExpandNav}
 119                 />
 120
 121                 {!isElectronApp && (
 122                     <span
 123                         className={clsx(
 124                             'mt-auto',
 125                             !collapsed && 'absolute bottom-0 right-0 mb-11',
 126                             isScrollPresent && 'sidebar-collapse-button-container--above-scroll'
 127                         )}
 128                     >
 129                         <CollapsibleSidebarSpotlight app={APPS.PROTONMAIL}>
 130                             {collapsed && <div aria-hidden="true" className="border-top my-1 mx-3"></div>}
 131                             <Tooltip
 132                                 title={
 133                                     showSideBar
 134                                         ? c('Action').t`Collapse navigation bar`
 135                                         : c('Action').t`Display navigation bar`
 136                                 }
 137                                 originalPlacement="right"
 138                             >
 139                                 <button
 140                                     className={clsx(
 141                                         'hidden md:flex sidebar-collapse-button navigation-link-header-group-control color-weak shrink-0',
 142                                         !showSideBar && 'sidebar-collapse-button--collapsed',
 143                                         collapsed ? 'mx-auto' : 'mr-2 ml-auto',
 144                                         isScrollPresent && 'sidebar-collapse-button--above-scroll'
 145                                     )}
 146                                     onClick={() => onClickExpandNav()}
 147                                     aria-pressed={showSideBar}
 148                                 >
 149                                     <Icon
 150                                         name={showSideBar ? 'chevrons-left' : 'chevrons-right'}
 151                                         alt={c('Action').t`Show navigation bar`}
 152                                     />
 153                                 </button>
 154                             </Tooltip>
 155                         </CollapsibleSidebarSpotlight>
 156                     </span>
 157                 )}
 158             </SidebarNav>
 159         </Sidebar>
 160     );
 161 };
 162
 163 export default memo(MailSidebar);