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>
        <Script id="matomo_analytics">
          {`
                var _paq = window._paq = window._paq || [];
                /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
                _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
                _paq.push(["setCookieDomain", "www.neshweb.net"]);
                _paq.push(["disableCookies"]);
                _paq.push(['trackPageView']);
                _paq.push(['enableLinkTracking']);
                (function() {
                  var u="//tracking.neshweb.net/";
                  _paq.push(['setTrackerUrl', u+'matomo.php']);
                  _paq.push(['setSiteId', '2']);
                  var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
                  g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
                })();
              `}
        </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;