Cleaned up some code and added a somewhat responsive header burger

components/layout/header.tsx

@@ -1,20 +1,23 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import { tinaField } from "tinacms/dist/react";
 import defaultLogo from "../../public/logo.png";
 import { GlobalHeader } from "../../tina/__generated__/types";
 import { ObjectField } from "@tinacms/schema-tools/dist/types";
 
-export const Header = ({ data }: { data: GlobalHeader }) => {
-    const navbarToggler: JSX.Element = (
-        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
-            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+export const Header = ({ data }: { data: GlobalHeader }): React.ReactElement => {
+    const [expanded, setExpanded] = useState(false);
+    const navbarToggler: React.ReactElement = (
+        <button
+            className="navbar-toggler"
+            type="button"
+            onClick={ () => { setExpanded(!expanded); } }
             aria-label="Toggle navigation">
             <span className="navbar-toggler-icon" />
         </button>
     );
     return (
-        <nav className="navbar flex flex-wrap content-between sticky top-0 py-2">
+        <nav className={ `navbar${ expanded ? " navbar-expanded": "" } flex flex-wrap content-between sticky top-0 py-2` }>
             <div className="flex grow justify-between px-6 h-full">
                 <div className="flex navbar-brand">
                     <Link
@@ -29,9 +32,8 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
                     </Link>
                 </div>
                 { navbarToggler }
-                <div className={ "navbar-items flex items-center" } id="navbarSupportedContent">
-                    <ul className="flex md:flex-row">
-                        { data.nav &&
+                <ul className="navbar-items">
+                    { data.nav &&
               data.nav.map((item, i) => {
                   return (
                       <li
@@ -42,14 +44,14 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
                               data-tina-field={ tinaField(item, "label") }
                               href={ `${ item.external? "" : "/" }${ item.href }` }
                               className={ `nav-link p-2 ${ item.external ? "external-link-icon" : "" }` }
+                              onClick={ () => setExpanded(false) }
                           >
                               { item.label }
                           </Link>
                       </li>
                   );
               }) }
-                    </ul>
-                </div>
+                </ul>
             </div>
         </nav>
     );