<template>
  <div class="sidenav">
    <div v-for="(menu, index ) in menus" :key="index">
        <router-link :to="{name: menu.routerName}" v-if=" typeof(menu.childs) == 'undefined'">



        {{menu.title}}

        </router-link>

      <div v-else>
        <button
          class="dropdown-btn"
          :class="{active: activeIndex == index}"
          @click="clickMenu(index)"
        >

          {{menu.title}}
          <font-awesome-icon icon="arrow-alt-circle-down" class="arrow-icon" />
        </button>
        <div
          class="dropdown-container"
          :class="{'dropdown-container-active' : activeIndex == index}"
        >
        <router-link :to="{name: child.routerName}"   v-for=" (child,indexChild) in menu.childs" :key="indexChild" href="#">

            <font-awesome-icon icon="arrow-alt-circle-right" />
            {{child.title}}

        </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const menus = [
  {
    title: "Promotora",
    icon: "shopping-basket",
    childs: [
      {
        title: "Minhas promotoras",
        routerName: "Digitar Pedido"
      },
      {
        title: "Contrato/Distrato",
        routerName: "Meus Pedidos"
      }
    ]
  },
  {
    title: "Marketing",
    icon: "id-card",
    childs: [
      {
        title: "Catálogos",
        routerName: "Campanhas"
      },
      {
        title: "Produtos",
        routerName: "Teste"
      },
      {
        title: "Materiais de divulgação",
        routerName: "Material de Apoio"
      },
      {
        title: "Ações extras",
        routerName: "Teste"
      },
    ]
  },
  {
    title: "Para você",
    icon: "handshake",
    childs: [
      {
        title: "Treinamentos",
        routerName: "Teste"
      },
      {
        title: "Contra cheque",
        routerName: "Teste"
      },
      {
        title: "IR",
        routerName: "Teste"
      },
      {
        title: "Ações de endomarketing",
        routerName: "Teste"
      },
      {
        title: "Espaço para dúvidas",
        routerName: "Teste"
      }
    ]
  },

  {
    title: "Ferramentas de campo",
    icon: "calendar-alt",
    childs: [
      {
        title: "Meus limites",
        routerName: "Teste"
      },
      {
        title: "Relatório de despesas",
        routerName: "Teste"
      }
    ]
  },
  {
    title: "SuperClass",
    icon: "calendar-alt",
    routerName: "teste"
  },
  {
    title: "Central de relacionamento",
    icon: "calendar-alt",
    routerName: "teste"
  },
  {
    title: "Configurações",
    icon: "photo-video",
    childs: [
      {
        title: "Usuários",
        routerName: "Usuários"
      },
      {
        title: "Gerentes",
        routerName: "Teste"
      },
       {
        title: "Trocar senha CS",
        routerName: "Teste"
      },
      {
        title: "Promoções",
        routerName: "Promoções"
      },
      {
        title: "Desconto Progressivo ",
        routerName: "Promoções Desconto Progressivo"
      },
       {
        title: "Layout",
        routerName: "Banner"
      },
      {
        title: "Oferta de Última Hora",
        routerName: "Offers"
      }
    ]
  },
 {
    title: "Logar como",
    icon: "calendar-alt",
    routerName: "teste"
  },


];

export default {
  data: () => {
    return {
      menus: menus,
      activeIndex: -1
    };
  },
  methods: {
    clickMenu(index) {
      this.activeIndex = this.activeIndex == index ? -1 : index;
    }
  }
};
</script>

<style lang="scss" scoped>
/* Style the sidenav links and the dropdown button */
.sidenav a,
.dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #fff;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  border-radius: 20px;
  position: relative;
  &:hover {
    background: #ed8626;
  }

  .arrow-icon {
    position: absolute;
    right: 10px;
    top: 12px;
  }
}

/* On mouse-over */
.sidenav a:hover,
.dropdown-btn:hover {
  color: #f1f1f1;
}

/* Add an active class to the active dropdown button */
.active {
  background: rgba(255, 255, 255, 0.5);
  color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  opacity: 0;
  height: 0;
  margin-top: -12px;
  padding-top: 12px;
  padding-left: 8px;
  transition: all 0.5s ease;
}

.dropdown-container-active {
  opacity: 1 !important;
  height: auto !important;

  &:target {
    height: auto !important;
  }
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}
</style>
