|
@@ -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>
|