src/components/AppNavigation/AppNavigation.vue

<template>
  <div>
    <div class="nav-container" :class="{ open: isNavigationOpen }">
      <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')">
        <b-nav vertical>
          <b-nav-item to="/">
            <icon-overview />
            {{ $t('appNavigation.overview') }}
          </b-nav-item>

          <li class="nav-item">
            <b-button v-b-toggle.health-menu variant="link">
              <icon-health />
              {{ $t('appNavigation.health') }}
              <icon-expand class="icon-expand" />
            </b-button>
            <b-collapse id="health-menu" tag="ul" class="nav-item__nav">
              <b-nav-item to="/health/event-logs">
                {{ $t('appNavigation.eventLogs') }}
              </b-nav-item>
              <b-nav-item to="/health/hardware-status">
                {{ $t('appNavigation.hardwareStatus') }}
              </b-nav-item>
              <b-nav-item to="/health/sensors">
                {{ $t('appNavigation.sensors') }}
              </b-nav-item>
            </b-collapse>
          </li>

          <li class="nav-item">
            <b-button v-b-toggle.control-menu variant="link">
              <icon-control />
              {{ $t('appNavigation.control') }}
              <icon-expand class="icon-expand" />
            </b-button>
            <b-collapse id="control-menu" tag="ul" class="nav-item__nav">
              <b-nav-item to="/control/kvm">
                {{ $t('appNavigation.kvm') }}
              </b-nav-item>
              <b-nav-item to="/control/manage-power-usage">
                {{ $t('appNavigation.managePowerUsage') }}
              </b-nav-item>
              <b-nav-item to="/control/reboot-bmc">
                {{ $t('appNavigation.rebootBmc') }}
              </b-nav-item>
              <b-nav-item to="/control/serial-over-lan">
                {{ $t('appNavigation.serialOverLan') }}
              </b-nav-item>
              <b-nav-item to="/control/server-led">
                {{ $t('appNavigation.serverLed') }}
              </b-nav-item>
              <b-nav-item to="/control/server-power-operations">
                {{ $t('appNavigation.serverPowerOperations') }}
              </b-nav-item>
            </b-collapse>
          </li>

          <li class="nav-item">
            <b-button v-b-toggle.configuration-menu variant="link">
              <icon-configuration />
              {{ $t('appNavigation.configuration') }}
              <icon-expand class="icon-expand" />
            </b-button>
            <b-collapse id="configuration-menu" tag="ul" class="nav-item__nav">
              <b-nav-item to="/configuration/date-time-settings">
                {{ $t('appNavigation.dateTimeSettings') }}
              </b-nav-item>
              <b-nav-item href="javascript:void(0)">
                {{ $t('appNavigation.firmware') }}
              </b-nav-item>
              <b-nav-item to="/configuration/network-settings">
                {{ $t('appNavigation.networkSettings') }}
              </b-nav-item>
              <b-nav-item href="javascript:void(0)">
                {{ $t('appNavigation.snmpSettings') }}
              </b-nav-item>
            </b-collapse>
          </li>

          <li class="nav-item">
            <b-button v-b-toggle.access-control-menu variant="link">
              <icon-access-control />
              {{ $t('appNavigation.accessControl') }}
              <icon-expand class="icon-expand" />
            </b-button>
            <b-collapse id="access-control-menu" tag="ul" class="nav-item__nav">
              <b-nav-item to="/access-control/ldap">
                {{ $t('appNavigation.ldap') }}
              </b-nav-item>
              <b-nav-item to="/access-control/local-user-management">
                {{ $t('appNavigation.localUserManagement') }}
              </b-nav-item>
              <b-nav-item to="/access-control/ssl-certificates">
                {{ $t('appNavigation.sslCertificates') }}
              </b-nav-item>
            </b-collapse>
          </li>
        </b-nav>
      </nav>
    </div>
    <transition name="fade">
      <div
        v-if="isNavigationOpen"
        id="nav-overlay"
        class="nav-overlay"
        @click="toggleIsOpen"
      ></div>
    </transition>
  </div>
</template>

<script>
import IconAnalytics from '@carbon/icons-vue/es/analytics/16';
import IconDataCheck from '@carbon/icons-vue/es/data--check/16';
import IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16';
import IconSettings from '@carbon/icons-vue/es/settings/16';
import IconPassword from '@carbon/icons-vue/es/password/16';
import IconChevronUp from '@carbon/icons-vue/es/chevron--up/16';

export default {
  name: 'AppNavigation',
  components: {
    iconOverview: IconAnalytics,
    iconHealth: IconDataCheck,
    iconControl: IconSettingsAdjust,
    iconConfiguration: IconSettings,
    iconAccessControl: IconPassword,
    iconExpand: IconChevronUp
  },
  data() {
    return {
      isNavigationOpen: false
    };
  },
  watch: {
    $route: function() {
      this.isNavigationOpen = false;
    },
    isNavigationOpen: function(isNavigationOpen) {
      this.$root.$emit('change:isNavigationOpen', isNavigationOpen);
    }
  },
  mounted() {
    this.$root.$on('toggle:navigation', () => this.toggleIsOpen());
  },
  methods: {
    toggleIsOpen() {
      this.isNavigationOpen = !this.isNavigationOpen;
    }
  }
};
</script>

<style scoped lang="scss">
@import 'src/assets/styles/helpers';

svg {
  fill: currentColor;
  height: 1.2rem;
  width: 1.2rem;
  margin-left: 0 !important; //!important overriding button specificity
  vertical-align: text-bottom;
  &:not(.icon-expand) {
    margin-right: $spacer;
  }
}

.nav {
  padding-top: $spacer / 4;
  @include media-breakpoint-up($responsive-layout-bp) {
    padding-top: $spacer;
  }
}

.nav-item__nav {
  list-style: none;
  padding-left: 0;
  margin-left: 0;

  .nav-item {
    outline: none;
  }

  .nav-link {
    padding-left: $spacer * 4;
    outline: none;

    &:not(.nav-link--current) {
      font-weight: normal;
    }
  }
}

.btn-link {
  width: 100%;
  text-align: left;
  text-decoration: none !important;
  border-radius: 0;

  &.collapsed {
    .icon-expand {
      transform: rotate(180deg);
    }
  }
}

.icon-expand {
  float: right;
  margin-top: $spacer / 4;
}

.btn-link,
.nav-link {
  position: relative;
  font-weight: $headings-font-weight;
  padding-left: $spacer; // defining consistent padding for links and buttons
  padding-right: $spacer;
  color: theme-color('secondary');

  &:hover {
    background-color: gray('300');
    color: theme-color('dark');
  }

  &:focus {
    box-shadow: $btn-focus-box-shadow;
    color: theme-color('dark');
  }
}

.nav-link--current,
.nav-link--current:hover,
.nav-link--current:focus {
  font-weight: $headings-font-weight;
  background-color: theme-color('secondary');
  color: theme-color('light');
  cursor: default;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background-color: theme-color('primary');
  }
}

.nav-container {
  position: fixed;
  width: $navigation-width;
  top: $header-height;
  bottom: 0;
  left: 0;
  z-index: $zindex-fixed;
  overflow-y: auto;
  background-color: gray('200');
  transform: translateX(-$navigation-width);
  transition: transform $exit-easing--productive $duration--moderate-02;
  @include media-breakpoint-down(md) {
    z-index: $zindex-fixed + 2;
  }

  &.open,
  &:focus-within {
    transform: translateX(0);
    transition-timing-function: $entrance-easing--productive;
  }

  @include media-breakpoint-up($responsive-layout-bp) {
    transition-duration: $duration--fast-01;
    transform: translateX(0);
  }
}

.nav-overlay {
  position: fixed;
  top: $header-height;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: $zindex-fixed + 1;
  background-color: $black;
  opacity: 0.5;

  &.fade-enter-active {
    transition: opacity $duration--moderate-02 $entrance-easing--productive;
  }

  &.fade-leave-active {
    transition: opacity $duration--fast-02 $exit-easing--productive;
  }

  &.fade-enter,
  &.fade-leave-to {
    opacity: 0;
  }

  @include media-breakpoint-up($responsive-layout-bp) {
    display: none;
  }
}
</style>