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;
31 onToggleExpand?: () => void;
32 isSmallViewport?: boolean;
36 const PrivateHeader = ({
46 hideMenuButton = false,
47 hideUpsellButton = false,
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;
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>
66 {upsellButton !== undefined ? upsellButton : !hideUpsellButton && <TopNavbarUpsell app={app} />}
67 {feedbackButton ? <TopNavbarListItem noShrink>{feedbackButton}</TopNavbarListItem> : null}
69 <TopNavbarListItem noShrink className="hidden md:flex">
73 {userDropdown && !isSmallViewport ? (
74 <TopNavbarListItem className="relative hidden md:flex">{userDropdown}</TopNavbarListItem>
78 {isSmallViewport && floatingButton ? floatingButton : null}
83 export default PrivateHeader;