Header.vue

<template>
  <header>
    <div>
      <b-container>
        <b-row class="header-branding">
          <b-col md="10">
            <span class="header-title"><router-link to="home"><span class="d-none d-sm-inline">AURA/</span><b>dashboard</b></router-link></span>
          </b-col>
          <b-col
            md="2"
            class="d-none d-sm-none d-md-block"
            align="right"
          >
            <router-link to="home">
              <img
                class="header-logo"
                src="/assets/aura-dashboard-200-nobackground.png"
              >
            </router-link>
          </b-col>
        </b-row>
      </b-container>
    </div>
    <div>
      <b-container>
        <b-navbar
          toggleable="lg"
          type="dark"
          variant="dark"
        >
          <span class="d-none d-sm-inline d-lg-none menu-context-info">For more options tap the menu button on the right:</span>
          <span class="d-sm-none menu-context-info">Hit menu button for more:</span>
          <b-navbar-toggle target="nav_collapse" />
          <b-collapse
            id="nav_collapse"
            is-nav
          >
            <b-navbar-nav>
              <b-nav-item
                v-for="mod in modules"
                :key="mod.slug"
                :active="mod.slug === $route.name"
                :to="'/' + mod.slug"
              >
                {{ mod.title }}
              </b-nav-item>
            </b-navbar-nav>
            <b-navbar-nav class="ml-auto">
              <b-nav-item-dropdown
                text="EN"
                right
              >
                <b-dropdown-item href="#">
                  EN
                </b-dropdown-item>
                <b-dropdown-item href="#">
                  DE
                </b-dropdown-item>
              </b-nav-item-dropdown>
              <b-nav-item-dropdown
                v-if="user.logged_in"
                right
              >
                <!-- Using button-content slot -->
                <template slot="button-content">
                  <em>{{ user.name }}</em>
                </template>
                <b-dropdown-item to="settings">
                  Settings
                </b-dropdown-item>
                <b-dropdown-item href="#">
                  Profile
                </b-dropdown-item>
                <b-dropdown-item @click="$parent.signOut">
                  Signout
                </b-dropdown-item>
              </b-nav-item-dropdown>
              <b-nav-item
                v-if="! user.logged_in"
                to="home"
              >
                <img
                  src="/assets/16x16/system-users.png"
                  alt="log-in symbol"
                  title="Log in"
                >
              </b-nav-item>
              <div class="help-image-container">
                <b-nav-item>
                  <router-link to="help">
                    <img
                      class="help-image"
                      src="/assets/help-browser-32x32.png"
                      alt="Help symbol"
                      title="Go to help pages"
                    >
                  </router-link>
                </b-nav-item>
              </div>
            </b-navbar-nav>
          </b-collapse>
        </b-navbar>
      </b-container>
    </div>
  </header>
</template>

<script>
export default {
  props: {
    modules: { type: Array, required: true },
    user: { type: Object, required: true }
  }
}
</script>

<style scoped>
header > div:first-child {
  background: #343a40; /* for browsers that don't support gradients */
  background: linear-gradient(#000, #343a40); /* dashboard black to bootstrap dark navbar */
  padding-bottom: 1em;
}
header > div:nth-child(2) {
  background-color: #343a40;
  margin-bottom: 2em;
}
.header-branding {
  height: 75px;
  line-height: 75px;
}
.header-title {
  font-size: 3em;
  vertical-align: middle;
}
.header-title a {
  text-decoration: none;
  color: #c09;
  text-shadow: #fff 0 0 2px;
}
.header-logo {
  width: 75px;
  height: 75px;
  margin-top: 10px;
}
.help-image {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
}
.menu-context-info {
  color: rgba(255, 255, 255, 0.5);
}

</style>