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" .) }}

themes/animals/layouts/partials/menu.html

@@ -12,9 +12,23 @@ Renders a menu for the given menu ID.
 
 {{- with index site.Menus $menuID }}
 <nav>
-    <ul>
+    <div class="navbar-brand">
+        <a class="navbar-item" href="/">
+            <h1 class="title is-1">{{ site.Title }}</h1>
+        </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 }}
 
@@ -33,7 +47,7 @@ Renders a menu for the given menu ID.
 {{- $name = . }}
 {{- end }}
 {{- end }}
-    <li>
+<li class="navbar-item">
     <a
             {{- range $k, $v :=$attrs }}
             {{- with $v }}