Initial commit.

layouts/partials/header.html

@@ -0,0 +1,69 @@
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+
+  // Get all "navbar-burger" elements
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+  // Check if there are any navbar burgers
+  if ($navbarBurgers.length > 0) {
+
+    // Add a click event on each of them
+    $navbarBurgers.forEach( el => {
+      el.addEventListener('click', () => {
+
+        // Get the target from the "data-target" attribute
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+
+      });
+    });
+  }
+
+});
+</script>
+<header>
+  <nav class="navbar is-fixed-top" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a class="navbar-item has-text-weight-normal is-size-4 is-smallcaps" href="{{ .Site.BaseURL }}">
+        {{ .Site.Title|safeHTML }}
+      </a>
+      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+    <div id="navMenu" class="navbar-menu">
+      <div class="navbar-end">
+        {{ range .Site.Menus.main }}
+          {{ if .HasChildren }}
+            <div class="navbar-item has-dropdown is-hoverable">
+              <a class="navbar-link is-smallcaps">
+                {{ .Name }}
+              </a>
+              <div class="navbar-dropdown is-right">
+                {{ $len := len .Children }}
+                {{ range $i, $child := .Children }}
+                  <a href="{{ $child.URL }}" title="{{ $child.Name }}" class="navbar-item is-smallcaps">
+                    {{ $child.Name }}
+                  </a>
+                  {{ if not (eq (add $len -1) $i) }}
+                    <hr class="navbar-divider">
+                  {{ end }}
+                {{ end }}
+              </div>
+            </div>
+          {{ else }}
+            <a href="{{ .URL }}" title="{{ .Name }}" class="mr-3 navbar-item is-smallcaps">
+              {{ .Name }}
+            </a>
+          {{ end }}
+        {{ end }}
+      </div>
+    </div>
+  </nav>
+</header>