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;