enfrancais-app/src/pages/_partials/MainHeader.vue

<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="link in mainRoutes" :key="link.to"
            :to="link.to" class="d-tb-none" :class="'dropdown-item-' + link.variant"
          >
            {{ $t('sections.' + link.to) }}
          </b-dropdown-item>

          <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 d-none d-tb-block">
        <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-button
        v-if="['library', 'kit'].includes($route.name)"
        class=""
        :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>

    <b-collapse id="collapse-options" v-model="optionsVisible">
      <router-view name="options" />
    </b-collapse>
  </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'],
      optionsVisible: window.innerWidth >= 768
    }
  }
}
</script>

<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-up(md) {
    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(tb) {
        padding: 0 .75rem;
        margin-left: -.75rem;
      }
    }

    .dropdown-menu {
      @include media-breakpoint-down(sm) {
        width: 100vw;
      }

      @each $variant in 'dark', 'kit', 'creation' {
        .dropdown-item-#{$variant} {
          background-color: theme-color($variant);
          a:not(:hover):not(:focus) {
            color: if($variant == 'dark', $white, $black);
          }
        }
      }
    }
  }

  .burger-icon {
    width: 10px;
    height: 10px;
    display: block;

    path {
      stroke: $black;
      stroke-width: 2px;
      stroke-linecap: round;
    }

    @include media-breakpoint-up(md) {
      width: 16px;
      height: 16px;

      path {
        stroke-width: 2.5px;
      }
    }
  }

  &-brand {
    display: flex;

    .navbar-brand {
      font-size: inherit;
      font-weight: $font-weight-bold;
      text-decoration: none;
      line-height: 1;
      padding: 0;

      @include media-breakpoint-up(md) {
        font-size: 1.3125rem;
      }
    }
  }

  .nav-list {
    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(md) {
      font-size: 1rem;
    }
  }
}

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