add options toggling

src/App.vue

@@ -1,35 +1,6 @@
 <template>
   <div id="app">
-    <header>
+    <main-header />
-      <b-navbar>
-        <b-dropdown variant="link" no-caret>
-          <template #button-content>
-            <span class="navbar-toggler-icon" />
-            <span class="sr-only">Menu</span>
-          </template>
-
-          <b-dropdown-item v-for="name in subRoutes" :key="name" :to="{ name }">
-            {{ $t('sections.' + name) }}
-          </b-dropdown-item>
-        </b-dropdown>
-
-        <b-navbar-brand :to="{ name: 'home' }">
-          {{ $t('title') }}
-        </b-navbar-brand>
-
-        <nav class="nav-list ml-auto">
-          <ul>
-            <li v-for="link in mainRoutes" :key="link.to">
-              <b-button :to="link.to" :active="$route.name === link.to" :variant="link.variant">
-                {{ $t('sections.' + link.to) }}
-              </b-button>
-            </li>
-          </ul>
-        </nav>
-      </b-navbar>
-
-      <router-view name="options" />
-    </header>
 
     <main id="main">
       <router-view />
@@ -38,9 +9,16 @@
 </template>
 
 <script>
+import MainHeader from '@/pages/_partials/MainHeader'
+
+
 export default {
   name: 'App',
 
+  components: {
+    MainHeader
+  },
+
   metaInfo () {
     return {
       // if no subcomponents specify a metaInfo.title, try to get one from the route name.
@@ -48,17 +26,6 @@ export default {
       // all titles will be injected into this template
       titleTemplate: '%s | ' + this.$t('title')
     }
-  },
-
-  data () {
-    return {
-      mainRoutes: [
-        { to: 'library', variant: 'dark' },
-        { to: 'kit', variant: 'kit' },
-        { to: 'gallery', variant: 'creation' }
-      ],
-      subRoutes: ['home', 'introduction', 'blog', 'contact']
-    }
   }
 }
 </script>
@@ -68,19 +35,4 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.navbar-brand {
-  font-size: 1.3125rem;
-  font-weight: $font-weight-bold;
-  text-decoration: none;
-}
-
-.nav-list {
-  a:not(.active) {
-    opacity: .25;
-  }
-}
-
-#app > header {
-  border-bottom: $line;
-}
 </style>

src/assets/scss/base/_bootstrap-overrides.scss

@@ -13,7 +13,7 @@ legend {
     padding: .25rem $header-spacer-sm;
   }
 
-  @include media-breakpoint-up(tb) {
+  @include media-breakpoint-up(md) {
     margin-left: -#{$header-spacer};
 
     .dropdown-item {

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) {
+  @include media-breakpoint-up(md) {
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: stretch;
-  }
-
-  @include media-breakpoint-up(tb) {
     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>