Content Migration from websites repo

components/layout.tsx

@@ -0,0 +1,37 @@
+import Script from 'next/script';
+import React from 'react';
+import Sidebar from './sidebar';
+import styles from '/styles/ReadyOrNot.module.css';
+
+const LayoutReadyOrNot = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className={styles.page}>
+      <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", "readyornot.neshura-server.net"]);
+        _paq.push(["disableCookies"]);
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        (function() {
+          var u="//temp.neshura-server.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>
+
+      <Sidebar />
+      <div className={styles.sidebarPlaceholder}></div>
+      <main className={styles.main}>
+        {children}
+      </main>
+    </div>
+  );
+}
+
+export default LayoutReadyOrNot;

components/sidebar.tsx

@@ -0,0 +1,60 @@
+import styles from '/styles/ReadyOrNot.module.css'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import useSWR from 'swr';
+import ReadyOrNotMap from '../interfaces/ReadyOrNot';
+import React, { useState } from 'react';
+import Image from 'next/image'
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
+
+function stopPropagation(e: any) {
+  e.stopPropagation();
+}
+
+
+const Sidebar = () => {
+  const router = useRouter();
+  const [active, setActive] = useState(true);
+  const { maps, isLoading, isError } = useNavbar();
+
+  if (isError) { return (<div><nav><a>Error loading Sidemenu</a></nav></div>) }
+  else if (isLoading) {
+    return (
+      <div>
+        <nav>
+          <a>Loading...</a>
+        </nav>
+      </div>
+    )
+  }
+  else {
+    // > is a placeholder
+    return (
+      <div className={styles.sidebar} onClick={() => setActive(!active)}>
+        <nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
+          {maps.map((item: ReadyOrNotMap) => (
+            <Link key={item.name} href={item.href}>
+              <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active: styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
+            </Link>
+          ))}
+        </nav>
+        <div className={styles.sidebarArrow}>
+          <Image src="/sidebar_arrow.webp" width={32} height={96} alt=">"/>
+        </div>
+      </div>
+    );
+  }
+}
+
+function useNavbar() {
+  const { data, error } = useSWR(`/api/navbar`, fetcher)
+
+  return {
+    maps: data,
+    isLoading: !error && !data,
+    isError: error
+  }
+}
+
+export default Sidebar;