Still need to work on the dom, but the styling has been updated to be better for mobile, use variables for constant values and scoped it.

src/components/Navigation.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <nav class="nav">
       <router-link class="nav__logo" :to="{name: 'home'}" exact title="Vue.js — TMDb App">
         <svg class="nav__logo-image">
@@ -11,25 +12,18 @@
         <div class="bar"></div>
       </div>
       <ul class="nav__list">
-      <li class="nav__item" v-for="item in listTypes" v-if="item.isCategory">
-        <router-link class="nav__link" :to="{name: item.name, params: {mode: item.type, category: item.query}}">
+        <li class="nav__item" v-for="item in listTypes">
+          <router-link class="nav__link" :to="'/list/' + item.route">
             <div class="nav__link-wrap">
+              <!-- <img :src="item.icon" class="nav__link-icon"> -->
               <svg class="nav__link-icon">
-              <use :xlink:href="'#icon_' + item.query"></use>
+                <use :xlink:href="'#icon_' + item.route"></use>
               </svg>
-            <span class="nav__link-title">{{ item.shortTitle }}</span>
+              <span class="nav__link-title">{{ item.title }}</span>
             </div>
           </router-link>
         </li>
         <li class="nav__item nav__item--profile">
-<!--         <div  class="nav__link nav__link--profile"  @click="requestToken" v-if="!userLoggedIn">
-          <div class="nav__link-wrap">
-            <svg class="nav__link-icon">
-              <use xlink:href="#iconLogin"></use>
-            </svg>
-            <span class="nav__link-title">Log In</span>
-          </div>
-        </div> -->
            <router-link  class="nav__link nav__link--profile" :to="{name: 'signin'}" v-if="!userLoggedIn">
             <div class="nav__link-wrap">
               <svg class="nav__link-icon">
@@ -49,6 +43,8 @@
         </li>
       </ul>
     </nav>
+    <div class="spacer"></div>
+  </div>
 </template>
 
 <script>
@@ -57,7 +53,7 @@ import storage from '../storage.js'
 export default {
   data(){
     return {
-      listTypes: storage.listTypes,
+      listTypes: storage.homepageLists,
       userLoggedIn: localStorage.getItem('token') ? true : false
     }
   },
@@ -65,9 +61,6 @@ export default {
     setUserStatus(){
       this.userLoggedIn = localStorage.getItem('token') ? true : false;
     },
-    requestToken(){
-      eventHub.$emit('requestToken');
-    },
     toggleNav(){
       document.querySelector('.nav__hamburger').classList.toggle('nav__hamburger--active');
       document.querySelector('.nav__list').classList.toggle('nav__list--active');
@@ -79,34 +72,40 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
-.nav{
+.spacer {
+  @include mobile-only {
+    width: 100%;
+    height: $header-size-mobile;
+  }
+}
+.nav {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 50px;
   background: $c-white;
-  display: flex;
   z-index: 10;
-  @include tablet-min{
   display: block;
+
+
+  @include tablet-min{
     width: 95px;
     height: 100vh;
   }
   &__logo{
-    display: block;
     width: 55px;
-    height: 50px;
+    height: $header-size-mobile;
     display: flex;
     align-items: center;
     justify-content: center;
     background: $c-dark;
     @include tablet-min{
       width: 95px;
-      height: 75px;
+      height: $header-size;
     }
     &-image{
       width: 35px;
@@ -231,8 +230,8 @@ export default {
         position: fixed;
         right: 0;
         top: 0;
-        width: 75px;
-        height: 75px;
+        width: $header-size;
+        height: $header-size;
         border-bottom: 0;
         border-left: 1px solid $c-light;
       }
@@ -253,6 +252,12 @@ export default {
     transition: color 0.5s ease, background 0.5s ease;
     position: relative;
     cursor: pointer;
+    &-wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
     @include mobile-only{
       font-size: 10px;
       padding: 20px 0;
@@ -270,7 +275,6 @@ export default {
     &-icon{
       width: 20px;
       height: 20px;
-      margin-bottom: 3px;
       fill: rgba($c-dark, 0.7);
       transition: fill 0.5s ease;
       @include tablet-min{
@@ -278,8 +282,10 @@ export default {
         height: 20px;
         margin-bottom: 5px;
       }
+
     }
     &-title{
+      margin-top: 5px;
       display: block;
       width: 100%;
     }