add options toggling

src/App.vue

@@ -1,35 +1,6 @@
 <template>
   <div id="app">
-    <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-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>