From 33dc5a5bc8303899926e1149d07f87c49f395fc5 Mon Sep 17 00:00:00 2001
From: Savvy <malcomeqgreen@gmail.com>
Date: Mon, 10 Jun 2019 17:15:47 -0400
Subject: [PATCH 1/4] Implemented hamburger menu

---
 components/Navbar.vue | 140 +++++++++++++++++++++++++++++++++++++-----
 1 file changed, 126 insertions(+), 14 deletions(-)

diff --git a/components/Navbar.vue b/components/Navbar.vue
index 35723b1..dfe5240 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -1,20 +1,31 @@
 <template lang="html">
-  <nav>
-    <ul>
-      <li
-        v-for="item in items"
-        :key="item.name"
-      >
+  <div class="navigation">
+    <nav>
+      <div class="nav-mobile">
         <a
-          :href="item.url"
-          target="_blank"
-          rel="noreferrer"
+          id="nav-toggle"
+          href="#"
+          @click="toggleNav"
         >
-          <InlineSvg :src="`icons/${item.name.toLowerCase()}.svg`" /> {{ item.name }}
+          <span />
         </a>
-      </li>
-    </ul>
-  </nav>
+      </div>
+      <ul class="nav-list">
+        <li
+          v-for="item in items"
+          :key="item.name"
+        >
+          <a
+            :href="item.url"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <InlineSvg :src="`icons/${item.name.toLowerCase()}.svg`" /> {{ item.name }}
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
 </template>
 
 <script>
@@ -42,6 +53,13 @@ export default {
       ],
     };
   },
+  methods: {
+    toggleNav(event) {
+      event.preventDefault();
+      event.currentTarget.classList.toggle('active');
+      this.$el.querySelector('.nav-list').classList.toggle('hide');
+    },
+  },
 };
 </script>
 
@@ -59,6 +77,97 @@ $desktop: (
   padding: 20px,
 );
 
+nav {
+  float: right;
+}
+
+.hide {
+  display: inline-block !important;
+  height: 100%;
+}
+
+.navigation {
+  background: $black;
+  height: map-get($mobile, height);
+}
+
+.nav-mobile {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: $black;
+  height: map-get($mobile, height);
+  width: map-get($mobile, height);
+}
+
+@media only screen and (max-width: 798px) {
+  // Hamburger nav visible on mobile only
+  nav {
+    width: 100%;
+    padding: map-get($mobile, height) 0 15px;
+  }
+
+  .nav-mobile {
+    display: block;
+  }
+  .nav-list {
+    width: 100%;
+    display: none;
+  }
+
+  .nav-list li {
+    width: 100%;
+    float: none;
+  }
+}
+
+@media screen and (min-width: 799px) {
+    .nav-list {
+    display: block !important;
+  }
+}
+
+  #nav-toggle {
+  position: absolute;
+  left: 18px;
+  top: 22px;
+  cursor: pointer;
+  padding: 10px 35px 16px 0px;
+  span,
+  span:before,
+  span:after {
+    cursor: pointer;
+    border-radius: 1px;
+    height: 5px;
+    width: 35px;
+    background: $yellow;
+    position: absolute;
+    display: block;
+    content: " ";
+    transition: all 300ms ease-in-out;
+  }
+  span:before {
+    top: -10px;
+  }
+  span:after {
+    bottom: -10px;
+  }
+  &.active span {
+    background-color: transparent;
+    &:before,
+    &:after {
+      top: 0;
+    }
+    &:before {
+      transform: rotate(45deg);
+    }
+    &:after {
+      transform: rotate(-45deg);
+      }
+    }
+  }
+
 ul {
   list-style-type: none;
   margin: 0;
@@ -77,9 +186,12 @@ ul {
     height: map-get($desktop, height);
   }
 
+  li {
+    float: left;
+  }
+
   li a {
     padding: 0 25px;
-
     display: flex;
     flex-direction: row;
     justify-content: center;

From 99c3a057f114ee776d610a4a16135a7d2930b96b Mon Sep 17 00:00:00 2001
From: Savvy <malcomeqgreen@gmail.com>
Date: Thu, 20 Jun 2019 12:57:45 -0400
Subject: [PATCH 2/4] Migrated from querySelector to refs

---
 components/Navbar.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/Navbar.vue b/components/Navbar.vue
index dfe5240..d2eb3f7 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -10,7 +10,10 @@
           <span />
         </a>
       </div>
-      <ul class="nav-list">
+      <ul
+        ref="navList"
+        class="nav-list"
+      >
         <li
           v-for="item in items"
           :key="item.name"
@@ -57,7 +60,7 @@ export default {
     toggleNav(event) {
       event.preventDefault();
       event.currentTarget.classList.toggle('active');
-      this.$el.querySelector('.nav-list').classList.toggle('hide');
+      this.$refs.navList.classList.toggle('hide');
     },
   },
 };
@@ -130,7 +133,7 @@ nav {
 
   #nav-toggle {
   position: absolute;
-  left: 18px;
+  left: 0;
   top: 22px;
   cursor: pointer;
   padding: 10px 35px 16px 0px;

From 3c4d7f52e197cfa0c532cfab63027732450d6990 Mon Sep 17 00:00:00 2001
From: Savvy <malcomeqgreen@gmail.com>
Date: Thu, 20 Jun 2019 13:31:12 -0400
Subject: [PATCH 3/4] Made consistency changes

---
 components/Navbar.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/Navbar.vue b/components/Navbar.vue
index d2eb3f7..0b6813e 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -104,8 +104,13 @@ nav {
   width: map-get($mobile, height);
 }
 
-@media only screen and (max-width: 798px) {
-  // Hamburger nav visible on mobile only
+@include mq($until: tablet, $media-type: screen) {
+  .nav-list {
+    display: block;
+  }
+}
+
+@include mq($until: tablet, $media-type: screen) {
   nav {
     width: 100%;
     padding: map-get($mobile, height) 0 15px;
@@ -125,11 +130,6 @@ nav {
   }
 }
 
-@media screen and (min-width: 799px) {
-    .nav-list {
-    display: block !important;
-  }
-}
 
   #nav-toggle {
   position: absolute;
@@ -148,7 +148,7 @@ nav {
     position: absolute;
     display: block;
     content: " ";
-    transition: all 300ms ease-in-out;
+    @include transition(all);
   }
   span:before {
     top: -10px;

From ef59c7f514e2c375a46b15594bb1d1f294d83190 Mon Sep 17 00:00:00 2001
From: SebastiaanYN <sebastiaanyn@gmail.com>
Date: Fri, 21 Jun 2019 18:55:35 +0200
Subject: [PATCH 4/4] Resolve linting errors

---
 components/Navbar.vue | 36 ++++++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/components/Navbar.vue b/components/Navbar.vue
index 8443f61..a8467da 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -119,6 +119,7 @@ nav {
   .nav-mobile {
     display: block;
   }
+
   .nav-list {
     width: 100%;
     display: none;
@@ -130,16 +131,18 @@ nav {
   }
 }
 
-
-  #nav-toggle {
+#nav-toggle {
   position: absolute;
   left: 0;
   top: 22px;
   cursor: pointer;
-  padding: 10px 35px 16px 0px;
+  padding: 10px 35px 16px 0;
+
   span,
-  span:before,
-  span:after {
+  span::before,
+  span::after {
+    @include transition(all);
+
     cursor: pointer;
     border-radius: 1px;
     height: 5px;
@@ -147,29 +150,34 @@ nav {
     background: $yellow;
     position: absolute;
     display: block;
-    content: " ";
-    @include transition(all);
+    content: ' ';
   }
-  span:before {
+
+  span::before {
     top: -10px;
   }
-  span:after {
+
+  span::after {
     bottom: -10px;
   }
+
   &.active span {
     background-color: transparent;
-    &:before,
-    &:after {
+
+    &::before,
+    &::after {
       top: 0;
     }
-    &:before {
+
+    &::before {
       transform: rotate(45deg);
     }
-    &:after {
+
+    &::after {
       transform: rotate(-45deg);
-      }
     }
   }
+}
 
 ul {
   // Transition background and text