1import {ReactNode} from 'react';
 2import {Helmet} from 'react-helmet';
 3import useGTM from '../hooks/useGTM';
 4import GenericToolbar from '../containers/GenericToolbar';
 5import {ActionType} from '../containers/GenericMenu/Action';
 6import Box from '@mui/material/Box';
 7import Banner from '../components/Banner';
 8import useMatomo from '../hooks/useMatomo';
 9
10interface Props {
11  children: ReactNode;
12  Topbar?: ReactNode;
13  className?: string;
14  menuTitle?: string;
15  menuActions?: Array<ActionType>;
16  pageTitle?: string;
17  displayMenu?: boolean;
18  goBack?: () => void;
19  announcement?: string;
20}
21
22const DefaultLayout = (props: Props) => {
23  useGTM();
24  useMatomo();
25  const {
26    children,
27    Topbar = null,
28    className,
29    pageTitle = undefined,
30    displayMenu = true,
31    menuTitle = 'Caroster',
32    menuActions,
33    goBack = null,
34    announcement,
35  } = props;
36
37  return (
38    <div className={className}>
39      <Helmet>
40        <title>{pageTitle || menuTitle}</title>
41      </Helmet>
42      <Box display="flex" flexDirection="column" height="100vh" width="100%">
43        <Box position="sticky" top={0} zIndex={1100}>
44          <Banner announcement={announcement} />
45          {Topbar && <Topbar />}
46        </Box>
47        {displayMenu && (menuTitle || menuActions) && (
48          <GenericToolbar
49            title={menuTitle}
50            actions={menuActions}
51            goBack={goBack}
52          />
53        )}
54
55        {children}
56      </Box>
57    </div>
58  );
59};
60
61export default DefaultLayout;