Re implemented header navigation

src/App.vue

@@ -1,123 +1,151 @@
+<style lang="scss" scoped>
+@import "./src/scss/media-queries";
+#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;
+  }
+}
+
+.desktop-menu {
+  grid-column: 1 / 2;
+  grid-row: 2;
+  width: var(--header-size);
+  position: fixed;
+  top: var(--header-size);
+  left: 0;
+}
+</style>
+
 <template>
   <div id="app">
-
     <!-- Header and hamburger navigation -->
-    <navigation></navigation>
-
-    <!-- Header with search field -->
-
-    <!-- TODO move this to the navigation component -->
-    <header class="header">
-      <search-input v-model="query"></search-input>
-    </header>
-
-    <!-- Movie popup that will show above existing rendered content -->
-    <movie-popup v-if="moviePopupIsVisible" :id="popupID" :type="popupType"></movie-popup>
-
-
-    <darkmode-toggle />
+    <NavigationHeader class="header"></NavigationHeader>
+    <NavigationIcons class="desktop-menu desktop-only" />
 
     <!-- Display the component assigned to the given route (default: home) -->
     <router-view class="content" :key="$route.fullPath"></router-view>
 
+    <!-- Movie popup that will show above existing rendered content -->
+    <movie-popup
+      v-if="moviePopupIsVisible"
+      :id="popupID"
+      :type="popupType"
+    ></movie-popup>
+
+    <darkmode-toggle />
   </div>
 </template>
 
 <script>
-import Vue from 'vue'
-import Navigation from '@/components/Navigation'
-import MoviePopup from '@/components/MoviePopup'
-import SearchInput from '@/components/SearchInput'
-import DarkmodeToggle from '@/components/ui/darkmodeToggle'
+import Vue from "vue";
+import NavigationHeader from "@/components/NavigationHeader";
+import NavigationIcons from "@/components/NavigationIcons";
+import MoviePopup from "@/components/MoviePopup";
+import DarkmodeToggle from "@/components/ui/darkmodeToggle";
 
 export default {
-  name: 'app',
+  name: "app",
   components: {
-    Navigation,
+    NavigationHeader,
+    NavigationIcons,
     MoviePopup,
-    SearchInput,
     DarkmodeToggle
   },
   data() {
     return {
-      query: '',
+      query: "",
       moviePopupIsVisible: false,
       popupID: 0,
-      popupType: 'movie'
-    }
+      popupType: "movie"
+    };
   },
-  created(){
-    let that = this
+  created() {
+    let that = this;
     Vue.prototype.$popup = {
       get isOpen() {
-        return that.moviePopupIsVisible
+        return that.moviePopupIsVisible;
       },
       open: (id, type) => {
-        this.popupID = id || this.popupID
-        this.popupType = type || this.popupType
-        this.moviePopupIsVisible = true
-        console.log('opened')
+        this.popupID = id || this.popupID;
+        this.popupType = type || this.popupType;
+        this.moviePopupIsVisible = true;
+        console.log("opened");
       },
       close: () => {
-        this.moviePopupIsVisible = false
-        console.log('closed')
+        this.moviePopupIsVisible = false;
+        console.log("closed");
       }
-    }
-    console.log('MoviePopup registered at this.$popup and has state: ', this.$popup.isOpen)
-  }
-}
-</script>
+    };
 
-<style lang="scss" scoped>
-@import "./src/scss/media-queries";
-@import "./src/scss/variables";
-.content {
-    @include tablet-min{
-    width: calc(100% - 95px);
-    margin-top: $header-size;
-    margin-left: 95px;
-    position: relative;
+    const movieId = new URLSearchParams(window.location.search).get("movie");
+    if (movieId) {
+      this.$popup.open(movieId, "movie");
+    }
   }
-}
-</style>
+};
+</script>
 
 <style lang="scss">
 // @import "./src/scss/main";
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
 
-*{
+* {
   box-sizing: border-box;
 }
 html {
   height: 100%;
 }
-body{
+body {
   margin: 0;
   padding: 0;
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   line-height: 1.6;
   background: $background-color;
   color: $text-color;
-  transition: background-color .5s ease, color .5s ease;
-  &.hidden{
+  transition: background-color 0.5s ease, color 0.5s ease;
+
+  * {
+    transition: background-color 0.5s ease, color 0.5s ease;
+  }
+
+  &.hidden {
     overflow: hidden;
   }
 }
-h1,h2,h3 {
-  transition: color .5s ease;
-}
 a:any-link {
   color: inherit;
 }
-input, textarea, button{
-  font-family: 'Roboto', sans-serif;
+input,
+textarea,
+button {
+  font-family: "Roboto", sans-serif;
 }
-figure{
+figure {
   padding: 0;
   margin: 0;
 }
-img{
+img {
   display: block;
   // max-width: 100%;
   height: auto;
@@ -127,33 +155,35 @@ img{
   overflow: hidden;
 }
 
-.wrapper{
+.wrapper {
   position: relative;
 }
-.header{
-  position: fixed;
-  z-index: 15;
-  display: flex;
-  flex-direction: column;
+// .header {
+//   position: fixed;
+//   z-index: 15;
+//   display: flex;
+//   flex-direction: column;
 
-  @include tablet-min{
-    width: calc(100% - 170px);
-    margin-left: 95px;
-    border-top: 0;
-    border-bottom: 0;
-    top: 0;
-  }
-}
+//   @include tablet-min {
+//     width: calc(100% - 170px);
+//     margin-left: 95px;
+//     border-top: 0;
+//     border-bottom: 0;
+//     top: 0;
+//   }
+// }
 
 // router view transition
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition-property: opacity;
   transition-duration: 0.25s;
 }
 .fade-enter-active {
   transition-delay: 0.25s;
 }
-.fade-enter, .fade-leave-active {
-  opacity: 0
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
 }
 </style>