<template>
  <div class="menu column">
    <div class="row logo justify-center">
      <img src="../assets/logo/primaryLogo.png" alt="Logo">
    </div>

    <q-list>
      <q-item class="row items-center item" @click="mostrarSubmenu = !mostrarSubmenu" clickable v-ripple>
        <q-icon class="icon" name="attach_file"/>
        <q-item-section>Projetos</q-item-section>
      </q-item>

      <q-list v-show="mostrarSubmenu" class="submenu">
        <router-link class="link" to="/usuarios">
          <q-item @click="itemClick" class="row item items-center" clickable v-ripple>
            <q-icon class="icon submenu-text" name="person"/>
            <q-item-section>Usuários</q-item-section>
          </q-item>
        </router-link>

        <q-item class="row item items-center" clickable v-ripple>
          <q-icon class="icon submenu-text" name="emoji_objects"/>
          <q-item-section>Recomendações</q-item-section>
        </q-item>

        <q-item class="row item items-center" clickable v-ripple>
          <q-icon class="icon submenu-text" name="edit"/>
          <q-item-section>Avaliações</q-item-section>
        </q-item>

        <q-item class="row item items-center" clickable v-ripple>
          <q-icon class="icon submenu-text" name="local_offer"/>
          <q-item-section>Tags</q-item-section>
        </q-item>

        <q-item class="row item items-center" clickable v-ripple>
          <q-icon class="icon submenu-text" name="view_module"/>
          <q-item-section>Tipos de Item</q-item-section>
        </q-item>

        <router-link class="link" to="/itens">
          <q-item class="row item items-center" clickable v-ripple>
            <q-icon class="icon submenu-text" name="business_center"/>
            <q-item-section>Itens</q-item-section>
          </q-item>
        </router-link>
      </q-list>

      <router-link class="link" to="/algoritmos">
        <q-item class="row item items-center" clickable v-ripple>
          <q-icon class="icon" name="functions"/>
          <q-item-section>Algoritmos</q-item-section>
        </q-item>
      </router-link>

      <router-link class="link" to="tags">
        <q-item class="row item items-center" clickable v-ripple>
          <q-icon class="icon" name="local_offer"/>
          <q-item-section>Tags</q-item-section>
        </q-item>
      </router-link>

      <router-link class="link" to="/tipositens">
        <q-item class="row item items-center" clickable v-ripple>
          <q-icon class="icon" name="view_module"/>
          <q-item-section>Tipos de Item</q-item-section>
        </q-item>
      </router-link>

      <q-item class="row item items-center" clickable v-ripple>
        <q-icon class="icon" name="settings"/>
        <q-item-section>Apis</q-item-section>
      </q-item>
    </q-list>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  data () {
    return {
      mostrarSubmenu: false
    }
  },
  methods: {
    itemClick (e) {
      // const element = e.target
    }
  }
}
</script>

<style lang="scss" scoped>
  .menu {
    color: $gunmetal;
  }

  .selected-item {
    background-color: $gunmetal;
    color: #fff;
  }

  .item {
    border: none;
  }

  .item:hover {
    background-color: $yellow-orange-color-wheel;
    color: #fff;

    .icon {
      color: #fff;
    }
  }

  .submenu-text {
    padding-left: 20px;
  }

  .icon {
    margin-right: 10px;
    font-size: 1.5em;
    color: $yellow-orange-color-wheel;
  }

  .logo {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;

    img {
      width: 70%;
      margin-right: 10%;
    }
  }

  .link {
    text-decoration: none;
    color: $gunmetal;
  }
</style>
