Add top bottom navbar toggle

diff --git a/docs/_includes/examples/navbar-bottom.html b/docs/_includes/examples/navbar-bottom.html
new file mode 100644 (file)
index 0000000..c162d72
--- /dev/null
+++ b/docs/_includes/examples/navbar-bottom.html
@@ -0,0 +1,74 @@
+<nav id="navbarBottom" class="navbar is-fixed-bottom has-shadow is-hidden">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="{{ site.url }}">
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
+    </a>
+    <div class="navbar-burger burger" data-target="navbarExample{{ include.id }}">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+
+  <div id="navbarExample{{ include.id }}" class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item" href="{{ site.url }}/">
+        Home
+      </a>
+      <div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
+        <a class="navbar-link" href="/documentation/overview/start/">
+          Docs
+        </a>
+        <div class="navbar-dropdown">
+          <a class="navbar-item" href="/documentation/overview/start/">
+            Overview
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
+            Modifiers
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
+            Columns
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
+            Layout
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
+            Form
+          </a>
+          <hr class="navbar-divider">
+          <a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
+            Elements
+          </a>
+          <a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
+            Components
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="field is-grouped">
+          <p class="control">
+            <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
+              <span class="icon">
+                <i class="fa fa-twitter"></i>
+              </span>
+              <span>
+                Tweet
+              </span>
+            </a>
+          </p>
+          <p class="control">
+            <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
+              <span class="icon">
+                <i class="fa fa-download"></i>
+              </span>
+              <span>Download</span>
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>

diff --git a/docs/_includes/examples/navbar.html b/docs/_includes/examples/navbar.html
new file mode 100644 (file)
index 0000000..b29c719
--- /dev/null
+++ b/docs/_includes/examples/navbar.html
@@ -0,0 +1,74 @@
+<nav class="navbar{% if include.transparent %} is-transparent{% endif %}">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="{{ site.url }}">
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
+    </a>
+    <div class="navbar-burger burger" data-target="navbarExample{{ include.id }}">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+
+  <div id="navbarExample{{ include.id }}" class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item" href="{{ site.url }}/">
+        Home
+      </a>
+      <div class="navbar-item has-dropdown is-hoverable">
+        <a class="navbar-link" href="/documentation/overview/start/">
+          Docs
+        </a>
+        <div class="navbar-dropdown{% if include.boxed %} is-boxed{% endif %}">
+          <a class="navbar-item" href="/documentation/overview/start/">
+            Overview
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
+            Modifiers
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
+            Columns
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
+            Layout
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
+            Form
+          </a>
+          <hr class="navbar-divider">
+          <a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
+            Elements
+          </a>
+          <a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
+            Components
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="field is-grouped">
+          <p class="control">
+            <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
+              <span class="icon">
+                <i class="fa fa-twitter"></i>
+              </span>
+              <span>
+                Tweet
+              </span>
+            </a>
+          </p>
+          <p class="control">
+            <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
+              <span class="icon">
+                <i class="fa fa-download"></i>
+              </span>
+              <span>Download</span>
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>

diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index bfd273971e38817fafd9a45813d2c371e36d1f9a..2f78e1c852d61b74836c5de1da19cfc9340b670b 100644 (file)
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -122,6 +122,9 @@
 {% if page.route == 'index' %}
   <script src="https://player.vimeo.com/api/player.js"></script>
   <script type="text/javascript" src="{{ site.url }}/lib/index.js"></script>
+{% elsif page.doc-subtab == 'navbar' %}
+  {% include examples/navbar-bottom.html %}
+  <script type="text/javascript" src="{{ site.url }}/lib/navbar.js"></script>
 {% endif %}
 
 <div id="fb-root"></div>

diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index 6c640b658f57e12a942f34190c665306845cb831..caf51d706ad940c743cfa4353a80d8bfa4f499eb 100644 (file)
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -1,4 +1,4 @@
-<nav class="navbar {% if include.fixed %}is-fixed-top has-shadow{% endif %} {% if include.transparent %}is-transparent{% endif %}">
+<nav id="navbar" class="navbar {% if include.fixed %}is-fixed-top has-shadow{% endif %} {% if include.transparent %}is-transparent{% endif %}">
   {% if include.has_container %}
     <div class="container">
   {% endif %}

diff --git a/docs/_javascript/navbar.js b/docs/_javascript/navbar.js
new file mode 100644 (file)
index 0000000..42ed7ae
--- /dev/null
+++ b/docs/_javascript/navbar.js
@@ -0,0 +1,45 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  const rootEl = document.documentElement;
+  const navbarTopEl = document.getElementById('navbar');
+  const navbarBottomEl = document.getElementById('navbarBottom');
+  const fixTopEl = document.getElementById('navbarFixTop');
+  const fixTopElIcon = fixTopEl.querySelector('.fa');
+  const fixBottomEl = document.getElementById('navbarFixBottom');
+  const fixBottomElIcon = fixBottomEl.querySelector('.fa');
+  let fixedTop = false;
+  let fixedBottom = false;
+
+  fixTopEl.addEventListener('click', event => {
+    fixedTop = !fixedTop;
+
+    if (fixedTop) {
+      fixTopEl.className = 'button is-success';
+      fixTopElIcon.className = 'fa fa-check-square-o';
+      rootEl.classList.add('has-navbar-fixed-top');
+      navbarTopEl.classList.add('is-fixed-top', 'has-shadow');
+    } else {
+      fixTopEl.className = 'button is-link';
+      fixTopElIcon.className = 'fa fa-square-o';
+      rootEl.classList.remove('has-navbar-fixed-top');
+      navbarTopEl.classList.remove('is-fixed-top', 'has-shadow');
+    }
+  });
+
+  fixBottomEl.addEventListener('click', event => {
+    fixedBottom = !fixedBottom;
+
+    if (fixedBottom) {
+      fixBottomEl.className = 'button is-success';
+      fixBottomElIcon.className = 'fa fa-check-square-o';
+      rootEl.classList.add('has-navbar-fixed-bottom');
+      navbarBottomEl.classList.remove('is-hidden');
+    } else {
+      fixBottomEl.className = 'button is-link';
+      fixBottomElIcon.className = 'fa fa-square-o';
+      rootEl.classList.remove('has-navbar-fixed-bottom');
+      navbarBottomEl.classList.add('is-hidden');
+    }
+  });
+
+});

diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
index 0dcdf793fe0c694d8dd72276e523560372928a17..cf4b6f31e83535e0bdde3cf06798500055571963 100644 (file)
--- a/docs/_layouts/documentation.html
+++ b/docs/_layouts/documentation.html
@@ -3,9 +3,7 @@ layout: default
 route: documentation
 ---
 
-<div class="container">
-  {% include navbar.html id="Documentation" %}
-</div>
+{% include navbar.html id="Documentation" has_container=true %}
 
 <section class="hero is-link">
   <div class="hero-body">

diff --git a/docs/_sass/highlight.sass b/docs/_sass/highlight.sass
index c12b790e2e74ad04e67acc0f53214566f967739a..85285a6f380b691b75cded17b9d2cec6b0567c01 100644 (file)
--- a/docs/_sass/highlight.sass
+++ b/docs/_sass/highlight.sass
@@ -128,4 +128,4 @@
   text-align: left
 
 .content li .highlight
-  margin: 0
+  margin-top: 0.5em

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 005b3a2eec2a04922d9856af2440861f444be4d9..cb3b414113bf3d856f7b35dd9ef9e1d98cfcdc80 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2987,6 +2987,7 @@ a.box:active {
   pointer-events: none;
   position: absolute;
   transform: rotate(-45deg);
+  transform-origin: center;
   width: 0.5em;
   margin-top: -0.375em;
   right: 1.125em;
@@ -6460,6 +6461,10 @@ a.dropdown-item.is-active {
   bottom: 0;
 }
 
+.navbar.is-fixed-bottom.has-shadow {
+  box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1);
+}
+
 .navbar.is-fixed-top {
   top: 0;
 }
@@ -6644,6 +6649,9 @@ a.navbar-item:hover, a.navbar-item.is-active,
   .navbar.is-fixed-bottom-touch {
     bottom: 0;
   }
+  .navbar.is-fixed-bottom-touch.has-shadow {
+    box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1);
+  }
   .navbar.is-fixed-top-touch {
     top: 0;
   }
@@ -6693,6 +6701,17 @@ a.navbar-item:hover, a.navbar-item.is-active,
   .navbar-item.has-dropdown {
     align-items: stretch;
   }
+  .navbar-item.has-dropdown-up .navbar-link::after {
+    transform: rotate(135deg) translate(0.25em, -0.25em);
+  }
+  .navbar-item.has-dropdown-up .navbar-dropdown {
+    border-bottom: 1px solid #dbdbdb;
+    border-radius: 5px 5px 0 0;
+    border-top: none;
+    bottom: 100%;
+    box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1);
+    top: auto;
+  }
   .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
     display: block;
   }
@@ -6711,6 +6730,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
     pointer-events: none;
     position: absolute;
     transform: rotate(-45deg);
+    transform-origin: center;
     width: 0.5em;
     margin-top: -0.375em;
     right: 1.125em;
@@ -6793,6 +6813,9 @@ a.navbar-item:hover, a.navbar-item.is-active,
   .navbar.is-fixed-bottom-desktop {
     bottom: 0;
   }
+  .navbar.is-fixed-bottom-desktop.has-shadow {
+    box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1);
+  }
   .navbar.is-fixed-top-desktop {
     top: 0;
   }
@@ -9778,7 +9801,7 @@ label.panel-block:hover {
 }
 
 .content li .highlight {
-  margin: 0;
+  margin-top: 0.5em;
 }
 
 .content .highlighter-rouge:not(:last-child) {

diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index eb04bd240f7856829b324221fad1265fdb75dfe9..257b06ece95ab44e5cde6809257330696402f71b 100644 (file)
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -8,7 +8,7 @@ doc-subtab: navbar
 {% include subnav-components.html %}
 
 {% capture navbar_example %}
-{% include navbar.html id="bd-example" %}
+{% include examples/navbar.html id="Default" %}
 {% endcapture %}
 
 {% capture navbar_brand_example %}
@@ -132,7 +132,7 @@ doc-subtab: navbar
 {% endcapture %}
 
 {% capture navbar_transparent_example %}
-{% include navbar.html transparent=true boxed=true id="TransparentExample" %}
+{% include examples/navbar.html transparent=true boxed=true id="TransparentExample" %}
 {% endcapture %}
 
 {% capture navbar_dropdown_example %}
@@ -751,6 +751,43 @@ document.addEventListener('DOMContentLoaded', function () {
 
     {% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
 
+    {% include anchor.html name="Fixed navbar" %}
+
+    {% include elements/new-tag.html version="0.6.1" %}
+
+    <div class="content">
+      <p>
+        You can now <strong>fix</strong> the navbar to either the <strong>top</strong> or <strong>bottom</strong> of the page. This is a 2-step process:
+      </p>
+      <ul>
+        <li>
+          Add either <code>is-fixed-top</code> or <code>is-fixed-bottom</code> to the <code>navbar</code> component
+          {% highlight html %}<nav class="navbar is-fixed-top">{% endhighlight %}
+        </li>
+        <li>
+          Add the corresponding <code>has-navbar-fixed-top</code> or <code>has-navbar-fixed-bottom</code> modifier to the <code>&lt;html&gt;</code> element to provide the appropriate padding to the page
+          {% highlight html %}<html class="has-navbar-fixed-top">{% endhighlight %}
+        </li>
+      </ul>
+    </div>
+
+    <h4 class="title is-5">Try it out!</h4>
+
+    <div id="navbarToggles" class="buttons">
+      <a id="navbarFixTop" class="button is-link">
+        <span class="icon">
+          <i class="fa fa-square-o"></i>
+        </span>
+        <span>Fix top navbar</span>
+      </a>
+      <a id="navbarFixBottom" class="button is-link">
+        <span class="icon">
+          <i class="fa fa-square-o"></i>
+        </span>
+        <span>Show bottom navbar</span>
+      </a>
+    </div>
+
     {% include anchor.html name="Dropdown menu" %}
 
     <div class="content">

diff --git a/docs/index.html b/docs/index.html
index 5a9bf28dee0f0efb45c61cbcbe74be5eb669e667..8c78dfd517a245b9e8a9fab95a1a3b5499c105f0 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,7 +4,7 @@ route: index
 fixed_navbar: true
 ---
 
-{% include navbar.html id="Index" boxed=true fixed=true has_container=true %}
+{% include navbar.html id="Index" fixed=true has_container=true %}
 
 {% include index/intro.html %}
 

diff --git a/docs/lib/navbar.js b/docs/lib/navbar.js
new file mode 100644 (file)
index 0000000..9824dbb
--- /dev/null
+++ b/docs/lib/navbar.js
@@ -0,0 +1,46 @@
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+
+  var rootEl = document.documentElement;
+  var navbarTopEl = document.getElementById('navbar');
+  var navbarBottomEl = document.getElementById('navbarBottom');
+  var fixTopEl = document.getElementById('navbarFixTop');
+  var fixTopElIcon = fixTopEl.querySelector('.fa');
+  var fixBottomEl = document.getElementById('navbarFixBottom');
+  var fixBottomElIcon = fixBottomEl.querySelector('.fa');
+  var fixedTop = false;
+  var fixedBottom = false;
+
+  fixTopEl.addEventListener('click', function (event) {
+    fixedTop = !fixedTop;
+
+    if (fixedTop) {
+      fixTopEl.className = 'button is-success';
+      fixTopElIcon.className = 'fa fa-check-square-o';
+      rootEl.classList.add('has-navbar-fixed-top');
+      navbarTopEl.classList.add('is-fixed-top', 'has-shadow');
+    } else {
+      fixTopEl.className = 'button is-link';
+      fixTopElIcon.className = 'fa fa-square-o';
+      rootEl.classList.remove('has-navbar-fixed-top');
+      navbarTopEl.classList.remove('is-fixed-top', 'has-shadow');
+    }
+  });
+
+  fixBottomEl.addEventListener('click', function (event) {
+    fixedBottom = !fixedBottom;
+
+    if (fixedBottom) {
+      fixBottomEl.className = 'button is-success';
+      fixBottomElIcon.className = 'fa fa-check-square-o';
+      rootEl.classList.add('has-navbar-fixed-bottom');
+      navbarBottomEl.classList.remove('is-hidden');
+    } else {
+      fixBottomEl.className = 'button is-link';
+      fixBottomElIcon.className = 'fa fa-square-o';
+      rootEl.classList.remove('has-navbar-fixed-bottom');
+      navbarBottomEl.classList.add('is-hidden');
+    }
+  });
+});
\ No newline at end of file

diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 0c0c56356afd970d584d8dec7a613b050751f48f..790aeba73284d82d7a4006c723122962f6272372 100644 (file)
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -104,6 +104,8 @@ $navbar-divider-background-color: $border !default
     +navbar-fixed
   &.is-fixed-bottom
     bottom: 0
+    &.has-shadow
+      box-shadow: 0 -2px 3px rgba($black, 0.1)
   &.is-fixed-top
     top: 0
 
@@ -216,6 +218,8 @@ a.navbar-item,
       +navbar-fixed
     &.is-fixed-bottom-touch
       bottom: 0
+      &.has-shadow
+        box-shadow: 0 -2px 3px rgba($black, 0.1)
     &.is-fixed-top-touch
       top: 0
   html.has-navbar-fixed-top-touch
@@ -260,6 +264,16 @@ a.navbar-item,
   .navbar-item
     &.has-dropdown
       align-items: stretch
+    &.has-dropdown-up
+      .navbar-link::after
+        transform: rotate(135deg) translate(0.25em, -0.25em)
+      .navbar-dropdown
+        border-bottom: $navbar-dropdown-border-top
+        border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
+        border-top: none
+        bottom: 100%
+        box-shadow: 0 -8px 8px rgba($black, 0.1)
+        top: auto
     &.is-active,
     &.is-hoverable:hover
       .navbar-dropdown
@@ -336,6 +350,8 @@ a.navbar-item,
       +navbar-fixed
     &.is-fixed-bottom-desktop
       bottom: 0
+      &.has-shadow
+        box-shadow: 0 -2px 3px rgba($black, 0.1)
     &.is-fixed-top-desktop
       top: 0
   html.has-navbar-fixed-top-desktop

diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index f9ae0acfe83f204c153d8d478c2ced5ae87e71fe..23f20626b0f927e423b21d010f42e0bbdb23d272 100644 (file)
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@@ -10,6 +10,7 @@
   pointer-events: none
   position: absolute
   transform: rotate(-45deg)
+  transform-origin: center
   width: 0.5em
 
 =block