frontend/layouts/Default.tsx (view raw)
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 '@material-ui/core/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;