<template>
  <q-btn
    flat
    dense
    round
    aria-label="navigation"
    icon="reply"
    color="black"
  >
    <q-popover v-model="isNavMenuOpen">
      <q-list highlight>
        <q-item
          @click.native="onClick(itm,event)"
          v-for="itm in menuData"
          :key="itm.name"
          style="cursor:pointer;"
        >
          <q-item-side>
            <q-item-tile :icon="itm.icon" />
          </q-item-side>
          <q-item-main
            :label="$t(itm.name)"
            class="w3-large"
            style="text-transform: capitalize;"
            nowrap
          ></q-item-main>
        </q-item>
      </q-list>
    </q-popover>
  </q-btn>
</template>

<script>
module.exports = {
  data () {
    return {
      "isNavMenuOpen": false,
      "menuData": [
        { "name": "layout.nav_menu.home", "icon": "home", "url": this.$root.WebSetup.homeHref },
        { "name": "layout.nav_menu.station_list", "icon": "dvr", "url": "station_list.php" },
        { "name": "layout.nav_menu.back", "icon": "keyboard_backspace", "is_back": true },
      ],
    }
  },
  methods: {
    onClick (itm, evt) {
      if (itm.is_back) {
        history.back();
      } else {
        this.$root.FnPageSwitch(itm.url);
      }
    }
  }
}
</script>

<style scoped>
</style>