From e86f956b0358fd612fee499e312d5fb6d594ff4b Mon Sep 17 00:00:00 2001
From: Adrian Thompson <adrianthompson@Adrians-MacBook-Pro-465507.local>
Date: Tue, 1 Sep 2020 14:04:41 +0200
Subject: [PATCH] add mobile-banner component and conditional render on
 window-width

---
 src/Vinlottis.vue       |  16 ++++--
 src/ui/Banner.vue       |  16 ------
 src/ui/MobileBanner.vue | 108 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 121 insertions(+), 19 deletions(-)
 create mode 100644 src/ui/MobileBanner.vue

diff --git a/src/Vinlottis.vue b/src/Vinlottis.vue
index 23eb18e..af8aea7 100644
--- a/src/Vinlottis.vue
+++ b/src/Vinlottis.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="app-container">
-    <banner />
+    <banner v-if="!mobileView"/>
+    <MobileBanner v-if="mobileView" />
     <router-view />
     <UpdateToast
       v-if="showToast"
@@ -15,18 +16,23 @@
 import ServiceWorkerMixin from "@/mixins/ServiceWorkerMixin";
 import banner from "@/ui/Banner";
 import UpdateToast from "@/ui/UpdateToast";
+import MobileBanner from "@/ui/MobileBanner";
 
 export default {
   name: "vinlottis",
-  components: { banner, UpdateToast },
+  components: { banner, UpdateToast, MobileBanner },
   props: {},
   data() {
     return {
       showToast: false,
       toastText: null,
-      refreshToast: false
+      refreshToast: false,
+      mobileView: false
     };
   },
+  beforeMount(){
+    this.handleView()
+  },
   mounted() {
     console.log("SNEAKY PETE!");
     this.$on("service-worker-updated", () => {
@@ -45,6 +51,10 @@ export default {
   methods: {
     closeToast: function() {
       this.showToast = false;
+    },
+    handleView(){
+      console.log(window.innerWidth <= 768)
+      this.mobileView = window.innerWidth <= 768;
     }
   }
 };
diff --git a/src/ui/Banner.vue b/src/ui/Banner.vue
index 44e5f8f..f771be3 100644
--- a/src/ui/Banner.vue
+++ b/src/ui/Banner.vue
@@ -174,22 +174,6 @@ export default {
   .__routes{
     text-decoration: none;
     color: #333333;
-
-    @include mobile {
-      display: none;
-    }
-  }
-
-  @include mobile {
-    padding: 0px 40px;
-
-    > img {
-      height: 23px;
-    }
-
-    // .__routes{
-    //   display: none;
-    // }
   }
 }
 
diff --git a/src/ui/MobileBanner.vue b/src/ui/MobileBanner.vue
new file mode 100644
index 0000000..f275dcc
--- /dev/null
+++ b/src/ui/MobileBanner.vue
@@ -0,0 +1,108 @@
+<template>
+  <main>
+    <div class="top-banner">
+      <span class="burger-menu" @click="toggleShowMenu">
+        <svg viewBox="0 0 100 80" width="40" height="40">
+          <rect width="100" height="14"></rect>
+          <rect y="30" width="100" height="14"></rect>
+          <rect y="60" width="100" height="14"></rect>
+        </svg>
+      </span>
+      <router-link to="/" class="link">
+        <img src="/public/assets/images/knowit.svg" alt="knowit logo" />
+      </router-link>
+    </div>
+    <section v-if="toggleMenu" class="route-container">
+        <div v-for="(route, index) in routes" :key="index" class="__routes">
+          <router-link :to="route.route" class="_specific">
+            {{route.name}}
+          </router-link>
+        </div>
+      </section>
+  </main>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+      toggleMenu: false,
+      routes: [
+        {
+          name: "Dagens viner",
+          route: "/dagens/"
+        },
+        {
+          name: "History",
+          route: "/history/"
+        },
+        {
+          name: "Lotteriet",
+          route: "/lottery/game/"
+        },
+        // {
+        //   name: "Foreslå vin",
+        //   route: "/request"
+        // },
+        // {
+        //   name: "Foreslåtte viner",
+        //   route: "/all-requested-wines"
+        // },
+      ]
+    }
+  },
+  methods:{
+    toggleShowMenu(){
+      this.toggleMenu = this.toggleMenu ? false : true
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import "../styles/variables.scss";
+
+.link {
+  text-decoration: none;
+  color: #333333;
+}
+
+.top-banner {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0px;
+  background-color: $primary;
+  -webkit-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
+  -moz-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
+  box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
+  padding: 0px 10px;
+  
+  img {
+      height: 23px;
+  }
+  
+  .__routes{
+    text-decoration: none;
+    color: #333333;
+  }
+}
+
+.route-container{
+  background-color: $primary;
+  display: flex;
+  flex-direction: column;
+  
+
+  .__routes{
+    margin: 10px;
+    ._specific {
+      text-decoration: none;
+      color: #333333;
+    }
+  }
+}
+
+</style>