dropdown menu

_src/_assets/javascripts/bigchain/dropdowns.js

@@ -0,0 +1,13 @@
+//=include popper.js/dist/umd/popper.js
+//=include bootstrap/js/dist/util.js
+//=include bootstrap/js/dist/dropdown.js
+
+$('body').on('mouseenter mouseleave', '.dropdown', function(e) {
+    var _d = $(e.target).closest('.dropdown')
+
+    _d.addClass('show')
+
+    setTimeout(function () {
+        _d[_d.is(':hover') ? 'addClass' : 'removeClass']('show')
+    }, 300)
+})

_src/_assets/javascripts/page-styleguide.js

@@ -0,0 +1 @@
+//=include bigchain/dropdowns.js

_src/_assets/styles/bigchain.scss

@@ -36,6 +36,7 @@
 @import 'bigchain/timeline';
 @import 'bigchain/terminal';
 @import 'bigchain/nyan';
+@import 'bigchain/dropdowns';
 @import 'bigchain/utilities';
 
 // Content types

_src/_assets/styles/bigchain/_dropdowns.scss

@@ -0,0 +1,82 @@
+// The dropdown wrapper (`<div>`)
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-toggle {
+    &:after {
+        content: '';
+        display: inline-block;
+        height: 0;
+        width: 0;
+        border: .3rem solid transparent;
+        border-top-color: inherit;
+        margin-bottom: -.2rem;
+    }
+}
+
+// The dropdown menu
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    display: none;
+    float: left;
+    min-width: 10rem;
+    padding: $spacer / 4 0;
+    margin: 0;
+    font-size: $font-size-base;
+    color: $body-bg;
+    text-align: left;
+    list-style: none;
+    border-radius: $border-radius;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
+    background: $gray-dark;
+    background-clip: padding-box;
+    border: 0;
+    max-height: 20rem;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+
+    @media (max-width: 27rem), (max-height: 27rem) {
+        max-height: 11.25rem;
+    }
+}
+
+// Links, buttons, and more within the dropdown menu
+.dropdown-item {
+    display: block;
+    width: 100%;
+    padding: $spacer / 2 $spacer;
+    clear: both;
+    font-weight: $font-weight-normal;
+    color: $brand-main-gray-light;
+    text-align: inherit;
+    white-space: nowrap;
+    background-color: transparent;
+    border: 0;
+    box-shadow: none;
+
+    &:hover,
+    &:focus {
+        text-decoration: none;
+    }
+
+    &.active {
+        background: $brand-main-gray-light;
+        color: $gray-dark;
+        text-decoration: none;
+    }
+}
+
+.dropdown-menu.show,
+.dropdown:hover > .dropdown-menu {
+    display: block;
+}
+
+.dropdown > .dropdown-toggle:active {
+    // Without this, clicking will make it sticky
+    pointer-events: none;
+}

_src/_assets/styles/bigchain/_menus.scss

@@ -5,6 +5,10 @@
     width: 100%;
     align-self: flex-start;
     text-align: left;
+
+    .dropdown-menu {
+        position: absolute;
+    }
 }
 
 .menu__link {
@@ -26,7 +30,7 @@
     }
 
     // link line
-    &:after {
+    &:not(.dropdown-toggle):after {
         content: '';
         position: absolute;
         height: 2px;

_src/_includes/menu-footer.html

@@ -34,6 +34,7 @@
 
                 <a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
 
+
             {% endfor %}
         </div>
 

_src/_includes/menu-main.html

@@ -27,7 +27,28 @@
                             {% assign active = 'active' %}
                         {% endif %}
 
-                        <a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
+                        {% if link.items %}
+                            <div class="dropdown">
+                                <a  class="menu__link {{ active }} js-tracking-menu dropdown-toggle"
+                                    data-toggle="dropdown"
+                                    aria-haspopup="true"
+                                    aria-expanded="false"
+                                    id="dropdownMenuButton"
+                                    href="{{ link.url }}">{{ link.title }}
+                                </a>
+                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                    {% for item in link.items %}
+                                         {% assign active = nil %}
+                                         {% if page.url contains item.url %}
+                                            {% assign active = 'active' %}
+                                        {% endif %}
+                                        <a class="dropdown-item {{ active }}" href="{{ item.url }}">{{ item.title }}</a>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        {% else %}
+                            <a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
+                        {% endif %}
 
                     {% endfor %}
                 </div>

_src/services.html

@@ -124,7 +124,7 @@ contact:
         </div>
 
         <div class="actions">
-            <a class="btn btn-blue" href="#contact">Get in touch</a>
+            <a class="btn btn-blue" data-scroll href="#contact">Get in touch</a>
         </div>
 
     </div>

_src/styleguide.md

@@ -3,6 +3,8 @@ layout: page
 
 title: Style Guide
 sitemap: false
+
+js: page-styleguide.min.js
 ---
 
 ## Colors
@@ -319,3 +321,30 @@ Logo can be used with a base class and modifier classes for size & color:
     Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
 </div>
 ```
+
+### Dropdowns
+
+<div class="dropdown">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Dropdown button
+  </button>
+  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+  </div>
+</div>
+<br />
+
+```html
+<div class="dropdown">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Dropdown button
+  </button>
+  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+  </div>
+</div>
+```

package.json

@@ -26,6 +26,7 @@
   ],
   "dependencies": {
     "bigchaindb-driver": "^4.0.0",
+    "bootstrap": "^4.0.0",
     "clipboard": "^2.0.0",
     "gumshoe": "github:cferdinandi/gumshoe",
     "is-in-viewport": "^3.0.0",
@@ -33,6 +34,7 @@
     "normalize-css": "^2.3.1",
     "normalize-opentype.css": "^0.2.4",
     "parsleyjs": "^2.8.1",
+    "popper.js": "^1.14.3",
     "select2": "^4.0.5",
     "smooth-scroll": "^12.1.5",
     "svg4everybody": "^2.1.9",