main-site/components/layout.tsx

import PageFooter from './footer';
import PageNavbar from './navbar';
import Script from 'next/script';
import { Page, Main } from './styles/generic';
import useWindowSize from './windowsize';

const Layout = ({ children }: { children: React.ReactNode }) => {
  const isMobile = useWindowSize();

  let ret: JSX.Element;
  if(isMobile) {
    ret = (
      <Page mobile={isMobile}>
        <Script id="matomo_analytics"
          defer src='https://static.cloudflareinsights.com/beacon.min.js'
          data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
        </Script>
  
        <PageNavbar mobile={isMobile}/>
        <Main>
          {children}
        </Main>
      </Page>
    );
  }
  else {
    ret = (
      <Page>
        <Script id="matomo_analytics"
          defer src='https://static.cloudflareinsights.com/beacon.min.js'
          data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
        </Script>
  
        <PageNavbar mobile={isMobile}/>
        <Main>
          {children}
        </Main>
        <PageFooter />
      </Page>
    );
  }
  return ret;
}

export default Layout;