Initial commit

components/layout/header.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Icon } from "../util/icon";
+import { tinaField } from "tinacms/dist/react";
+import { GlobalHeader } from "../../tina/__generated__/types";
+
+export const Header = ({ data }: { data: GlobalHeader }) => {
+  const router = useRouter();
+
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return (
+    <nav className="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
+      <div className="container d-flex flex-column flex-md-row justify-content-between">
+        <div className="flex">
+            <Link
+              href="/"
+              className="navbar-brand container d-flex align-items-md-center"
+            >
+              <Icon
+                tinaField={tinaField(data, "icon")}
+                parentColor={data.color}
+                data={{
+                  name: data.icon.name,
+                  color: data.icon.color,
+                  style: data.icon.style,
+                }}
+              />
+              <span data-tina-field={tinaField(data, "name")}>{data.name}</span>
+            </Link>
+        </div>
+        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
+          <ul className="navbar-nav d-flex flex-column flex-md-row">
+            {data.nav &&
+              data.nav.map((item, i) => {
+                /*const activeItem =
+                  (item.href === ""
+                    ? router.asPath === "/"
+                    : router.asPath.includes(item.href)) && isClient;*/
+                return (
+                  <li
+                    key={`${item.label}-${i}`}
+                    className="nav-item"
+                  >
+                    <Link
+                      data-tina-field={tinaField(item, "label")}
+                      href={`/${item.href}`}
+                      className="nav-link p-2"
+                    >
+                      {item.label}
+                    </Link>
+                  </li>
+                );
+              })}
+            <li className="nav-item">
+              <a id="redirecting" className="nav-link p-2 pe-4" href="https://www.rdv360.com/psychartherapie">Rendez-vous</a>
+            </li>
+          </ul>
+        </div>
+        <div
+          className={`absolute h-1 bg-gradient-to-r from-transparent ${
+            data.color === "primary" ? `via-white` : `via-black dark:via-white`
+          } to-transparent bottom-0 left-4 right-4 -z-1 opacity-5`}
+        />
+      </div>
+    </nav>
+  );
+};