Componente Sidebar

El componente Sidebar proporciona una barra lateral desplegable con elementos de menú y opciones de personalización.

Uso en Componentes

Utilizando en un Componente

Puedes integrar el componente Sidebar en tus componentes de la siguiente manera:

<template>
  <div>
    <Sidebar
      :background="'#0162A0'"
      :colorScrollBar="'#0162A0'"
      :colorTextItem="'white'"
      :menu="menu"
      :sizeTextItem="'12px'"
      @navigate="handleNavigation"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const menu = {
  top: [
    {
        title: 'Panel',
        image: baseApiUrl + '/icons/Home.svg',
        visible : true,
        name: { name: 'home'}
    },
    {
        title: 'Lista de siniestros',
        image: baseApiUrl + '/icons/lista.svg',
        visible : true,
        subSection: [
            {
                title: 'Cerrados',
                image: baseApiUrl + '/icons/lista.svg',
            }
        ]
    },
  ],
  above: [
    {
        title: 'Cerrar sesión',
        image: baseApiUrl + '/icons/logout.svg',
        visible : true,
        name: { name: 'Logout'}
    }
  ]
};

const handleNavigation = (data: any) => {
   if(data.path){
       return router.push({ path: data.path })
    }
    if(data.name){
        router.push(data.name)
    }
}
</script>

Propiedades

Propiedad	Tipo	Descripción
background	String	Color de fondo de la barra lateral.
colorScrollBar	String	Color de la barra de desplazamiento.
colorTextItem	String	Color del texto en los elementos de menú.
menu	Object	Elementos de menú y submenú.
sizeTextItem	String	Tamaño del texto en los elementos de menú.

Eventos

Evento	Parámetros	Descripción
navigate	data	Se emite al hacer clic en un elemento de menú.