@greenborn/vue-side-menu

@greenborn/vue-side-menu

Menú lateral genérico y autocontenido para Vue 3. Configurable íntegramente por props, sin dependencias de UI (CSS propio), con comportamiento responsive (overlay en móvil), filtrado opcional por permisos vía provide/inject y soporte opcional de vue-router.

Extraído y genericizado a partir del sidebar de la aplicación SGI.

Instalación

npm install @greenborn/vue-side-menu

Uso básico

<template>
  <SideMenu
    :items="items"
    :visible="sidebarVisible"
    title="Menú"
    @close="sidebarVisible = false"
  />
</template>

<script>
import { provide } from 'vue'
import SideMenu, { HAS_PERMISSION_KEY } from '@greenborn/vue-side-menu'
import '@greenborn/vue-side-menu/style.css'

export default {
  components: { SideMenu },
  data() {
    return { sidebarVisible: false }
  },
  computed: {
    items() {
      return [
        { label: 'Dashboard', to: '/', icon: 'bi bi-speedometer2' },
        { label: 'Clientes', to: '/clientes', permiso: 'clientes.ver' },
        { label: 'Proyectos', href: '/proyectos' },
        { divider: true },
        {
          label: 'Instalar',
          icon: 'bi bi-download',
          action: () => this.installPwa(),
        },
      ]
    },
  },
  setup() {
    provide(HAS_PERMISSION_KEY, (permiso) => permisosUsuario.includes(permiso))
  },
}
</script>

Props

Esquema de un item

Emits

• close — se emite al hacer clic en un item en modo móvil o al hacer clic en el overlay.

Slots

• footer — contenido del pie del menú (genérico para versión/estado PWA, etc.).

Permisos

Si la aplicación llama a provide(HAS_PERMISSION_KEY, fn) con una función (permiso) => boolean, los items con permiso se filtran en consecuencia. Si no se provee, se muestran todos los items.

import { HAS_PERMISSION_KEY } from '@greenborn/vue-side-menu'
import { provide } from 'vue'

provide(HAS_PERMISSION_KEY, (permiso) => usuario.permisos.includes(permiso))

vue-router

No es una dependencia obligatoria. Si vue-router está instalado y registrado globalmente, los items con to usan router-link (y reciben la clase router-link-exact-active). En caso contrario, esos items se renderizan como <a href>.

Desarrollo / Demo

npm install
npm run dev   # demo en http://localhost:5175
npm run build # genera dist/

Licencia

MIT