Corrected mobile navigation, minor fixes

Added a burger element, with Javascript, to allow mobile navigation
to work. The navbar will hide on smaller screens, but will appear
on larger ones.

Minor fixes with how levels are used.

7 files changed, 46 insertions, 31 deletions

diff --git a/assets/css/base/base.scss b/assets/css/base/base.scss
index 0e92839..6629b46 100644
--- a/assets/css/base/base.scss
+++ b/assets/css/base/base.scss
@@ -10,7 +10,7 @@ $family-primary: $family-san-serif;
 
 
 // colors
-$scheme-main: #bbb; // set background color
+$scheme-main: #fff; // set background color
 $link: #000; // main link color
 $link-hover: #444;
 $footer-background-color: false;  // removes background color in footer
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 65d1668..f8402f9 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,18 +1,11 @@
 {{ define "main"}}
-  <!-- content -->
   <div class="content is-normal">
-      <div class="level">
-      </div>
-      <!-- published date --> 
       <p class="title is-3"><i class="fas fa-file"></i> {{.Page.Title}}</p>
       <p class="subtitle is-4">{{.Page.Description}}</p>
       {{ $dateFormat := .Site.Params.dateFormat | default "January 2, 2006"}}
       <p class="date">Published on {{ .PublishDate.Format $dateFormat }}{{ if ne .Lastmod .PublishDate }}, last updated on {{ .Lastmod.Format $dateFormat }}
       {{ end }}
       </p>
-       
-
-
     {{ .Content }}
   </div>
 {{ end }}
diff --git a/layouts/pages/archive.html b/layouts/pages/archive.html
index 645279f..f5db684 100644
--- a/layouts/pages/archive.html
+++ b/layouts/pages/archive.html
@@ -7,7 +7,6 @@
   <div class="content">
   {{ .Content }}
   </div>
-  <div class="level"></div>
   <ul class="fa-ul"> 
       {{ range .Pages.ByLastmod }}
           <li>
diff --git a/layouts/pages/contact.html b/layouts/pages/contact.html
index 351b24b..91d7886 100644
--- a/layouts/pages/contact.html
+++ b/layouts/pages/contact.html
@@ -7,8 +7,6 @@
       {{ .Content }}
       </div>
       </p>
-      <div class="level">
-      </div>
   </div>
   </main>
 {{ end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 4d0668c..6813def 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -21,5 +21,7 @@
     <script src="https://kit.fontawesome.com/{{ .Site.Params.fontawesomeToken }}.js" crossorigin="anonymous"></script>
     {{ end }}
 
+    <script src="/js/bulma.js"></script>
+
     <link rel="shortcut icon" type="image/x-icon" href="/img/{{ .Site.Params.favicon }}">
 </head>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 236e9b9..82c5cd3 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,25 +1,23 @@
 {{ $currentPage := . }}
-<div class="container">
-  <div class="level">
-    <div class="level-left ">
-      <div class="level-item">
-        <p class="title is-4">
-          <a href="{{ .Site.BaseURL }}" class="title">{{.Site.Title}}</a>
-        </p>
-      </div>
-
-    </div>
-    <div class="level-right">
-      <div class="level-item">
-        <nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
-        <div class="navbar-brand has-text-weight-semibold">
+<nav class="navbar {{ .Site.Params.navbarStyle }} mb-4" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
+    <a class="navbar-item title {{ .Site.Params.navbarTitleStyle | default "has-text-black" }}" href="{{ .Site.BaseURL }}">{{.Site.Title}}</a>
+    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar-menu">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+  <div id="navbar-menu" class="navbar-menu">
+    <div class="navbar-end">
         {{ range .Site.Menus.nav }}
-        <a class="navbar-item{{if or ($currentPage.IsMenuCurrent "nav" .) ($currentPage.HasMenuCurrent "nav" .) }} is-active{{end}}" href="{{.URL}}"  >{{ .Name }}</a>
+        <a class="navbar-item{{if or ($currentPage.IsMenuCurrent "nav" .) ($currentPage.HasMenuCurrent "nav" .) }}{{end}}" href="{{.URL}}"  >{{ .Name }}</a>
         {{ end }}
-        </div>
-        </nav>
-      </div>
     </div>
   </div>
-  <div class="level"></div>
-</div>
\ No newline at end of file
+</nav>
+
+
+
+
+<!-- is-active for navbar-menu class -->
\ No newline at end of file
diff --git a/static/js/bulma.js b/static/js/bulma.js
new file mode 100644
index 0000000..9b18a3e
--- /dev/null
+++ b/static/js/bulma.js
@@ -0,0 +1,25 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  // Get all "navbar-burger" elements
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+  // Check if there are any navbar burgers
+  if ($navbarBurgers.length > 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');
+
+      });
+    });
+  }
+
+});
\ No newline at end of file