add options toggling

src/pages/_partials/MainHeader.vue

@@ -36,9 +36,23 @@
           </li>
         </ul>
       </nav>
+
+      <b-button
+        v-if="['library', 'kit'].includes($route.name)"
+        class="d-tb-none"
+        :class="optionsVisible ? null : 'collapsed'"
+        :aria-expanded="optionsVisible ? 'true' : 'false'"
+        aria-controls="collapse-options"
+        @click="optionsVisible = !optionsVisible"
+        variant="outline-dark"
+      >
+        Options <span class="collapse-icon" :class="optionsVisible ? null : 'collapsed'">></span>
+      </b-button>
     </b-navbar>
 
-    <router-view name="options" />
+    <b-collapse id="collapse-options" v-model="optionsVisible">
+      <router-view name="options" />
+    </b-collapse>
   </header>
 </template>
 
@@ -53,7 +67,8 @@ export default {
         { to: 'kit', variant: 'kit' },
         { to: 'gallery', variant: 'creation' }
       ],
-      subRoutes: ['home', 'introduction', 'blog', 'contact']
+      subRoutes: ['home', 'introduction', 'blog', 'contact'],
+      optionsVisible: window.innerWidth >= 768
     }
   }
 }
@@ -62,20 +77,16 @@ export default {
 <style lang="scss" scoped>
 .main-header {
   width: 100%;
+  border-bottom: $line;
 }
 
 
 .main-navbar {
   padding: $header-spacer-sm;
   font-size: $font-size-sm;
+  justify-content: space-between;
 
-  @include media-breakpoint-down(xs) {
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: stretch;
-  }
-
-  @include media-breakpoint-up(tb) {
+  @include media-breakpoint-up(md) {
     height: $header-height;
     padding: 0 $header-spacer;
   }
@@ -121,7 +132,7 @@ export default {
       stroke-linecap: round;
     }
 
-    @include media-breakpoint-up(tb) {
+    @include media-breakpoint-up(md) {
       width: 16px;
       height: 16px;
 
@@ -141,15 +152,13 @@ export default {
       line-height: 1;
       padding: 0;
 
-      @include media-breakpoint-up(tb) {
+      @include media-breakpoint-up(md) {
         font-size: 1.3125rem;
       }
     }
   }
 
   .nav-list {
-    margin-left: auto;
-
     ul {
       display: flex;
       padding: 0;
@@ -202,4 +211,25 @@ export default {
     }
   }
 }
+
+.collapse-icon {
+  display: inline-block;
+  transform: translate(0, 2px) rotate(270deg);
+  line-height: 0;
+  font-size: 1.2rem;
+  font-weight: 200;
+
+  &.collapsed {
+    transform: translate(3px, 2px) rotate(90deg) ;
+  }
+}
+
+#collapse-options {
+  @include media-breakpoint-down(sm) {
+    position: absolute;
+    z-index: 11;
+    width: 100%;
+    border-bottom: $line;
+  }
+}
 </style>