<template lang="pug">
.themenu(v-shortcuts="[{ shortcut: [ 'f9', ], callback: shortcuts, push: true, focus: true },]")
  modal-shortcuts
  .nav-bar
    vm-navbar(class="sub-nabar" color="primary" text-color="rgba(122,171,252,1)", active-text-color="rgba(255,255,255,1)" type="flat")
      vm-navbar-item(index="0" v-for="(item, i) in menuItems" :key="i")
        router-link(:to='item.link')
          vm-icon(:icon="item.icon" size="1.4rem")
    .bottom-menu
      vm-dropdown(vm-position="right" vm-trigger-click)
        vm-button.help(type="flat" radius color="rgba(0, 0, 0, 0.2)" text-color="#fff" icon="question-mark-circle" @click="")

        vm-dropdown-menu
          vm-dropdown-group(vm-label="Ayuda")
            vm-dropdown-item Documentacion
            vm-dropdown-item(@click="shortcuts()") \{{ $t('strings.shortcuts') }}
          vm-dropdown-group(vm-label="Legal")
            vm-dropdown-item Términos de uso
            vm-dropdown-item Política de privacidad
      vm-button.help(type="flat" radius color="rgba(0, 0, 0, 0.2)" text-color="rgba(122,171,252,1)" icon="settings-outline" @click="")
  .sub-menu
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
const ModalShortcuts = () => import('@/components/aditionals/ModalShortcuts.vue')

export default {
  name: 'TheMenu',
  components: {
    ModalShortcuts
  },
  data: () => ({
    activeItem: 0
  }),
  computed: {
    ...mapGetters([
      'menuItems'
    ])
  },
  methods: {
    ...mapActions([
      'setModalShortcutsVisible'
    ]),
    shortcuts () {
      this.setModalShortcutsVisible(true)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.themenu {
  height: 100%;
  display: flex;
  width: 65px;
  background: rgba(var(--primary),1);
  transition: width 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
  .nav-bar {
    position: relative;
  .sub-nabar{
    width: 65px;
    display: block;
    transform: translateY(-50%);
    top: 50%;
    .vm-navbar--item {
      padding: 5px;
      margin: 0px 6px;
      .router-link-active {
        background-color: rgba(0, 0, 0, 0.2);
        i {
          color: #FFF;
        }
        ~.vm-navbar-after {
            width: 100%;
        }
      }
      span {
        margin-top: 3px;
      }
      a {
        background-color: rgba(0, 0, 0, 0);
        border-radius: 10px;
        padding: 10px 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: background 0.4s linear;
      }
    }
  }
  }
  .bottom-menu {
    position: absolute;
    bottom: 24px;
    width: 65px;
    left: 18%;
    .help {
      cursor: pointer !important;
      pointer-events: inherit;
      .vm-icon {
        font-size: 1.3rem;
      }
    }
  }
  .sub-menu {
    height: 100%;
    background-color: #1d49b6;
    width: 190px;
    position: relative;
  }
}
.heading {
  min-width: 180px;
  padding: 2px 12px;
  h4 {
    padding-top: 3px;
  }
}
.nonotifications {
  text-align: center;
}
</style>
