Layout component

index.tsx

// ... 
export const Layout = () => {

  // will be true on all devices smaller than a desktop
  const isDesktopOrUp = useMediaQuery((theme: Theme) => theme.breakpoints.up('lg'));

  return <Grid container direction="column">
    <Header />
    <Content />
    // the bottom navigation will be visible on tablets and mobile phones
    {!isDesktopOrUp && <BottomNavigationMenu pathname={pathname} />}  
  </Grid>
}