split navbar, remove links from bottom to top

templates/layout.html

@@ -13,35 +13,14 @@
     {{- template "commands" . -}}
 
     <div class="container is-max-desktop px-3" dir="auto">
+      {{- template "navbar" . -}}
       {{ template "title" . }}
-      <div class="content">
-        {{- end -}}
-        {{ define "footer" }}
+      <div class="content pb-5">
+      {{- end -}}
+      {{ define "footer" }}
       </div>
     </div>
 
-    {{- if .page }}
-    <footer class="mt-6 p-3 py-5">
-      <hr/>
-      <nav class="breadcrumb has-bullet-separator">
-        <ul>
-
-          {{- range $i, $a := links .page -}}
-          <li>
-            <a href="{{.Link}}" class="icon-text has-text-grey-dark">
-              <span class="icon">
-                {{- $icon := .Icon -}}
-                {{- if isFontAwesome $icon -}} <i class="{{.Icon}}"></i> {{- else -}} {{ $icon }} {{- end -}}
-              </span>
-              <span>{{.Name}}</span>
-            </a>
-          </li>
-          {{- end -}}
-
-        </ul>
-      </nav>
-    </footer>
-    {{- end }}
   </body>
 </html>
 {{- end -}}

templates/navbar.html

@@ -0,0 +1,39 @@
+<nav class="navbar" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
+    <a class="icon-text navbar-item" href="/">
+      <span class="icon"><img alt="logo" src="/public/logo.png"/></span>
+      <span class="has-text-weight-bold">{{.SITENAME}}</span>
+    </a>
+
+    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+
+  <div id="navbarMenu" class="navbar-menu">
+    <div class="navbar-start">
+      {{- if .page }}
+      {{- range $i, $a := links .page -}}
+      <a href="{{.Link}}" class="navbar-item">
+        <span>{{.Name}}</span>
+      </a>
+      {{- end -}}
+      {{- end }}
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item">
+
+      {{- if .page -}}
+      {{- with widgets "search" .page -}}
+      {{ . }}
+      {{- end -}}
+      {{- end -}}
+
+      </div>
+    </div>
+  </div>
+</nav>

templates/title.html

@@ -1,18 +1,27 @@
-<div class="columns pt-5">
-  <div class="column">
-    <a class="icon-text title is-5 pt-2" href="/">
-      <span class="icon"><img alt="logo" src="/public/logo.png"/></span>
-      <span>{{.SITENAME}}</span>
-    </a>
-  </div>
-
-  {{- if .page -}}
-  {{- with widgets "search" .page -}}
-  <div class="column is-4"> {{ . }} </div>
-  {{- end -}}
-  {{- end -}}
-</div>
-
 {{- if ne .INDEX .page.Name -}}
 <div dir="auto" class="title is-1 has-text-weight-bold">{{ .title }}</div>
 {{- end -}}
+
+<script>
+ 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');
+
+         });
+     });
+
+ });
+</script>