add menu script, fix menu rendering on mobile

4 files changed, 33 insertions, 5 deletions

diff --git a/data/menu.yaml b/data/menu.yaml
index 2002fc0..d25e7bd 100644
--- a/data/menu.yaml
+++ b/data/menu.yaml
@@ -19,10 +19,11 @@ start:
 #     help: "Links"
 
 # right-aligned navbar menu entries
-# (these are usually icon-only)
+# (names of these items are only shown on mobile)
 end:
   - id: "github"
     href: "https://github.com/pablotron"
+    name: "GitHub"
     icon: "/ims/github.svg"
     help: "github page"
 # 
@@ -33,5 +34,6 @@ end:
 # 
   - id: "rss"
     href: "/index.xml"
+    name: "Feed"
     icon: "/ims/rss.svg"
     help: "blog feed"
diff --git a/themes/hugo-pt2021/assets/script.js b/themes/hugo-pt2021/assets/script.js
new file mode 100644
index 0000000..bc95b27
--- /dev/null
+++ b/themes/hugo-pt2021/assets/script.js
@@ -0,0 +1,15 @@
+// enable burger menu support
+// src: https://bulma.io/documentation/components/navbar/
+document.addEventListener('DOMContentLoaded', () => {
+  "use strict";
+  // iterate through burgers
+  Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0).forEach(e => {
+    e.addEventListener('click', () => {
+      // get target from data-target attribute
+      const t = document.getElementById(e.dataset.target);
+
+      // toggle is-active on both burger and menu
+      [e, t].forEach(e => e.classList.toggle('is-active'));
+    });
+  });
+});
diff --git a/themes/hugo-pt2021/layouts/partials/head.html b/themes/hugo-pt2021/layouts/partials/head.html
index 37ec18c..56468e4 100644
--- a/themes/hugo-pt2021/layouts/partials/head.html
+++ b/themes/hugo-pt2021/layouts/partials/head.html
@@ -10,7 +10,7 @@
     {{- end -}}
   </title>
 
-  {{/* set stylesheet */}}
+  {{/* load stylesheet */}}
   {{- $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" false) -}}
   {{- $style := resources.Get "style.sass" | resources.ToCSS $options | resources.Fingerprint -}}
   <link
@@ -20,6 +20,15 @@
     integrity='{{ $style.Data.Integrity }}'
   />
 
+  {{/* load javascript */}}
+  {{- $script := resources.Get "script.js" | js.Build "script.js" | minify | fingerprint -}}
+  <script
+    type='text/javascript'
+    src='{{ $script.Permalink }}'
+    integrity='{{ $script.Data.Integrity }}'
+    defer
+  ></script>
+
   {{/* add feeds */}}
   {{- range .AlternativeOutputFormats -}}
     {{- printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML -}}
diff --git a/themes/hugo-pt2021/layouts/partials/header.html b/themes/hugo-pt2021/layouts/partials/header.html
index 20abe46..cdeebb9 100644
--- a/themes/hugo-pt2021/layouts/partials/header.html
+++ b/themes/hugo-pt2021/layouts/partials/header.html
@@ -30,7 +30,7 @@
     </a>
   </div>
 
-  <div id='page-menu' class='navbar-menu'>
+  <div id='page-menu' class='navbar-menu is-black'>
     <div class='navbar-start'>
       {{- range $.Site.Data.menu.start -}}
         <a
@@ -68,7 +68,7 @@
           {{- if .icon -}}
             <img
               src='{{.icon}}'
-              class='menu-icon'
+              class='menu-icon is-hidden-touch'
               width='{{$icon_width}}'
               height='{{$icon_height}}'
               title='{{.help}}'
@@ -77,7 +77,9 @@
           {{- end -}}
 
           {{- if .name -}}
-            {{- .name -}}
+            <span class='is-hidden-desktop'>
+              {{- .name -}}
+            </span>
           {{- end -}}
         </a><!-- navbar-item -->
       {{- end -}}