<template>
  <div v-if="!hideHeader">
    <div :class="{is_mobile: is_mobile}" class="layout-menu">
      <div class="menu-item">
        <img v-audio class="btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png" alt="" @click="$refs.audioSettingDialog.show()">
      </div>
    </div>
    <AudioSettingDialog ref="audioSettingDialog" />
  </div>
</template>

<script>
import { mapGetters, mapState, } from 'vuex'
import AudioSettingDialog from '@/components/dialog/audio/index'
export default {
  components: {
    AudioSettingDialog,
  },
  data() {
    return {}
  },
  computed: {
    ...mapState([
      'hideHeader',
    ]),
    ...mapGetters([
      'is_mobile',
    ]),
  },
}
</script>

<style lang="scss" scoped>
.layout-menu{
  position: absolute;
  right: 0;
  top: 100px;
  height: 300px;
  width: 57px;
  background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .menu-item {
    margin: 20px 0 20px -14px;
    width: 50px;
    img {
      width: 50px;
      display: block;
      margin: auto;
    }
  }
  &.is_mobile {
    right: -20px;
  }
}
</style>
