Split navigation icons/header into more components, fixed svg transition

Split more out into `Hamburger` & `NavigationIcon` components.

src/components/ui/Hamburger.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="nav__hamburger"
+    :class="{ open }"
+    @click="toggleNav"
+    @keydown.enter="toggleNav"
+    tabindex="0"
+  >
+    <div v-for="_ in 3" class="bar"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      open: false
+    };
+  },
+  methods: {
+    toggleNav() {
+      this.open = !this.open;
+      this.$emit("click", this.open);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/media-queries";
+
+.nav__hamburger {
+  display: block;
+  position: relative;
+  width: var(--header-size);
+  height: var(--header-size);
+  cursor: pointer;
+  border-left: 1px solid var(--background-color);
+  background-color: var(--background-color-secondary);
+
+  @include tablet-min {
+    display: none;
+  }
+
+  .bar {
+    position: absolute;
+    width: 23px;
+    height: 1px;
+    background-color: var(--text-color-70);
+    transition: all 300ms ease;
+    &:nth-child(1) {
+      left: 16px;
+      top: 17px;
+    }
+    &:nth-child(2) {
+      left: 16px;
+      top: 25px;
+      &:after {
+        content: "";
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 23px;
+        height: 1px;
+        transition: all 300ms ease;
+      }
+    }
+    &:nth-child(3) {
+      right: 15px;
+      top: 33px;
+    }
+  }
+  &.open {
+    .bar {
+      &:nth-child(1),
+      &:nth-child(3) {
+        width: 0;
+      }
+      &:nth-child(2) {
+        transform: rotate(-45deg);
+      }
+      &:nth-child(2):after {
+        transform: rotate(-90deg);
+        // background: rgba($c-dark, 0.5);
+        background-color: var(--text-color-70);
+      }
+    }
+  }
+}
+</style>

src/components/ui/NavigationIcon.vue

@@ -0,0 +1,90 @@
+<template>
+  <router-link
+    :to="{ path: route.route }"
+    :key="route.title"
+    v-if="
+      route.requiresAuth == undefined || (route.requiresAuth && userLoggedIn)
+    "
+  >
+    <li class="navigation-link" :class="{ active: route.route == active }">
+      <component class="navigation-icon" :is="route.icon"></component>
+      <span>{{ route.title }}</span>
+    </li>
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: "NavigationIcons",
+  props: {
+    active: {
+      type: String,
+      required: false
+    },
+    route: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    userLoggedIn() {
+      return localStorage.getItem("token") ? true : false;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/media-queries";
+
+.navigation-link {
+  display: grid;
+  place-items: center;
+  height: var(--header-size);
+  list-style: none;
+  padding: 1rem 0.15rem;
+  margin: 0;
+  text-align: center;
+  background-color: var(--background-color-secondary);
+  transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
+    fill 0.3s ease, background-color 0.5s ease;
+
+  @include mobile {
+    height: 90px;
+    padding: 1rem;
+    width: 50vw;
+  }
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  &:hover,
+  &.active {
+    background-color: var(--background-color);
+
+    span,
+    .navigation-icon {
+      color: var(--text-color);
+      stroke: var(--text-color);
+      stroke-width: 2px;
+    }
+  }
+
+  span {
+    text-transform: uppercase;
+    font-size: 11px;
+    color: var(--text-color-70);
+  }
+}
+
+a {
+  text-decoration: none;
+}
+
+.navigation-icon {
+  width: 28px;
+  stroke: var(--text-color-70);
+  transition: inherit;
+}
+</style>