pcpuma_unam_operador/components/layouts/Menu.vue

<template>
  <div>
    <section>
      <div
        class="container is-flex is-justify-content-space-between is-align-items-center"
      >
        <div class="pl-3 py-2">
          <b-button type="is-info" @click="open = true" size="is-small">
            <b-icon icon="menu" size="is-small" />
          </b-button>
        </div>
      </div>
    </section>

    <aside>
      <b-sidebar type="is-white" v-model="open" fullheight overlay>
        <div class="m-5">
          <b-image :src="require('@/assets/icon.png')" alt="logo_pc_puma" />

          <b-menu class="mt-6">
            <b-menu-list label="Menu">
              <b-menu-list v-if="idTipoUsuario === 3 || idTipoUsuario === 4">
                <b-menu-item
                  label="Préstamo/Devolución"
                  :icon="icono('/operador/prestamo_devolucion')"
                  :disabled="activo('/operador/prestamo_devolucion')"
                  @click="opcionMenu('/operador/prestamo_devolucion')"
                />
              </b-menu-list>

              <b-menu-list v-if="idTipoUsuario === 3 || idTipoUsuario === 4">
                <b-menu-item
                  label="Historial de Préstamos"
                  :icon="icono('/operador/historial_prestamos')"
                  :disabled="activo('/operador/historial_prestamos')"
                  @click="opcionMenu('/operador/historial_prestamos')"
                />
              </b-menu-list>

              <Usuarios
                :idTipoUsuario="idTipoUsuario"
                :opcionMenu="opcionMenu"
              />

              <Equipos
                :idTipoUsuario="idTipoUsuario"
                :opcionMenu="opcionMenu"
              />

              <Carritos
                :idTipoUsuario="idTipoUsuario"
                :opcionMenu="opcionMenu"
              />

              <Administrador
                :idTipoUsuario="idTipoUsuario"
                :opcionMenu="opcionMenu"
              />

              <Configuracion
                :idTipoUsuario="idTipoUsuario"
                :opcionMenu="opcionMenu"
              />
            </b-menu-list>

            <b-menu-list label="Acciones">
              <b-menu-item label="Cerrar Sesión" @click="cerrarSesion()" />
            </b-menu-list>
          </b-menu>
        </div>
      </b-sidebar>
    </aside>
  </div>
</template>

<script>
import Administrador from '@/components/layouts/Administrador'
import Carritos from '@/components/layouts/Carritos'
import Configuracion from '@/components/layouts/Configuracion'
import Equipos from '@/components/layouts/Equipos'
import Usuarios from '@/components/layouts/Usuarios'

export default {
  components: {
    Administrador,
    Carritos,
    Configuracion,
    Equipos,
    Usuarios,
  },
  data() {
    return {
      open: false,
      idTipoUsuario: '',
    }
  },
  methods: {
    cerrarSesion() {
      localStorage.clear()
      this.$router.push('/')
    },
    opcionMenu(path) {
      this.open = false
      this.$router.push(path)
    },
    activo(ruta) {
      return ruta === window.location.pathname
    },
    icono(ruta) {
      return this.activo(ruta) ? 'square' : 'crop-square'
    },
  },
  created() {
    const objeto = JSON.parse(localStorage.getItem('usuario'))
    this.idTipoUsuario = objeto.operador.tipoUsuario.id_tipo_usuario
  },
}
</script>

<style scoped>
section {
  background-color: #bb8704;
}
</style>