add menu script, fix menu rendering on mobile

3 files changed, 30 insertions, 4 deletions

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 -}}