Coursetro Vue.js compare tutorial - navbar update (Bulma's nav is deprecated)

navbar.html

    <div class="navbar has-shadow">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">MyCompany</a>

          <span class="navbar-burger" v-on:click="toggleNav" v-bind:class="{ 'is-active': isActive }">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>

        <div class="navbar-end navbar-menu" v-bind:class="{ 'is-active': isActive }">

          <router-link to="/" class="navbar-item r-item">Home</router-link>
          <router-link to="faq" class="navbar-item r-item">Features</router-link>
          <router-link to="faq" class="navbar-item r-item">About</router-link>
          <router-link to="faq" class="navbar-item r-item">FAQ</router-link>

          <div class="navbar-item">
            <p class="control">
              <a class="button is-primary is-outlined">
                <span class="icon">
                  <i class="fa fa-download"></i>
                </span>
                <span>Join Now</span>
              </a>
            </p>
          </div>

        </div>
      </div>
    </div>

navbar.sass

.navbar
  background-color: #383838
  a:hover
    color: gray

.navbar-brand a 
  color: #fff
  font-weight: bold

a.r-item
  color:#C1C1C1
  padding: 0.5rem 1.75rem
  +mobile
    color: gray
    &:hover
      background-color: #F1F1F1

.navbar-burger
  &:hover
    background-color: #F1F1F1
  span
    background-color: #C1C1C1