/ frontend / layouts / Default.tsx
Default.tsx
 1  import {ReactNode} from 'react';
 2  import Box from '@mui/material/Box';
 3  import {Helmet} from 'react-helmet';
 4  import useGTM from '../hooks/useGTM';
 5  import GenericToolbar from '../containers/GenericToolbar';
 6  import Banner from '../components/Banner';
 7  import useMatomo from '../hooks/useMatomo';
 8  import {ActionType} from '../containers/GenericMenu/Action';
 9  
10  interface 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?: boolean;
19    announcement?: string;
20  }
21  
22  const 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 = false,
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  
61  export default DefaultLayout;