From 930012f29a177ae1c89a78fcb437b330c4df6386 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 28 May 2017 17:49:46 -0700
Subject: [PATCH] try out a different navbar approach

---
 docs/_includes/icons/menu.svg  |  1 +
 docs/_includes/nav-docs.html   |  8 ++--
 docs/_includes/nav-home.html   | 81 ++++++++++++++++------------------
 docs/assets/scss/_nav.scss     | 30 +++++++++++--
 docs/assets/scss/_sidebar.scss | 19 ++++++++
 5 files changed, 90 insertions(+), 49 deletions(-)
 create mode 100644 docs/_includes/icons/menu.svg

diff --git a/docs/_includes/icons/menu.svg b/docs/_includes/icons/menu.svg
new file mode 100644
index 0000000000..60c51e3353
--- /dev/null
+++ b/docs/_includes/icons/menu.svg
@@ -0,0 +1 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
diff --git a/docs/_includes/nav-docs.html b/docs/_includes/nav-docs.html
index 44d52c0712..f34789234f 100644
--- a/docs/_includes/nav-docs.html
+++ b/docs/_includes/nav-docs.html
@@ -1,9 +1,11 @@
-<form class="bd-search">
+<form class="bd-search d-flex align-items-center">
   <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
-  <div class="dropdown-menu bd-search-results" id="search-results"></div>
+  <button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs avigation">
+    {% include icons/menu.svg class="" width="30" height="30" %}
+  </button>
 </form>
 
-<nav class="bd-links" id="docsNavbarContent">
+<nav class="collapse bd-links" id="bd-docs-nav">
   {% assign page_slug = page.url | split: '/' | last %}
   {% for group in site.data.nav %}
   {% assign link = group.pages | first %}
diff --git a/docs/_includes/nav-home.html b/docs/_includes/nav-home.html
index d6f1b04061..aea7b453ce 100644
--- a/docs/_includes/nav-home.html
+++ b/docs/_includes/nav-home.html
@@ -1,14 +1,11 @@
-<header class="navbar navbar-inverse navbar-sticky-top navbar-expand-md bd-navbar">
-  <a class="navbar-brand" href="{{ site.baseurl }}/">
+<header class="navbar navbar-inverse navbar-expand-md flex-column flex-md-row bd-navbar">
+  <a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/">
     {% include icons/bootstrap.svg width="40" height="40" class="d-block" %}
   </a>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
 
-  <div class="collapse navbar-collapse" id="bd-main-nav">
-    <ul class="navbar-nav">
-      <li class="nav-item d-none d-md-block">
+  <div class="navbar-nav-scroll">
+    <ul class="navbar-nav bd-navbar-nav flex-row">
+      <li class="nav-item">
         <a class="nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
       </li>
       <li class="nav-item">
@@ -27,39 +24,39 @@
         <a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
       </li>
     </ul>
-
-    <ul class="navbar-nav flex-row ml-md-auto my-3 my-md-0">
-      {% comment %}
-      <li class="nav-item dropdown">
-        <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          v{{ site.current_version }}
-        </a>
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
-          <a class="dropdown-item" href="{{ site.baseurl }}/v4">Bootstrap 4</a>
-          <a class="dropdown-item" href="{{ site.baseurl }}/3.3.7/">Bootstrap v3.3.7</a>
-          <a class="dropdown-item" href="{{ site.baseurl }}/2.3.2/">Bootstrap v2.3.2</a>
-          <a class="dropdown-item" href="{{ site.baseurl }}/releases/">All versions...</a>
-        </div>
-      </li>
-      {% endcomment %}
-
-      <li class="nav-item">
-        <a class="nav-link p-2" href="{{ site.repo }}">
-          {% include icons/github.svg class="navbar-nav-svg" %}
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}">
-          {% include icons/twitter.svg class="navbar-nav-svg" %}
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link p-2" href="{{ site.slack }}">
-          {% include icons/slack.svg class="navbar-nav-svg" %}
-        </a>
-      </li>
-    </ul>
-
-    <a class="btn btn-outline-secondary mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
   </div>
+
+  <ul class="navbar-nav flex-row ml-md-auto">
+    {% comment %}
+    <li class="nav-item dropdown">
+      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        v{{ site.current_version }}
+      </a>
+      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
+        <a class="dropdown-item" href="{{ site.baseurl }}/v4">Bootstrap 4</a>
+        <a class="dropdown-item" href="{{ site.baseurl }}/3.3.7/">Bootstrap v3.3.7</a>
+        <a class="dropdown-item" href="{{ site.baseurl }}/2.3.2/">Bootstrap v2.3.2</a>
+        <a class="dropdown-item" href="{{ site.baseurl }}/releases/">All versions...</a>
+      </div>
+    </li>
+    {% endcomment %}
+
+    <li class="nav-item">
+      <a class="nav-link p-2" href="{{ site.repo }}">
+        {% include icons/github.svg class="navbar-nav-svg" %}
+      </a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}">
+        {% include icons/twitter.svg class="navbar-nav-svg" %}
+      </a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link p-2" href="{{ site.slack }}">
+        {% include icons/slack.svg class="navbar-nav-svg" %}
+      </a>
+    </li>
+  </ul>
+
+  <a class="btn btn-outline-secondary d-none d-md-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
 </header>
diff --git a/docs/assets/scss/_nav.scss b/docs/assets/scss/_nav.scss
index 95de4f78da..d0865143df 100644
--- a/docs/assets/scss/_nav.scss
+++ b/docs/assets/scss/_nav.scss
@@ -5,17 +5,39 @@
 //
 
 .bd-navbar {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-  z-index: 1030; // over everything in bootstrap
   min-height: 4rem;
   background-color: $bd-purple;
   border-bottom: 1px solid rgba(0,0,0,.1);
   box-shadow: 0 .5rem 1rem rgba(0,0,0,.05);
 
+  @include media-breakpoint-down(md) {
+    .navbar-nav-scroll {
+      max-width: 100%;
+      height: 2.5rem;
+      margin-top: .25rem;
+      overflow-x: hidden;
+      font-size: .85rem;
+
+      .navbar-nav {
+        padding-bottom: 2rem;
+        overflow-x: auto;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1030; // over everything in bootstrap
+  }
+
   .navbar-nav {
     .nav-link {
+      padding-right: .5rem;
+      padding-left: .5rem;
       color: $bd-purple-light;
 
       &.active,
diff --git a/docs/assets/scss/_sidebar.scss b/docs/assets/scss/_sidebar.scss
index 1c541b66e5..0ba6bd6674 100644
--- a/docs/assets/scss/_sidebar.scss
+++ b/docs/assets/scss/_sidebar.scss
@@ -61,6 +61,11 @@
 .bd-links {
   margin-right: -15px;
   margin-left: -15px;
+
+  // Override collapse behaviors
+  @include media-breakpoint-up(md) {
+    display: block !important;
+  }
 }
 
 .bd-search {
@@ -69,10 +74,18 @@
   padding-bottom: 1rem;
 }
 
+.bd-search-docs-toggle {
+  line-height: 1;
+  color: $gray-dark;
+}
+
 // Docsearch overrides
 //
 // `!important` indicates overridden properties.
 .algolia-autocomplete {
+  display: block !important;
+  flex: 1;
+
   // Menu container
   .ds-dropdown-menu {
     width: 100%;
@@ -115,6 +128,12 @@
     display: none !important;
   }
 
+  .algolia-docsearch-suggestion--text {
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    font-weight: normal;
+  }
+
   .algolia-docsearch-suggestion--highlight {
     color: #5f2dab;
     background-color: rgba(154, 132, 187, .12);