Toolbar.vue 5.05 KB
Newer Older
Kittisak Maneewong's avatar
Kittisak Maneewong committed
1
<template>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
2
  <div>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
3 4 5 6 7 8
    <v-layout row wrap white>
      <v-flex xs12 sm10 offset-sm1>
        <v-toolbar flat color="white" height="40">
          <v-spacer></v-spacer>
          <v-btn small="" dark color="deep-orange darken-4" class="elevation-0" @click="$router.push('/employer/login')">สำหรับผู้ประกอบการ</v-btn>
          <v-divider inset vertical></v-divider>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
9 10
          <v-btn v-if="!currentUser" small outline color="deep-orange darken-4" @click.stop="login()">
            <v-icon>person</v-icon>&nbsp;เข้าสู่ระบบ
11
          </v-btn>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
12 13 14 15 16
          <v-btn v-if="!currentUser" small outline color="deep-orange darken-4" @click.stop="register()">
            <v-icon>account_box</v-icon>&nbsp;ลงทะเบียน
          </v-btn>
          <v-btn v-else small outline color="deep-orange darken-4" @click="logout()">
            <v-icon>account_circle</v-icon>&nbsp;{{ currentUser }}
Kittisak Maneewong's avatar
Kittisak Maneewong committed
17 18 19 20 21 22
          </v-btn>
        </v-toolbar>
      </v-flex>
    </v-layout>
    <v-layout row wrap white>
      <v-flex xs12 sm10 offset-sm1>
23
        <v-toolbar flat color="white"  > <!--v-if="page == 'app'"-->
Kittisak Maneewong's avatar
Kittisak Maneewong committed
24
          <v-toolbar-title>
25
            <router-link to="/"><img src="../../../public/img/banner.png" class="my-2" width="150"></router-link>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
26 27
          </v-toolbar-title>
          <v-spacer></v-spacer>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
28
          <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0">
Kittisak Maneewong's avatar
Kittisak Maneewong committed
29 30
            <v-icon>home</v-icon>
            <span class="body-2 font-weight-bold">หน้าหลัก</span>
31
          </v-btn>   
Kittisak Maneewong's avatar
Kittisak Maneewong committed
32
          <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
Kittisak Maneewong's avatar
Kittisak Maneewong committed
33 34
            <span class="body-2 font-weight-bold">เกี่ยวกับเรา</span>
          </v-btn>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
35
          <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
Kittisak Maneewong's avatar
Kittisak Maneewong committed
36 37
            <span class="body-2 font-weight-bold">เกี่ยวกับเรา</span>
          </v-btn>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
38
          <v-btn v-if="!responsive" flat color="black" class="m x-0 px-0 body-2 font-weight-bold">
Kittisak Maneewong's avatar
Kittisak Maneewong committed
39 40
            <span class="body-2 font-weight-bold">เกี่ยวกับเรา</span>
          </v-btn>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
41
          <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
Kittisak Maneewong's avatar
Kittisak Maneewong committed
42 43
            <span class="body-2 font-weight-bold">เกี่ยวกับเรา</span>
          </v-btn>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
44
          <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
Kittisak Maneewong's avatar
Kittisak Maneewong committed
45 46
            <span class="body-2 font-weight-bold">เกี่ยวกับเรา</span>
          </v-btn>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
47
          <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0 body-2 font-weight-bold">
Kittisak Maneewong's avatar
Kittisak Maneewong committed
48 49
            <span class="body-2 font-weight-bold">เกี่ยวกับเรา</span>
          </v-btn>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
50 51 52 53 54
          <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>
55
              <v-list-tile>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
56 57
                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
              </v-list-tile>
58
              <v-list-tile>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
59 60
                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
              </v-list-tile>
61
              <v-list-tile >
Kittisak Maneewong's avatar
Kittisak Maneewong committed
62 63
                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
              </v-list-tile>
64
              <v-list-tile >
Kittisak Maneewong's avatar
Kittisak Maneewong committed
65 66
                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
              </v-list-tile>
67
              <v-list-tile >
Kittisak Maneewong's avatar
Kittisak Maneewong committed
68 69
                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
              </v-list-tile>
70
              <v-list-tile >
Kittisak Maneewong's avatar
Kittisak Maneewong committed
71 72 73 74
                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
              </v-list-tile>
            </v-list>
          </v-menu>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
75 76 77
        </v-toolbar>
      </v-flex>
    </v-layout>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
78 79
    <login v-if="dialog === 'login'"></login>
    <register v-if="dialog === 'register'"></register>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
80
  </div>
Kittisak Maneewong's avatar
Kittisak Maneewong committed
81 82 83
</template>

<script>
84 85
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
Kittisak Maneewong's avatar
Kittisak Maneewong committed
86
export default {
Kittisak Maneewong's avatar
Kittisak Maneewong committed
87
  props: ['page'],
88 89 90 91
  components: {
    'login': Login,
    'register': Register
  },
Kittisak Maneewong's avatar
Kittisak Maneewong committed
92 93
  data () {
    return {
Kittisak Maneewong's avatar
Kittisak Maneewong committed
94 95 96 97 98 99 100
      responsive: false,
      dialog: 'login'
    }
  },
  computed: {
    currentUser () {
      return this.$store.getters.getUser.name
Kittisak Maneewong's avatar
Kittisak Maneewong committed
101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
    }
  },
  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
      }
Kittisak Maneewong's avatar
Kittisak Maneewong committed
117 118 119 120 121 122 123 124 125 126 127
    },
    logout () {
      this.$store.dispatch('logout')
    },
    login () {
      this.dialog = 'login'
      this.$store.commit('setDialog', !this.$store.getters.getDialog)
    },
    register () {
      this.dialog = 'register'
      this.$store.commit('setDialog', !this.$store.getters.getDialog)
Kittisak Maneewong's avatar
Kittisak Maneewong committed
128 129
    }
  }
Kittisak Maneewong's avatar
Kittisak Maneewong committed
130 131
}
</script>