Cleanup - unused files / unused exports / duplicate exports
[ProtonMail-WebClient.git] / packages / components / containers / heading / PrivateHeader.tsx
blobf8d5fc220eb9c1457b38f8e83afc6e35240b1bb4
1 import type { ReactNode } from 'react';
3 import Hamburger from '@proton/components/components/sidebar/Hamburger';
4 import TopNavbar from '@proton/components/components/topnavbar/TopNavbar';
5 import TopNavbarList from '@proton/components/components/topnavbar/TopNavbarList';
6 import TopNavbarListItem from '@proton/components/components/topnavbar/TopNavbarListItem';
7 import TopNavbarUpsell from '@proton/components/components/topnavbar/TopNavbarUpsell';
8 import { useTheme } from '@proton/components/containers/themes/ThemeProvider';
9 import useConfig from '@proton/components/hooks/useConfig';
10 import useIsPaidUserCookie from '@proton/components/hooks/useIsPaidUserCookie';
11 import type { APP_NAMES } from '@proton/shared/lib/constants';
12 import { APPS } from '@proton/shared/lib/constants';
13 import { isElectronMail } from '@proton/shared/lib/helpers/desktop';
14 import clsx from '@proton/utils/clsx';
16 import type { Props as HeaderProps } from '../../components/header/Header';
17 import Header from '../../components/header/Header';
19 interface Props extends HeaderProps {
20     settingsButton?: ReactNode;
21     userDropdown?: ReactNode;
22     contactsButton?: ReactNode;
23     feedbackButton?: ReactNode;
24     floatingButton?: ReactNode;
25     upsellButton?: ReactNode;
26     hideMenuButton?: boolean;
27     hideUpsellButton?: boolean;
28     actionArea?: ReactNode;
29     title: string;
30     expanded: boolean;
31     onToggleExpand?: () => void;
32     isSmallViewport?: boolean;
33     app: APP_NAMES;
36 const PrivateHeader = ({
37     isSmallViewport,
38     upsellButton,
39     userDropdown,
40     settingsButton,
41     feedbackButton,
42     actionArea,
43     floatingButton,
44     expanded,
45     onToggleExpand,
46     hideMenuButton = false,
47     hideUpsellButton = false,
48     app,
49 }: Props) => {
50     useIsPaidUserCookie();
52     const { APP_NAME } = useConfig();
53     const theme = useTheme();
54     const isProminent = theme.information.prominentHeader;
56     const isCalendarOnElectron = APP_NAME === APPS.PROTONCALENDAR && isElectronMail;
58     return (
59         <Header className={clsx(isProminent && 'ui-prominent', isCalendarOnElectron && 'pl-16 md:pl-2')}>
60             {!hideMenuButton && <Hamburger expanded={expanded} onToggle={onToggleExpand} />}
61             {/* Handle actionArea in components itself rather than here */}
62             <div className="flex-1">{actionArea}</div>
64             <TopNavbar>
65                 <TopNavbarList>
66                     {upsellButton !== undefined ? upsellButton : !hideUpsellButton && <TopNavbarUpsell app={app} />}
67                     {feedbackButton ? <TopNavbarListItem noShrink>{feedbackButton}</TopNavbarListItem> : null}
68                     {settingsButton ? (
69                         <TopNavbarListItem noShrink className="hidden md:flex">
70                             {settingsButton}
71                         </TopNavbarListItem>
72                     ) : null}
73                     {userDropdown && !isSmallViewport ? (
74                         <TopNavbarListItem className="relative hidden md:flex">{userDropdown}</TopNavbarListItem>
75                     ) : null}
76                 </TopNavbarList>
77             </TopNavbar>
78             {isSmallViewport && floatingButton ? floatingButton : null}
79         </Header>
80     );
83 export default PrivateHeader;