Updated app & header grid layout

src/App.vue

@@ -2,7 +2,10 @@
   <div id="app">
     <!-- Header and hamburger navigation -->
     <NavigationHeader class="header"></NavigationHeader>
-    <NavigationIcons class="desktop-menu desktop-only" />
+
+    <div class="navigation-icons-gutter desktop-only">
+      <NavigationIcons />
+    </div>
 
     <!-- Display the component assigned to the given route (default: home) -->
     <router-view class="content" :key="$route.fullPath"></router-view>
@@ -37,36 +40,38 @@ export default {
 
 #app {
   display: grid;
-  // grid-template-columns: 90px 1fr 90px;
   grid-template-rows: var(--header-size);
   grid-template-columns: var(--header-size) 1fr;
-}
-
-.header {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  grid-column: 1 / 3;
-  grid-row: 1;
-  z-index: 15;
-}
-
-.content {
-  grid-column: 2 / 3;
-  grid-row: 2;
-  z-index: 5;
 
   @include mobile {
-    grid-column: 1 / 3;
+    grid-template-columns: 1fr;
+  }
+
+  .header {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 15;
+  }
+
+  .navigation-icons-gutter {
+    position: fixed;
+    height: 100vh;
+    margin: 0;
+    top: var(--header-size);
+    width: var(--header-size);
+    background-color: var(--background-color-secondary);
+  }
+
+  .content {
+    display: grid;
+    grid-column: 2 / 3;
+    grid-row: 2;
+    z-index: 5;
+
+    @include mobile {
+      grid-column: 1 / 3;
+    }
   }
 }
-
-.desktop-menu {
-  grid-column: 1 / 2;
-  grid-row: 2;
-  width: var(--header-size);
-  position: fixed;
-  top: var(--header-size);
-  left: 0;
-}
 </style>

src/components/MoviePopup.vue

@@ -11,7 +11,7 @@
 
 <script>
 import { mapActions, mapGetters } from "vuex";
-import Movie from "./Movie";
+import Movie from "./movie/Movie";
 import Person from "./Person";
 
 export default {

src/components/NavigationHeader.vue

@@ -9,11 +9,11 @@
 
     <SearchInput />
 
-    <Hamburger />
+    <Hamburger class="mobile-only" />
 
     <NavigationIcon class="desktop-only" :route="profileRoute" />
 
-    <div class="nav__list mobile-only" :class="{ open: isOpen }">
+    <div class="navigation-icons-grid mobile-only" :class="{ open: isOpen }">
       <NavigationIcons>
         <NavigationIcon :route="profileRoute" />
       </NavigationIcons>
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import storage from "@/storage";
+import { mapGetters, mapActions } from "vuex";
 import TmdbLogo from "../icons/tmdb-logo";
 import IconProfile from "../icons/IconProfile";
 import IconProfileLock from "../icons/IconProfileLock";
@@ -32,7 +32,6 @@ import SearchInput from "@/components/SearchInput";
 import NavigationIcons from "src/components/NavigationIcons";
 import NavigationIcon from "src/components/ui/NavigationIcon";
 import Hamburger from "@/components/ui/Hamburger";
-import { mapGetters, mapActions } from "vuex";
 
 export default {
   components: {
@@ -46,11 +45,6 @@ export default {
     IconActivity,
     Hamburger
   },
-  data() {
-    return {
-      listTypes: storage.homepageLists
-    };
-  },
   computed: {
     ...mapGetters("user", ["loggedIn"]),
     ...mapGetters("hamburger", ["isOpen"]),
@@ -112,7 +106,7 @@ nav {
   }
 }
 
-.nav__list {
+.navigation-icons-grid {
   display: flex;
   flex-wrap: wrap;
   position: fixed;

src/components/NavigationIcons.vue

@@ -32,44 +32,25 @@ export default {
   },
   data() {
     return {
-      routes: [],
+      routes: [
-      activeRoute: null
-    };
-  },
-  watch: {
-    $route() {
-      this.activeRoute = window.location.pathname;
-    }
-  },
-  created() {
-    this.activeRoute = window.location.pathname;
-    this.routes = this.getAvailableRoutes();
-  },
-  methods: {
-    getAvailableRoutes() {
-      return [
         {
           title: "Requests",
           route: "/list/requests",
-          apiPath: "/v2/requests",
           icon: IconInbox
         },
         {
           title: "Now Playing",
           route: "/list/now_playing",
-          apiPath: "/v2/movie/now_playing",
           icon: IconNowPlaying
         },
         {
           title: "Popular",
           route: "/list/popular",
-          apiPath: "/v2/movie/popular",
           icon: IconPopular
         },
         {
           title: "Upcoming",
           route: "/list/upcoming",
-          apiPath: "/v2/movie/upcoming",
           icon: IconUpcoming
         },
         {
@@ -84,8 +65,17 @@ export default {
           requiresAuth: true,
           icon: IconSettings
         }
-      ];
+      ],
+      activeRoute: null
+    };
+  },
+  watch: {
+    $route() {
+      this.activeRoute = window.location.pathname;
     }
+  },
+  created() {
+    this.activeRoute = window.location.pathname;
   }
 };
 </script>
@@ -94,17 +84,20 @@ export default {
 @import "src/scss/media-queries";
 
 .navigation-icons {
-  display: inline-flex;
+  display: grid;
-  flex-direction: column;
+  grid-column: 1fr;
-  margin: 0;
   padding-left: 0;
-  height: 100%;
+  margin: 0;
   background-color: var(--background-color-secondary);
   z-index: 15;
+  width: 100%;
+
+  @include desktop {
+    grid-template-rows: var(--header-size);
+  }
 
   @include mobile {
-    flex-wrap: wrap;
+    grid-template-columns: 1fr 1fr;
-    flex-direction: row;
   }
 }
 </style>

src/components/Person.vue

@@ -54,7 +54,7 @@
         :detail="`Credited in ${movieCredits.length} movies`"
         v-if="credits"
       >
-        <Cast :cast="movieCredits" />
+        <CastList :cast="movieCredits" />
       </MovieDetail>
 
       <MovieDetail
@@ -62,7 +62,7 @@
         :detail="`Credited in ${showCredits.length} shows`"
         v-if="credits"
       >
-        <Cast :cast="showCredits" />
+        <CastList :cast="showCredits" />
       </MovieDetail>
     </div>
   </section>
@@ -70,10 +70,10 @@
 
 <script>
 import img from "@/directives/v-image";
-import Cast from "./Cast";
+import CastList from "@/components/CastList";
-import MovieDetail from "./ui/MovieDetail";
+import MovieDetail from "@/components/movie/Detail";
-import MovieDescription from "./ui/MovieDescription";
+import MovieDescription from "@/components/movie/Description";
-import LoadingPlaceholder from "./ui/LoadingPlaceholder";
+import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder";
 
 import { getPerson, getPersonCredits } from "@/api";
 
@@ -92,7 +92,7 @@ export default {
   components: {
     MovieDetail,
     MovieDescription,
-    Cast,
+    CastList,
     LoadingPlaceholder
   },
   directives: { img: img }, // TODO decide to remove or use

src/components/ResultsList.vue

@@ -67,6 +67,7 @@ export default {
   &.shortList {
     overflow: auto;
     grid-auto-flow: column;
+    max-width: 100vw;
 
     @include noscrollbar;
 

src/components/ui/NavigationIcon.vue

@@ -2,9 +2,7 @@
   <router-link
     :to="{ path: route.route }"
     :key="route.title"
-    v-if="
+    v-if="route.requiresAuth == undefined || (route.requiresAuth && loggedIn)"
-      route.requiresAuth == undefined || (route.requiresAuth && userLoggedIn)
-    "
   >
     <li class="navigation-link" :class="{ active: route.route == active }">
       <component class="navigation-icon" :is="route.icon"></component>
@@ -14,6 +12,8 @@
 </template>
 
 <script>
+import { mapGetters, mapActions } from "vuex";
+
 export default {
   name: "NavigationIcons",
   props: {
@@ -27,9 +27,7 @@ export default {
     }
   },
   computed: {
-    userLoggedIn() {
+    ...mapGetters("user", ["loggedIn"])
-      return localStorage.getItem("token") ? true : false;
-    }
   }
 };
 </script>
@@ -40,21 +38,14 @@ export default {
 .navigation-link {
   display: grid;
   place-items: center;
-  height: var(--header-size);
+  min-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);
   }

src/routes.js

@@ -8,51 +8,51 @@ let routes = [
   {
     name: "home",
     path: "/",
-    component: resolve => require(["./components/Home.vue"], resolve)
+    component: resolve => require(["./pages/Home.vue"], resolve)
   },
   {
     name: "activity",
     path: "/activity",
     meta: { requiresAuth: true },
-    component: resolve => require(["./components/ActivityPage.vue"], resolve)
+    component: resolve => require(["./pages/ActivityPage.vue"], resolve)
   },
   {
     name: "profile",
     path: "/profile",
     meta: { requiresAuth: true },
-    component: resolve => require(["./components/Profile.vue"], resolve)
+    component: resolve => require(["./pages/Profile.vue"], resolve)
   },
   {
     name: "list",
     path: "/list/requests",
-    component: resolve => require(["./components/RequestPage.vue"], resolve)
+    component: resolve => require(["./pages/RequestPage.vue"], resolve)
   },
   {
     name: "list",
     path: "/list/:name",
-    component: resolve => require(["./components/ListPage.vue"], resolve)
+    component: resolve => require(["./pages/ListPage.vue"], resolve)
   },
   {
     name: "search",
     path: "/search",
-    component: resolve => require(["./components/SearchPage.vue"], resolve)
+    component: resolve => require(["./pages/SearchPage.vue"], resolve)
   },
   {
     name: "register",
     path: "/register",
-    component: resolve => require(["./components/Register.vue"], resolve)
+    component: resolve => require(["./pages/Register.vue"], resolve)
   },
   {
     name: "settings",
     path: "/settings",
     meta: { requiresAuth: true },
-    component: resolve => require(["./components/Settings.vue"], resolve)
+    component: resolve => require(["./pages/Settings.vue"], resolve)
   },
   {
     name: "signin",
     path: "/signin",
     alias: "/login",
-    component: resolve => require(["./components/Signin.vue"], resolve)
+    component: resolve => require(["./pages/Signin.vue"], resolve)
   },
   // {
   //   name: 'user-requests',
@@ -64,7 +64,7 @@ let routes = [
   {
     name: "404",
     path: "/404",
-    component: resolve => require(["./components/404.vue"], resolve)
+    component: resolve => require(["./pages/404.vue"], resolve)
   },
   {
     path: "*",