feat: Add bulma navbar

themes/animals/assets/js/main.js

@@ -1 +1,22 @@
-console.log('This site was generated by Hugo.');
+// Add is-active to burger menu
+document.addEventListener('DOMContentLoaded', () => {
+
+    // Get all "navbar-burger" elements
+    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 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');
+
+        });
+    });
+
+});

themes/animals/layouts/partials/head.html

@@ -1,6 +1,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <link rel="stylesheet" href="/bulma/css/bulma.min.css">
+<script src="/assets/js/main.js"></script>
 <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
 {{ partialCached "head/css.html" . }}
 {{ partialCached "head/js.html" . }}

themes/animals/layouts/partials/header.html

@@ -1,2 +1 @@
-<h1>{{ site.Title }}</h1>
+{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
-{{ partial "menu.html" (dict "menuID" "main" "page" .) }}

themes/animals/layouts/partials/menu.html

@@ -11,41 +11,55 @@ Renders a menu for the given menu ID.
 {{- $menuID := .menuID }}
 
 {{- with index site.Menus $menuID }}
-  <nav>
+<nav>
-    <ul>
+    <div class="navbar-brand">
-      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
+        <a class="navbar-item" href="/">
-    </ul>
+            <h1 class="title is-1">{{ site.Title }}</h1>
-  </nav>
+        </a>
+
+        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+        </a>
+    </div>
+    <div id="navbarBasicExample" class="navbar-menu">
+        <ul class="navbar-start">
+            {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
+        </ul>
+    </div>
+</nav>
 {{- end }}
 
 {{- define "partials/inline/menu/walk.html" }}
-  {{- $page := .page }}
+{{- $page := .page }}
-  {{- range .menuEntries }}
+{{- range .menuEntries }}
-    {{- $attrs := dict "href" .URL }}
+{{- $attrs := dict "href" .URL }}
-    {{- if $page.IsMenuCurrent .Menu . }}
+{{- if $page.IsMenuCurrent .Menu . }}
-      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
+{{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
-    {{- else if $page.HasMenuCurrent .Menu .}}
+{{- else if $page.HasMenuCurrent .Menu .}}
-      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
+{{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
-    {{- end }}
+{{- end }}
-    {{- $name := .Name }}
+{{- $name := .Name }}
-    {{- with .Identifier }}
+{{- with .Identifier }}
-      {{- with T . }}
+{{- with T . }}
-        {{- $name = . }}
+{{- $name = . }}
-      {{- end }}
+{{- end }}
-    {{- end }}
+{{- end }}
-    <li>
+<li class="navbar-item">
-      <a
+    <a
-        {{- range $k, $v := $attrs }}
+            {{- range $k, $v :=$attrs }}
-          {{- with $v }}
+            {{- with $v }}
-            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
-          {{- end }}
+    {{- end }}
-        {{- end -}}
+    {{- end -}}
-      >{{ $name }}</a>
+    >{{ $name }}</a>
-      {{- with .Children }}
+    {{- with .Children }}
-        <ul>
+    <ul>
-          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
+        {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
-        </ul>
+    </ul>
-      {{- end }}
+    {{- end }}
-    </li>
+</li>
-  {{- end }}
+{{- end }}
 {{- end }}