Fix #856

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Issues closed
 
+* Fix #856 JavaScript `nav-burger` example
 * Fix #821 Notification strong color
 
 ## 0.4.3

docs/_javascript/main.js

@@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
       const expand = '<button class="expand">Expand</button>';
       $el.insertAdjacentHTML('beforeend', copy);
 
-      if ($el.firstElementChild.scrollHeight > 320) {
+      if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
         $el.insertAdjacentHTML('beforeend', expand);
       }
 

docs/_sass/example.sass

@@ -39,11 +39,14 @@
       margin-bottom: 1.5rem
 
 .highlight pre
-  max-height: 320px
+  max-height: 480px
   margin-bottom: 0 !important
-  padding: 1.25em 1.5em
-  code
   padding: 0
+  code
+    padding: 1.25em 1.5em
+
+#navbarJsExample .highlight pre
+  max-height: none
 
 $structure: $danger
 $structure-invert: $danger-invert

docs/documentation/components/navbar.html

@@ -339,6 +339,46 @@ doc-subtab: navbar
 <hr class="navbar-divider">
 {% endcapture %}
 
+{% capture navbar_js_html %}
+<div class="navbar-burger" data-target="navMenu">
+  <span></span>
+  <span></span>
+  <span></span>
+</div>
+
+<div class="navbar-menu" id="navMenu">
+  <!-- navbar-start, navbar-end... -->
+</div>
+{% endcapture %}
+
+{% capture navbar_js_code %}
+document.addEventListener('DOMContentLoaded', function () {
+
+  // Get all "nav-burger" elements
+  var $navBurgers = Array.prototype.slice.call(document.querySelectorAll('.nav-burger'), 0);
+
+  // Check if there are any nav burgers
+  if ($navBurgers.length > 0) {
+
+    // Add a click event on each of them
+    $navBurgers.forEach(function ($el) {
+      $el.addEventListener('click', () => {
+
+        // Get the target from the "data-target" attribute
+        var target = $el.dataset.target;
+        var $target = document.getElementById(target);
+
+        // Toggle the class on both the "nav-burger" and the "nav-menu"
+        $el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+
+      });
+    });
+  }
+
+});
+{% endcapture %}
+
 <section class="section">
   <div class="container">
 
@@ -531,6 +571,25 @@ doc-subtab: navbar
 
     <hr>
 
+    <div id="navbarJsExample" class="message is-info">
+      <h4 class="message-header">Javascript toggle</h4>
+      <div class="message-body">
+        <div class="content">
+          <p>
+            The Bulma package <strong>does not come with any JavaScript</strong>.
+            <br>
+            Here is however an implementation example, which toggles the class <code>is-active</code> on both the <code>nav-burger</code> and the targeted <code>nav-menu</code>.
+          </p>
+
+          {% highlight html %}{{ navbar_js_html }}{% endhighlight %}
+
+          {% highlight javascript %}{{ navbar_js_code }}{% endhighlight %}
+        </div>
+      </div>
+    </div>
+
+    <hr>
+
     <h3 class="title">Navbar start and navbar end</h3>
 
     <div class="content">

docs/lib/main.js

@@ -69,7 +69,7 @@ document.addEventListener('DOMContentLoaded', function () {
       var expand = '<button class="expand">Expand</button>';
       $el.insertAdjacentHTML('beforeend', copy);
 
-      if ($el.firstElementChild.scrollHeight > 320) {
+      if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
         $el.insertAdjacentHTML('beforeend', expand);
       }
 

sass/elements/content.sass

@@ -1,6 +1,5 @@
 .content
   +block
-  color: $text
   // Inline
   li + li
     margin-top: 0.25em