make header dynamic

frontend/src/components/header.js

-import { Link } from "gatsby"
+import { Link, StaticQuery, graphql } from "gatsby"
 import PropTypes from "prop-types"
 import React from "react"
 
 const Header = ({ siteTitle }) => (
   <header >
-    <h1>
-      <Link to="/">{ siteTitle }</Link>
-    </h1>
-    <ul>
-      <li><Link to="/" >The Public Stack</Link></li>
-      <li><Link to="/domains" >Domains</Link></li>
-      <li><Link to="/use-cases" >Use Cases</Link></li>
-    </ul>
+    <nav className="menu-container">
+      <input type="checkbox" aria-label="Toggle menu" />
+      <span></span>
+      <span></span>
+      <span></span>
+
+      <h1 className="menu-logo"><Link to="/" >{ siteTitle }</Link></h1>
+
+      <ul className="menu">
+        <StaticQuery query={graphql`
+            query MenuQuery {
+              allStrapiMenuItem {
+                nodes {
+                  id
+                  title,
+                  subtitle,
+                  link,
+                  type
+                }
+              }
+            }
+          `}
+        render={data => data.allStrapiMenuItem.nodes.map(item => <li key={item.id} className={item.type}><Link to={item.link}>{item.title}</Link></li>)}
+        />
+      </ul>
+    </nav>
   </header>
 )