Edit toolbar

resources/js/components/Toolbar.vue

@@ -19,28 +19,53 @@
             <img src="../../../public/img/banner.png" class="my-2" width="150">
           </v-toolbar-title>
           <v-spacer></v-spacer>
-          <v-btn flat color="black" class="mx-0 px-0">
+          <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0">
             <v-icon>home</v-icon>
             <span class="body-2 font-weight-bold">หน้าหลัก</span>
           </v-btn>
-          <v-btn flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
+          <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
             <span class="body-2 font-weight-bold">เกี่ยวกับเรา</span>
           </v-btn>
-          <v-btn flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
+          <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
             <span class="body-2 font-weight-bold">เกี่ยวกับเรา</span>
           </v-btn>
-          <v-btn flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
+          <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
             <span class="body-2 font-weight-bold">เกี่ยวกับเรา</span>
           </v-btn>
-          <v-btn flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
+          <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
             <span class="body-2 font-weight-bold">เกี่ยวกับเรา</span>
           </v-btn>
-          <v-btn flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
+          <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
             <span class="body-2 font-weight-bold">เกี่ยวกับเรา</span>
           </v-btn>
-          <v-btn flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
+          <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
             <span class="body-2 font-weight-bold">เกี่ยวกับเรา</span>
           </v-btn>
+          <v-menu left bottom v-if="responsive">
+            <template v-slot:activator="{ on }">
+              <v-toolbar-side-icon v-on="on"></v-toolbar-side-icon>
+            </template>
+            <v-list>
+              <v-list-tile @click="">
+                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
+              </v-list-tile>
+              <v-list-tile @click="">
+                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
+              </v-list-tile>
+              <v-list-tile @click="">
+                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
+              </v-list-tile>
+              <v-list-tile @click="">
+                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
+              </v-list-tile>
+              <v-list-tile @click="">
+                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
+              </v-list-tile>
+              <v-list-tile @click="">
+                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
+              </v-list-tile>
+            </v-list>
+          </v-menu>
         </v-toolbar>
       </v-flex>
     </v-layout>
@@ -49,6 +74,27 @@
 
 <script>
 export default {
-  props: ['page']
+  props: ['page'],
+  data () {
+    return {
+      responsive: false
+    }
+  },
+  mounted () {
+    this.onResponsiveInverted()
+    window.addEventListener('resize', this.onResponsiveInverted)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.onResponsiveInverted)
+  },
+  methods: {
+    onResponsiveInverted () {
+      if (window.innerWidth < 991) {
+        this.responsive = true
+      } else {
+        this.responsive = false
+      }
+    }
+  }
 }
 </script>