Navbar

Uso

Instalación del Componente

Para utilizar este componente en tu aplicación, asegúrate de haber instalado y configurado el paquete @redcollege/ui según la guía de instalación.

Ejemplo de Implementación

A continuación, se muestra cómo puedes importar y utilizar el componente Navbar en una página o componente de Vue 3.

<template lang="pug">
    Navbar(:logo-url="process.env.LOGO_URL" :api-url="process.env.API_URL"  hide-periodos @sucess-logout="handleSuccessLogout" @selected-filters="handleSelectedFilters")
</template>

<script setup lang="ts">
// Define las funciones que manejarán los eventos emitidos
function handleSuccessLogout() {
  console.log('Cerrar sesión exitoso');
  // Aquí puedes redirigir al usuario
}

function handleSelectedFilters(establecimientoId: string, periodoId: string, cursoId: string) {
  console.log('Filtros seleccionados:', establecimientoId, periodoId, cursoId);
}
</script>

Props

Eventos Emitidos

Comportamiento

• Barra de Navegación: La barra de navegación muestra un logo y un menú con los módulos disponibles, así como opciones para seleccionar establecimientos, años escolares y cursos.
• Menús y Selección: Los menús permiten seleccionar distintos módulos y configurar datos relacionados con el usuario. Incluye un menú desplegable para acceder a opciones de cuenta y cerrar sesión.
• Filtrado Dinámico: Los menús de selección de períodos y cursos se actualizan dinámicamente en función de la selección de establecimiento y período.

Menú de Módulos

El menú de módulos muestra una lista de enlaces a diferentes módulos disponibles, con opciones para destacar ciertos módulos.

Menú de Selección

• Establecimientos: Permite seleccionar un establecimiento de una lista proporcionada por el usuario.
• Períodos Escolares: Muestra los períodos escolares disponibles para el establecimiento seleccionado (oculto si hidePeriodos es true).
• Cursos: Muestra los cursos disponibles para el período escolar seleccionado (oculto si hideCursos es true).

Menú de Usuario

Incluye opciones para ver la cuenta del usuario, acceder a la ayuda y cerrar sesión.