I believe that mobile is working

Patchrik · Mar 20, 2021 · 6c7d841 · 6c7d841
1 parent adbba94
commit 6c7d841
Showing 1 changed file with 13 additions and 8 deletions.
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar v-if="!isMobile" app color="primary" dark>
+  <v-app-bar v-if="mobile" app color="primary" dark>
     <v-app-bar-title>Where To Vue</v-app-bar-title>
     <v-spacer></v-spacer>
     <form @submit.prevent="handleSubmit">
@@ -25,7 +25,7 @@
         placeholder="Where To Vue"
         background-color="indigo darken-2"
         prepend-inner-icon="mdi-magnify"
-        class="mt-6 ml-15"
+        class="mt-6"
       ></v-text-field>
     </form>
   </v-app-bar>
@@ -38,6 +38,7 @@
     data() {
       return {
         query: "",
+        mobile: false,
       };
     },
     methods: {
@@ -46,17 +47,21 @@
       handleSubmit() {
         this.searchMovies(this.query);
       },
-    },
-    computed: {
-      isMobile() {
+      NotMobile() {
         let screenWidth = screen.width;
-        if (screenWidth < 600) {
-          return true;
+        console.log(screenWidth);
+        if (+screenWidth < 600) {
+          console.log("this should return true you're NOT on mobile");
+          this.mobile = false;
         } else {
-          return false;
+          console.log("this should return false you're on mobile");
+          this.mobile = true;
         }
       },
     },
+    mounted() {
+      this.NotMobile();
+    },
   };
 </script>