separate header from App and add base styling

src/pages/_partials/MainHeader.vue

@@ -0,0 +1,185 @@
+<template>
+  <header class="main-header">
+    <b-navbar class="main-navbar">
+      <div class="main-navbar-brand">
+        <b-dropdown variant="link" no-caret>
+          <template #button-content>
+            <svg class="burger-icon" viewBox="0 0 16 16">
+              <path v-for="n in [2, 8, 14]" :key="n" :d="`M 2,${n} h12`" />
+            </svg>
+            <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>
+      </div>
+
+      <nav class="nav-list">
+        <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>
+</template>
+
+<script>
+export default {
+  name: 'MainHeader',
+
+  data () {
+    return {
+      mainRoutes: [
+        { to: 'library', variant: 'dark' },
+        { to: 'kit', variant: 'kit' },
+        { to: 'gallery', variant: 'creation' }
+      ],
+      subRoutes: ['home', 'introduction', 'blog', 'contact']
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main-header {
+  width: 100%;
+}
+
+
+.main-navbar {
+  padding: $header-spacer-sm;
+  font-size: $font-size-sm;
+
+  @include media-breakpoint-down(xs) {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: stretch;
+  }
+
+  @include media-breakpoint-up(sm) {
+    height: $header-height;
+    padding: 0 $header-spacer;
+  }
+
+  ::v-deep .dropdown-toggle {
+    padding: 0;
+    border: 0;
+    line-height: 1;
+    padding: 0 .5rem;
+    margin-left: -.5rem;
+
+    @include media-breakpoint-up(sm) {
+      padding: 0 .75rem;
+      margin-left: -.75rem;
+    }
+  }
+
+  .burger-icon {
+    width: 10px;
+    height: 10px;
+    display: block;
+
+    path {
+      stroke: $black;
+      stroke-width: 2px;
+      stroke-linecap: round;
+    }
+
+    @include media-breakpoint-up(sm) {
+      width: 16px;
+      height: 16px;
+
+      path {
+        stroke-width: 2.5px;
+      }
+    }
+  }
+
+  &-brand {
+    display: flex;
+
+    @include media-breakpoint-down(xs) {
+      padding-bottom: $header-spacer-sm;
+    }
+
+    .navbar-brand {
+      font-size: inherit;
+      font-weight: $font-weight-bold;
+      text-decoration: none;
+      line-height: 1;
+      padding: 0;
+
+      @include media-breakpoint-up(sm) {
+        font-size: 1.3125rem;
+      }
+    }
+  }
+
+  .nav-list {
+    margin-left: auto;
+
+    ul {
+      display: flex;
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
+
+    @include media-breakpoint-down(xs) {
+      width: 100%;
+
+      ul {
+        flex-direction: column;
+        width: 100%;
+      }
+
+      li {
+        height: 22px;
+        &:not(:last-child) {
+          margin-bottom: 3px;
+        }
+      }
+
+      a {
+        height: 22px;
+        width: 100%;
+        text-align: left;
+      }
+    }
+
+    @include media-breakpoint-up(sm) {
+      ul {
+        height: 26px;
+      }
+
+      li:not(:last-child) {
+        margin-right: 7px;
+      }
+    }
+
+    a:not(.active) {
+      opacity: .25;
+    }
+  }
+
+  .btn {
+    font-size: inherit;
+
+    @include media-breakpoint-up(sm) {
+      font-size: 1rem;
+    }
+  }
+}
+</style>