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