fix(docs): Side bar navigation not accessible on small screens

docs/nuxt/components/search.vue

@@ -2,18 +2,19 @@
 <form class="bd-search d-flex align-items-center">
   <span class="algolia-autocomplete">
 
-      <input type="search" class="form-control ds-input" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-labelledby="search-input" aria-owns="algolia-autocomplete-listbox-0" dir="auto">
+      <input type="search" disabled class="form-control ds-input" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-labelledby="search-input" aria-owns="algolia-autocomplete-listbox-0" dir="auto">
 
       <pre aria-hidden="true"></pre>
 
       <span class="ds-dropdown-menu" role="listbox" id="algolia-autocomplete-listbox-0">
         <div class="ds-dataset-1"></div>
       </span>
   </span>
+
+  <b-nav-toggle target="bd-docs-nav" class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" aria-label="Toggle docs avigation">
+    <svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path></svg>
+  </b-nav-toggle>
 
-  <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">
-      <svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path></svg>
-  </button>
 </form>
 </template>
 
@@ -54,4 +55,4 @@
     text-rendering: auto;
     text-transform: none;
   }
-</style>
+</style>

docs/nuxt/components/sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav class="collapse bd-links" id="bd-docs-nav">
+    <b-collapse tag="nav" is-nav class="bd-links" id="bd-docs-nav">
         <div class="bd-toc-item active" v-for="group in site.nav" :key="group.slug">
             <router-link class="bd-toc-link" :to="'/docs/'+group.slug">
                 {{ group.title }}
@@ -18,7 +18,7 @@
             </b-nav>
 
         </div>
-    </nav>
+    </b-collapse>
 </template>
 
 <style>

docs/nuxt/layouts/docs.vue

@@ -5,6 +5,7 @@
         <div class="container-fluid">
             <div class="row flex-xl-nowrap2">
                 <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
+                    <div class="d-block d-md-none py-4 mt-3"></div>
                     <m-search/>
                     <m-sidebar></m-sidebar>
                 </div>

lib/components/collapse.vue

@@ -11,11 +11,12 @@
             @leave="onLeave"
             @after-leave="onAfterLeave"
     >
-        <div v-show="show"
-             :id="id || null"
-             :class="classObject"
-             @click="clickHandler"
-        ><slot></slot></div>
+        <component v-show="show"
+                   :id="id || null"
+                   :is="tag"
+                   :class="classObject"
+                   @click="clickHandler"
+        ><slot></slot></component>
     </transition>
 </template>
 
@@ -50,6 +51,10 @@
             visible: {
                 type: Boolean,
                 default: false
+            },
+            tag: {
+                type: String,
+                default: 'div'
             }
         },
         watch: {

lib/components/nav-toggle.vue

@@ -6,7 +6,7 @@
             :aria-expanded="toggleState ? 'true' : 'false'"
             @click="onclick"
     >
-        <span class="navbar-toggler-icon"></span>
+        <slot><span class="navbar-toggler-icon"></span></slot>
     </button>
 </template>
 

lib/mixins/index.js

@@ -10,7 +10,6 @@ import formStateMixin from "./form-state";
 import idMixin from "./id";
 import linkMixin from "./link";
 import listenOnRootMixin from "./listen-on-root";
-import popoverMixin from "./popover";
 
 export {
     cardMixin,
@@ -24,6 +23,5 @@ export {
     formStateMixin,
     idMixin,
     linkMixin,
-    listenOnRootMixin,
-    popoverMixin
+    listenOnRootMixin
 };