<template>
  <aside class="fix-sidebar left-sidebar card-no-border">
    <!-- Sidebar scroll-->
    <div class="scroll-sidebar">
      <!-- User profile -->
      <div class="user-profile">
        <div class="float-right pb-2">
          <a
            class="nav-link sidebartoggler hidden-sm-down text-muted waves-effect waves-red"
            @click="openMenu"
            style="cursor:pointer"
            data-toggle="tooltip"
            :title="[menuIsOpen ? 'Cerrar Menú': 'Abrir Menú']"
          >
            <i class="material-icons">{{ menuIsOpen ? 'reorder': 'arrow_back'}}</i>
          </a>
          
        </div>
        <!-- User profile image -->
        <div class="profile-img">
          <router-link :to="{ name: 'homeAdmin'}">
            <img :src="require('@/assets/quiosco-icon.png')" alt="Logo Quiosco" />
          </router-link>
        </div>
        <br />
        <div class="profile-text text-center">
          <!-- Administrador -->
          <dt class="font-weight-bold">QUIOSCO</dt>
          <p>Administrador</p>
        </div>
      </div>
      <nav class="sidebar-nav">
        <ul class="metismenu" id="sidebarnav">
          <li class="nav-small-cap">ADMINISTRAR</li>
          <li v-if="$store.getters.user.role === 'admin'">
            <a class="has-arrow" href="#quiosco" data-toggle="collapse" aria-expanded="false">
              <i class="material-icons">library_books</i>
              <span class="hide-menu">Gestionar Quiosco</span>
            </a>
            <ul aria-expanded="false" id="quiosco" class="collapse smooth-enter-active">
              <li>
                <router-link :to="{name: 'estantesAdmin' }" active-class="active">Estantes</router-link>
              </li>
              <li>
                <router-link :to="{name: 'seccionesAdmin' }" active-class="active">Secciones</router-link>
              </li>
              <li>
                <router-link :to="{name: 'categoriasAdmin' }" active-class="active">Categorías</router-link>
              </li>
            </ul>
          </li>
          <li>
            <router-link :to="{ name: 'archivosAdmin' }" active-class="active">
              <i class="material-icons">file_copy</i>
              <span class="hide-menu">Archivos</span>
            </router-link>
          </li>
          <li v-if="$store.getters.user.role === 'admin'">
            <router-link :to="{ name: 'usuariosAdmin' }" active-class="active">
              <i class="material-icons">person</i>
              <span class="hide-menu">Roles</span>
            </router-link>
          </li>
        </ul>
      </nav>
      <!-- End Sidebar navigation -->
    </div>
    <!-- End Bottom points-->
  </aside>
</template>

<script>
import $ from "jquery";
export default {
  name: "Sidebar",
  data() {
    return {
      menuIsOpen: false
    }
  },
  methods: {
    openMenu() {
      $("body").hasClass("mini-sidebar")
        ? ($("body").trigger("resize"),
          $("body").removeClass("mini-sidebar"),
          $(".navbar-brand span").show(),
          $(".sidebartoggler i").addClass("ti-menu"))
        : ($("body").trigger("resize"),
          $("body").addClass("mini-sidebar"),
          $(".navbar-brand span").hide(),
          $(".sidebartoggler i").removeClass("ti-menu"));

      $("body").toggleClass("show-sidebar"),
        $(".nav-toggler i").toggleClass("ti-menu"),
        $(".nav-toggler i").addClass("ti-close");
      $(".sidebartoggler i").toggleClass("ti-menu");
      this.menuIsOpen = !this.menuIsOpen;
    }
  },
  
};
</script>

<style scoped>
.smooth-enter-active,
.smooth-leave-active {
  transition: height 0.1s;
  overflow: hidden;
}
.smooth-enter,
.smooth-leave-to {
  height: 0;
}
.mini-sidebar .sidebar-nav {
  background: transparent !important;
}
.mini-sidebar .sidebar-nav ul li.active {
  background: transparent !important;
}
.router-link-exact-active.active {
  font-weight: bold;
  background: #f42849;
}
.card-no-border .left-sidebar,
.card-no-border .sidebar-nav {
  background: #f42849;
}
.left-sidebar {
  background: #f42849;
  box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08) !important;
}
.sidebar-nav ul li.nav-small-cap {
  color: #fff;
}
.sidebar-nav > ul > li > a i {
  color: #fff;
}
.sidebar-nav ul li a {
  color: #fff;
}
.user-profile .profile-text {
  color: #000;
}
.sidebar-nav > ul > li > a:hover {
  border-left: 3px solid #fff;
}
.sidebar-nav > ul > li.active > a {
  border-left: 3px solid #fff;
  color: #fff;
  font-weight: bold;
}
.user-profile {
  text-align: center;
  position: relative;
  background: #fff;
  margin-top: -25px;
  padding-top: 30px;
}
.sidebar-nav .has-arrow::after {
  border-color: #fff;
}
.mini-sidebar .sidebar-nav #sidebarnav > li > ul {
  background: #3535359e;
}
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
  background: #3535359e;
  color: #ffffff;
  border-color: #fff;
}
.sidebar-nav ul li.active {
  background: #dc2747 !important;
}
.card-no-border .sidebar-nav > ul > li > a.active {
  background: #dc2747 !important;
}
</style>