Toolbar.vue 3.99 KB
<template>
  <div>
    <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>
          <v-btn round small outline color="deep-orange darken-4">
            <v-icon>person</v-icon> เข้าสู่ระบบ / สมัครสมาชิก
          </v-btn>
        </v-toolbar>
      </v-flex>
    </v-layout>
    <v-layout row wrap white>
      <v-flex xs12 sm10 offset-sm1>
        <v-toolbar flat color="white"  > <!--v-if="page == 'app'"-->
          <v-toolbar-title>
            <img src="../../../public/img/banner.png" class="my-2" width="150">
          </v-toolbar-title>
          <v-spacer></v-spacer>
          <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 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 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 v-if="!responsive" flat color="black" class="m x-0 px-0 body-2 font-weight-bold">
            <span class="body-2 font-weight-bold">เกี่ยวกับเรา</span>
          </v-btn>
          <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 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 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>
                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
              </v-list-tile>
              <v-list-tile>
                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
              </v-list-tile>
              <v-list-tile >
                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
              </v-list-tile>
              <v-list-tile >
                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
              </v-list-tile>
              <v-list-tile >
                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
              </v-list-tile>
              <v-list-tile >
                <v-list-tile-title>หน้าหลัก</v-list-tile-title>
              </v-list-tile>
            </v-list>
          </v-menu>
        </v-toolbar>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
export default {
  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>