separate header from App and add base styling

src/assets/scss/abstracts/_variables.scss

@@ -81,7 +81,7 @@ $font-family-sans-serif: 'Noto Sans';
 $font-family-text: 'Redaction'; // custom
 
 $font-size-base: 1rem;
-$font-size-sm: $font-size-base * .78125;
+$font-size-sm: $font-size-base * .9;
 
 $line-height-base: 1.5;
 $line-height-lg: $line-height-base;
@@ -119,9 +119,17 @@ $card-border-width: 0;
 // SPINNER
 $spinner-width: 50px;
 
-// CUSTOM
-$btn-size: 26px;
 
+// ╭─╴╷ ╷╭─╴╶┬╴╭─╮╭╮╮
+// │  │ │╰─╮ │ │ ││││
+// ╰─╴╰─╯╶─╯ ╵ ╰─╯╵╵╵
+
+// HEADER
+$header-spacer-sm: 18px;
+$header-spacer: 35px;
+$header-height: 86px;
+
+// NODEVIEW
 $node-view-spacer-sm-x: 18px;
 $node-view-spacer-sm-y: 18px;
 $node-view-spacer-x: 30px;
@@ -134,6 +142,8 @@ $node-card-spacer-y: 10px;
 $node-card-width: 560px;
 $node-card-height: 330px;
 
+// MISC
+$btn-size: 26px;
 $line: $border-width solid $black;
 
 @import '~bootstrap/scss/variables';

src/assets/scss/app.scss

@@ -4,6 +4,7 @@
 
 @import 'base/root';
 
+@import 'base/bootstrap-overrides';
 @import 'classes/misc';
 @import 'classes/nav-list';
 

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

@@ -0,0 +1,24 @@
+legend {
+  font-weight: $font-weight-bold;
+}
+
+.dropdown-menu {
+  border: 0;
+  padding: 0;
+  margin-left: -#{$header-spacer-sm};
+  margin-top: 5px;
+
+  .dropdown-item {
+    font-size: $font-size-sm;
+    padding: .25rem $header-spacer-sm;
+  }
+
+  @include media-breakpoint-up(sm) {
+    margin-left: -#{$header-spacer};
+
+    .dropdown-item {
+      font-size: $font-size-base;
+      padding: .25rem $header-spacer;
+    }
+  }
+}

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>