From 319e9c12df028247598a830496fb85d36c6cbe7e Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 18 Jul 2019 13:49:05 -0700
Subject: [PATCH 1/3] Move subnav to partial, take first pass at
 conditionalizing breadcrumb links

---
 site/layouts/_default/docs.html        | 19 ++-----------------
 site/layouts/_default/home.html        |  1 +
 site/layouts/_default/single.html      | 16 +---------------
 site/layouts/partials/docs-subnav.html | 25 +++++++++++++++++++++++++
 4 files changed, 29 insertions(+), 32 deletions(-)
 create mode 100644 site/layouts/partials/docs-subnav.html

diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 9bde5246ac8d..57dde4089573 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -7,24 +7,9 @@
     {{ partial "skippy" . }}
 
     {{ partial "docs-navbar" . }}
+    {{ partial "docs-subnav" . }}
 
-    <nav class="bd-subnavbar pt-2 pb-3 pb-md-2 mb-4">
-      <div class="container d-flex align-items-md-center flex-column flex-md-row">
-        <div class="d-flex align-items-center mb-2 mb-md-0 mr-md-auto">
-          <a class="link-dark" href="/" onclick="ga('send', 'event', 'Subnav', 'click', 'Bootstrap');">Bootstrap</a>
-          {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
-          <a class="link-dark" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Subnav', 'click', 'Documentation');">Documentation</a>
-          {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
-
-          {{ partial "docs-versions" . }}
-        </div>
-        <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" data-docs-version="{{ .Site.Params.docs_version }}">
-        </form>
-      </div>
-    </nav>
-
-    <div class="container">
+    <div class="container my-4">
       <div class="row flex-xl-nowrap">
         <div class="col-md-3 bd-sidebar">
           {{ partial "docs-sidebar" . }}
diff --git a/site/layouts/_default/home.html b/site/layouts/_default/home.html
index c03de11abbed..c2b531b49b5d 100644
--- a/site/layouts/_default/home.html
+++ b/site/layouts/_default/home.html
@@ -7,6 +7,7 @@
     {{ partial "skippy" . }}
 
     {{ partial "docs-navbar" . }}
+    {{ partial "docs-subnav" . }}
 
     {{ partial "home/masthead" . }}
     {{ partial "home/masthead-followup" . }}
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
index b8caae6dd836..dbd9c01fb106 100644
--- a/site/layouts/_default/single.html
+++ b/site/layouts/_default/single.html
@@ -7,21 +7,7 @@
     {{ partial "skippy" . }}
 
     {{ partial "docs-navbar" . }}
-
-    <nav class="bd-subnavbar pt-2 pb-3 pb-md-2 mb-4">
-      <div class="container d-flex align-items-md-center flex-column flex-md-row">
-        <div class="d-flex align-items-center mb-2 mb-md-0 mr-md-auto">
-          <a class="link-dark" href="/" onclick="ga('send', 'event', 'Subnav', 'click', 'Bootstrap');">Bootstrap</a>
-          {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
-          <a class="link-dark" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Subnav', 'click', 'Documentation');">Documentation</a>
-          {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
-          {{ partial "docs-versions" . }}
-          {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
-          <span class="text-muted">Examples</span>
-        </div>
-        {{ partial "docs-search" . }}
-      </div>
-    </nav>
+    {{ partial "docs-subnav" . }}
 
     <header class="py-5 border-bottom">
       <div class="container pt-md-1 pb-md-4">
diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html
new file mode 100644
index 000000000000..2afeeddfdad8
--- /dev/null
+++ b/site/layouts/partials/docs-subnav.html
@@ -0,0 +1,25 @@
+<nav class="bd-subnavbar pt-2 pb-3 pb-md-2">
+  <div class="container d-flex align-items-md-center flex-column flex-md-row">
+    <div class="d-flex align-items-center mb-2 mb-md-0 mr-md-auto">
+      <a class="link-dark" href="/" onclick="ga('send', 'event', 'Subnav', 'click', 'Bootstrap');">Bootstrap</a>
+      {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
+
+      {{ if (eq .Page.Layout "docs") or (eq .Page.Layout "single") }}
+        <a class="link-dark" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Subnav', 'click', 'Documentation');">Documentation</a>
+        {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
+      {{ end }}
+
+      {{ partial "docs-versions" . }}
+
+      {{ if eq .Page.Title "Examples" }}
+        {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
+        <span class="text-muted">Examples</span>
+      {{ end }}
+
+
+    </div>
+    <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" data-docs-version="{{ .Site.Params.docs_version }}">
+    </form>
+  </div>
+</nav>

From 2e4c3af9e064fb567484592450f2c23c3316737a Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 18 Jul 2019 13:59:59 -0700
Subject: [PATCH 2/3] make docs navbar more usable on mobile

---
 site/layouts/partials/docs-navbar.html     | 4 ++--
 site/static/docs/4.3/assets/scss/_nav.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index ced87b9955ba..439242865bde 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -1,10 +1,10 @@
 <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
-  <div class="container py-0 px-3">
+  <div class="container flex-wrap flex-md-nowrap py-0 px-3">
     <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
       {{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }}
     </a>
 
-    <div class="navbar-nav-scroll">
+    <div class="navbar-nav-scroll order-3 order-md-0 d-flex justify-content-center">
       <ul class="navbar-nav bd-navbar-nav flex-row">
         <li class="nav-item">
           <a class="nav-link{{ if .IsHome }} active{{ end }}" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
diff --git a/site/static/docs/4.3/assets/scss/_nav.scss b/site/static/docs/4.3/assets/scss/_nav.scss
index 4f1f61f1b19c..6072a77a313d 100644
--- a/site/static/docs/4.3/assets/scss/_nav.scss
+++ b/site/static/docs/4.3/assets/scss/_nav.scss
@@ -49,7 +49,7 @@
     padding-left: .5rem;
 
     .navbar-nav-scroll {
-      max-width: 100%;
+      width: 100%;
       height: 2.5rem;
       margin-top: .25rem;
       overflow: hidden;

From 336d3d9dd9528bf9847c53f68303cb1b62c95689 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Fri, 19 Jul 2019 00:33:34 +0300
Subject: [PATCH 3/3] Make subnav and sidebar work on mobile too

---
 site/layouts/partials/docs-navbar.html        |  2 +-
 site/layouts/partials/docs-sidebar.html       |  2 +-
 site/layouts/partials/docs-subnav.html        | 21 ++++++++++++-------
 site/static/docs/4.3/assets/scss/_nav.scss    |  3 ---
 .../static/docs/4.3/assets/scss/_sidebar.scss |  4 ++++
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 439242865bde..52bbd4051757 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -1,4 +1,4 @@
-<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
+<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar px-0">
   <div class="container flex-wrap flex-md-nowrap py-0 px-3">
     <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
       {{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }}
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index d661bf725bce..94b73094de40 100644
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -21,7 +21,7 @@
         </a>
 
         {{- if $group.pages }}
-        <ul class="nav bd-sidenav mb-2">
+        <ul class="nav bd-sidenav flex-column mb-2">
           {{- range $doc := $group.pages -}}
             {{- $doc_slug := $doc.title | urlize }}
             <li{{ if and $active_group (eq $page_slug $doc_slug) }} class="active bd-sidenav-active"{{ end }}>
diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html
index 2afeeddfdad8..34aefb43b461 100644
--- a/site/layouts/partials/docs-subnav.html
+++ b/site/layouts/partials/docs-subnav.html
@@ -1,8 +1,10 @@
 <nav class="bd-subnavbar pt-2 pb-3 pb-md-2">
-  <div class="container d-flex align-items-md-center flex-column flex-md-row">
-    <div class="d-flex align-items-center mb-2 mb-md-0 mr-md-auto">
-      <a class="link-dark" href="/" onclick="ga('send', 'event', 'Subnav', 'click', 'Bootstrap');">Bootstrap</a>
-      {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
+  <div class="container d-flex align-items-md-center flex-wrap">
+    <div class="d-flex align-items-center mr-md-auto order-2 order-md-0">
+      <div class="d-none d-md-block">
+        <a class="link-dark" href="/" onclick="ga('send', 'event', 'Subnav', 'click', 'Bootstrap');">Bootstrap</a>
+        {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
+      </div>
 
       {{ if (eq .Page.Layout "docs") or (eq .Page.Layout "single") }}
         <a class="link-dark" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Subnav', 'click', 'Documentation');">Documentation</a>
@@ -15,11 +17,16 @@
         {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
         <span class="text-muted">Examples</span>
       {{ end }}
-
-
     </div>
-    <form class="bd-search d-flex align-items-center">
+
+    <form class="bd-search d-flex align-items-center mb-2 mb-md-0">
       <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
     </form>
+
+    {{ if eq .Page.Layout "docs" }}
+      <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3 order-3 ml-auto" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
+       {{ partial "icons/menu.svg" (dict "width" "30" "height" "30") }}
+     </button>
+    {{ end }}
   </div>
 </nav>
diff --git a/site/static/docs/4.3/assets/scss/_nav.scss b/site/static/docs/4.3/assets/scss/_nav.scss
index 6072a77a313d..2c51a4d73ca2 100644
--- a/site/static/docs/4.3/assets/scss/_nav.scss
+++ b/site/static/docs/4.3/assets/scss/_nav.scss
@@ -45,9 +45,6 @@
   background-color: $bd-purple-bright;
 
   @include media-breakpoint-down(md) {
-    padding-right: .5rem;
-    padding-left: .5rem;
-
     .navbar-nav-scroll {
       width: 100%;
       height: 2.5rem;
diff --git a/site/static/docs/4.3/assets/scss/_sidebar.scss b/site/static/docs/4.3/assets/scss/_sidebar.scss
index 43232e9aa414..a88e4b51e682 100644
--- a/site/static/docs/4.3/assets/scss/_sidebar.scss
+++ b/site/static/docs/4.3/assets/scss/_sidebar.scss
@@ -22,6 +22,10 @@
 .bd-search {
   position: relative; // To contain the Algolia search
 
+  @include media-breakpoint-down(md) {
+    width: 100%;
+  }
+
   .form-control:focus {
     border-color: $bd-purple-bright;
     box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);