pcpuma_unam_operador/components/layouts/Menu.vue

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

        <b-menu>
          <b-menu-list label="Menu">
            <!-- <b-menu-list>
              <b-menu-item
                label="Inicio"
                :icon="icono('/inicio')"
                :disabled="activo('/inicio')"
                @click="opcionMenu('/inicio')"
              />
            </b-menu-list> -->

            <b-menu-list>
              <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>
              <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>

            <b-menu-item icon="train-car-container">
              <template #label="props">
                Carritos
                <b-icon
                  class="is-pulled-right"
                  :icon="props.expanded ? 'menu-down' : 'menu-up'"
                />
              </template>

              <b-menu-item
                label="Buscar carrito"
                :icon="icono('/operador/carritos/buscar_carrito')"
                :disabled="activo('/operador/carritos/buscar_carrito')"
                @click="opcionMenu('/operador/carritos/buscar_carrito')"
              />
              <b-menu-item
                label="Todos los carritos"
                :icon="icono('/operador/carritos/todos_carrito')"
                :disabled="activo('/operador/carritos/todos_carrito')"
                @click="opcionMenu('/operador/carritos/todos_carrito')"
              />
            </b-menu-item>

            <b-menu-item icon="cellphone-link">
              <template #label="props">
                Equipos
                <b-icon
                  class="is-pulled-right"
                  :icon="props.expanded ? 'menu-down' : 'menu-up'"
                />
              </template>

              <b-menu-item
                label="Buscar equipo"
                :icon="icono('/operador/equipos/buscar_equipo')"
                :disabled="activo('/operador/equipos/buscar_equipo')"
                @click="opcionMenu('/operador/equipos/buscar_equipo')"
              />
              <b-menu-item
                label="Todos los equipos"
                :icon="icono('/operador/equipos/todos_equipos')"
                :disabled="activo('/operador/equipos/todos_equipos')"
                @click="opcionMenu('/operador/equipos/todos_equipos')"
              />
            </b-menu-item>

            <b-menu-item icon="cellphone-link">
              <template #label="props">
                Usuarios
                <b-icon
                  class="is-pulled-right"
                  :icon="props.expanded ? 'menu-down' : 'menu-up'"
                />
              </template>

              <b-menu-item
                label="Buscar usuario"
                :icon="icono('/operador/usuarios/buscar_usuario')"
                :disabled="activo('/operador/usuarios/buscar_usuario')"
                @click="opcionMenu('/operador/usuarios/buscar_usuario')"
              />
              <b-menu-item
                label="Todos los usuarios"
                :icon="icono('/operador/usuarios/todos_usuarios')"
                :disabled="activo('/operador/usuarios/todos_usuarios')"
                @click="opcionMenu('/operador/usuarios/todos_usuarios')"
              />
              <b-menu-item
                label="Multa del usuario"
                :icon="icono('/operador/usuario/multas_usuarios')"
                :disabled="activo('/operador/usuario/multas_usuarios')"
                @click="opcionMenu('/operador/usuario/multas_usuarios')"
              />
            </b-menu-item>

            <b-menu-item
              label="Regreso Inmediato"
              :icon="icono('/regreso_inmediato')"
              :disabled="activo('/regreso_inmediato')"
              @click="opcionMenu('/regreso_inmediato')"
              v-if="idTipoUsuario === 1"
            />

            <!--Admin-->
            <b-menu-item icon="account-plus" v-if="idTipoUsuario === 1">
              <template #label="props">
                Administrator
                <b-icon
                  class="is-pulled-right"
                  :icon="props.expanded ? 'menu-down' : 'menu-up'"
                />
              </template>

              <b-menu-item
                label="Usuarios"
                :icon="icono('/admin/usuarios')"
                :disabled="activo('/admin/usuarios')"
                @click="opcionMenu('/admin/usuarios')"
              />

              <b-menu-item
                label="Operadores"
                :icon="icono('/admin/operadores')"
                :disabled="activo('/admin/operadores')"
                @click="opcionMenu('/admin/operadores')"
              />

              <b-menu-item
                label="Carga Masiva Equipos"
                :icon="icono('/admin/carga_masiva_equipos')"
                :disabled="activo('/admin/carga_masiva_equipos')"
                @click="opcionMenu('/admin/carga_masiva_equipos')"
              />

              <b-menu-item
                label="Carga Masiva Usuarios"
                :icon="icono('/admin/carga_masiva_usuarios')"
                :disabled="activo('/admin/carga_masiva_usuarios')"
                @click="opcionMenu('/admin/carga_masiva_usuarios')"
              />

              <b-menu-item
                label="Reportes"
                :icon="icono('/admin/reportes')"
                :disabled="activo('/admin/reportes')"
                @click="opcionMenu('/admin/reportes')"
              />
            </b-menu-item>
          </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>

    <dir class="pl-0 py-5">
      <b-button type="is-info" @click="open = true">
        <b-icon icon="menu" />
      </b-button>
    </dir>
  </aside>
</template>

<script>
export default {
  data() {
    return {
      open: false,
      idTipoUsuario: Number(localStorage.getItem('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() {
    if (
      !localStorage.getItem('token') ||
      !localStorage.getItem('idOperador') ||
      !localStorage.getItem('idTipoUsuario') ||
      !localStorage.getItem('operador') ||
      !localStorage.getItem('tipoUsuario') ||
      !localStorage.getItem('idModulo')
    )
      this.cerrarSesion()
  },
}
</script>

<style></style>