NavBar.vue

<template>
  <div>
    <b-navbar toggleable="lg" type="dark" variant="" fixed="top">
      <b-navbar-brand to="/" class="home-link">
        <YodaLogo />
      </b-navbar-brand>
      <b-navbar-toggle target="navbar-toggle-collapse">
        <template v-slot:default="{ expanded }">
          <b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>
          <b-icon v-else icon="chevron-bar-down"></b-icon>
        </template>
      </b-navbar-toggle>

      <b-collapse id="navbar-toggle-collapse" is-nav>
        <b-navbar-nav class="ml-auto">
          <router-link class="nav-item" to="/" exact>
            HOME
          </router-link>
          <router-link class="nav-item" to="/products">
            PRODUCTS
          </router-link>
          <router-link class="nav-item" to="/services">
            SERVICES
          </router-link>
          <router-link class="nav-item" to="/who-we-are">
            WHO WE ARE
          </router-link>
          <router-link class="nav-item" to="/contact-us">
            CONTACT US
          </router-link>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>
<script>
import YodaLogo from "@/assets/images/icons/Logo_P1_Yoda_Campfire-WH.svg";

export default {
  name: "NavBar",
  components: {
    YodaLogo
  }
};
</script>
<style lang="scss" scoped>
.navbar {
  background-color: $secondary-bg-color;

  .navbar-toggler {
    outline: none;
  }
  .navbar-collapse {
    &.collapse.show,
    &.collapse.collapsing {
      .nav-item {
        margin: 0.5rem auto !important;
      }
    }
  }

  .home-link {
    margin-left: 6rem;
  }

  .navbar-nav {
    margin-right: 6rem;
    font-weight: 600;

    .nav-item {
      padding: 0.5rem;
      margin: 0 0.5rem;
      // width: 120px;
      letter-spacing: 0.02rem;
      color: $secondary-text-color;
      border-top: 2px solid transparent;
      border-bottom: 2px solid transparent;
    }

    .router-link-active {
      border-bottom: 2px solid $p1-light-green;
      color: $p1-light-green;
    }

    .nav-item:last-child {
      margin-right: 0;
    }
  }
}

@include media-breakpoint-down(md) {
  .navbar .home-link {
    margin-left: 1rem;
  }
  .navbar .navbar-nav {
    margin-right: 1rem;
  }
}
@include media-breakpoint-only(lg) {
  .navbar .home-link {
    margin-left: 1.5rem;
  }
  .navbar .navbar-nav {
    margin-right: 1.5rem;
  }
}
</style>