NavBar.vue

<template>
  <div class="nav-bar-section">
    <v-app-bar
      id="app-bar"
      app
      dark
      height="102"
      :class="{
        'hide-nav-toolbar': showBurgerIcon,
        'search-expanded': isSearchExpanded,
      }"
    >
      <v-toolbar-title>
        <router-link to="/" class="d-flex" data-cy="nav-logo">
          <YodaLogo data-cy="v-img" id="p1-nav-logo" class="my-auto" />
        </router-link>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items>
        <div class="navbar-nav my-auto pr-10">
          <router-link class="nav-item" to="/" exact> Home </router-link>
          <v-menu open-on-hover bottom offset-y>
            <template v-slot:activator="{ on, attrs }">
              <span class="pt-1" v-bind="attrs" v-on="on">
                <router-link class="nav-item d-inline" to="/services">
                  Services
                  <v-icon class="navbar-chevron-icon">mdi-chevron-down</v-icon>
                </router-link>
              </span>
            </template>
            <v-list class="navbar-nav-list">
              <v-list-item
                v-for="(item, index) in servicesSubMenu"
                :key="index"
                :to="item.path"
                link
              >
                <v-list-item-title class="navbar-list-items">
                  {{ item.meta.breadcrumb }}
                </v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
          <router-link class="nav-item" to="/resellers">
            Resellers
          </router-link>
          <router-link class="nav-item" to="/resources">
            Resources
          </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>
        </div>
      </v-toolbar-items>

      <Search
        @expanded="
          isSearchExpanded = true;
          menuVisible = false;
        "
        @collapsed="isSearchExpanded = false"
        :full-width="showBurgerIcon"
      />

      <v-app-bar-nav-icon
        id="nav-toggle"
        @click.stop="menuVisible = !menuVisible"
        class="mr-0"
        v-show="showBurgerIcon"
      >
        <div class="burger burger-squeeze" :class="{ open: menuVisible }">
          <div class="burger-lines"></div>
        </div>
      </v-app-bar-nav-icon>
    </v-app-bar>

    <v-navigation-drawer
      v-model="menuVisible"
      :permanent="menuVisible"
      fixed
      disable-resize-watcher
      right
      bottom
      stateless
      temporary
      hide-overlay
      dark
      id="nav-drawer"
    >
      <div class="navbar-nav my-auto d-flex flex-column px-5">
        <router-link
          class="nav-item"
          to="/"
          exact
          @click.native="menuVisible = false"
        >
          Home
        </router-link>
        <v-divider class="my-2" />

        <router-link
          class="nav-item"
          to="/services"
          @click.native="menuVisible = false"
        >
          Services
        </router-link>

        <router-link
          v-for="item in servicesSubMenu"
          :key="item.path"
          :to="item.path"
          @click.native="menuVisible = false"
          class="nav-item-mobile"
        >
          {{ item.meta.breadcrumb }}
        </router-link>

        <v-divider class="mt-6 mb-2" />

        <router-link
          class="nav-item"
          to="/resellers"
          @click.native="menuVisible = false"
        >
          RESELLERS
        </router-link>

        <v-divider class="my-2" />

        <router-link
          class="nav-item"
          to="/resources"
          @click.native="menuVisible = false"
        >
          Resources
        </router-link>

        <v-divider class="my-2" />
        <router-link
          class="nav-item"
          to="/who-we-are"
          @click.native="menuVisible = false"
        >
          Who We Are
        </router-link>

        <v-divider class="my-2" />

        <router-link
          class="nav-item"
          to="/contact-us"
          @click.native="menuVisible = false"
        >
          Contact Us
        </router-link>

        <v-divider class="mt-2 mb-4" />
      </div>
    </v-navigation-drawer>
  </div>
</template>
<script>
import YodaLogo from "@/assets/images/logos/Logo_P1_Yoda_Campfire-WH.svg";
import Search from "@/components/Search.vue";
import { routesByName } from "@/router/routes";

export default {
  name: "NavBar",
  components: {
    Search,
    YodaLogo,
  },

  data: () => ({
    menuVisible: false,
    servicesSubMenu: [
      routesByName.IronBank,
      routesByName.PartyBus,
      routesByName.BigBang,
      routesByName.CNAP,
      routesByName.Cybersecurity,
    ],
    navigationDrawerBreakPoint: 1150,
    showBurgerIcon: false,
    isSearchExpanded: false,
  }),
  beforeDestroy() {
    if (typeof window === "undefined") return;

    window.removeEventListener("resize", this.onResize, { passive: true });
  },

  mounted() {
    this.onResize();

    window.addEventListener("resize", this.onResize, { passive: true });
  },
  methods: {
    onResize() {
      this.showBurgerIcon = window.innerWidth < this.navigationDrawerBreakPoint;
    },
  },
  watch: {
    "$vuetify.breakpoint.width": function (value) {
      if (value >= this.navigationDrawerBreakPoint) {
        this.menuVisible = false;
      }
    },
  },
};
</script>
<style lang="scss">
#nav-drawer {
  margin-top: 102px;
  z-index: 9;
}
.v-navigation-drawer__content {
  background-color: $dark-bg-color !important;
}

.navbar-nav-list {
  background-color: $dark-bg-color !important;
}

.navbar-list-items {
  color: #ffffff;

  &:hover {
    color: $p1-dark-green !important;
  }
}

a.nav-item {
  color: #ffffff !important;
  text-transform: uppercase;
  &:hover,
  &:active {
    color: #bdc931 !important;
    i.navbar-chevron-icon:not(.no-link) {
      color: #bdc931 !important;
    }
  }

  i.navbar-chevron-icon:not(.no-link) {
    padding: 0 0 4px 0;
    color: #ffffff !important;
  }
}

a.nav-item.router-link-active {
  color: #bdc931 !important;

  i.navbar-chevron-icon:not(.no-link) {
    padding: 0 0 4px 0;
    color: #bdc931 !important;
  }
}

.navbar-nav {
  font-weight: 600;

  .nav-item {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
    padding: 0.5rem;
    margin: 0 0.5rem;
    color: $light-text-color !important;
    letter-spacing: 0.02rem;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;

    &:hover {
      color: $p1-dark-green !important;
    }
  }
  .router-link-active {
    border-bottom: 2px solid $p1-light-green;
    color: $p1-light-green !important;
  }
}
// Mobile-view styling
.nav-item-mobile {
  padding: 0;
  margin: 0;
  font-size: 0.75rem !important;
  color: $light-text-color !important;
  letter-spacing: 0.04rem;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  &:hover {
    color: $p1-dark-green !important;
  }
}

#app-bar .navbar-nav .nav-item:last-child {
  margin-right: 0;
}

#app-bar {
  background-color: $dark-bg-color !important;
  padding-left: 1rem;
  padding-right: 1rem;
  z-index: 10;

  &.search-expanded {
    .nav-item {
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
    }
  }

  &.hide-nav-toolbar {
    .navbar-nav {
      display: none;
    }
    &.search-expanded {
      #p1-nav-logo,
      #nav-toggle {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
      }
    }
  }

  #p1-nav-logo {
    width: 245px;
    min-width: 245px;
  }

  #nav-toggle {
    box-shadow: none;
  }

  @include xs {
    #p1-nav-logo {
      width: 180px;
      min-width: 180px;
    }
  }

  @include lg {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  @include xl {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  // burger css from https://github.com/march08/animated-burgers/blob/master/packages/BurgerSqueeze/dist/styles.css
  .burger {
    font-size: 10px;
    height: 3em;
    width: 3em;
    position: relative;
    cursor: pointer;
    -webkit-transition: 0.2s all;
    -o-transition: 0.2s all;
    transition: 0.2s all;
    -webkit-tap-highlight-color: transparent;
  }
  .burger .burger-lines:after {
    left: 0;
    top: -1em;
  }
  .burger .burger-lines:before {
    left: 1em;
    top: 1em;
  }
  .burger:after {
    content: "";
    display: block;
    position: absolute;
    height: 150%;
    width: 150%;
    top: -25%;
    left: -25%;
  }
  .burger .burger-lines {
    top: 50%;
    margin-top: -0.125em;
  }
  .burger .burger-lines,
  .burger .burger-lines:after,
  .burger .burger-lines:before {
    pointer-events: none;
    display: block;
    content: "";
    width: 100%;
    border-radius: 0.25em;
    background-color: white;
    height: 0.25em;
    position: absolute;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  .burger .burger-lines:after {
    left: 0;
    top: -1em;
  }
  .burger .burger-lines:before {
    left: 1em;
    top: 1em;
  }
  .burger.burger-squeeze .burger-lines,
  .burger.burger-squeeze .burger-lines:after,
  .burger.burger-squeeze .burger-lines:before {
    -webkit-transition: 0.2s top 0.2s, 0.1s left, 0.2s transform,
      0.4s background-color 0.2s;
    -o-transition: 0.2s top 0.2s, 0.1s left, 0.2s transform,
      0.4s background-color 0.2s;
    transition: 0.2s top 0.2s, 0.1s left, 0.2s transform,
      0.4s background-color 0.2s;
  }

  .burger.burger-squeeze .burger-lines:after,
  .burger.burger-squeeze .burger-lines:before {
    width: 2em;
  }

  .burger.burger-squeeze.open .burger-lines,
  .burger.burger-squeeze.open .burger-lines:after,
  .burger.burger-squeeze.open .burger-lines:before {
    -webkit-transition: 0.2s background-color, 0.2s top, 0.2s left,
      0.2s transform 0.15s;
    -o-transition: 0.2s background-color, 0.2s top, 0.2s left,
      0.2s transform 0.15s;
    transition: 0.2s background-color, 0.2s top, 0.2s left, 0.2s transform 0.15s;
  }

  .burger.burger-squeeze.open .burger-lines {
    background-color: transparent;
  }

  .burger.burger-squeeze.open .burger-lines:before,
  .burger.burger-squeeze.open .burger-lines:after {
    left: 0.5em;
    top: 0px;
  }

  .burger.burger-squeeze.open .burger-lines:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .burger.burger-squeeze.open .burger-lines:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
</style>