<script setup>
import { onMounted } from 'vue';
import useLoader    from '@Stores/Loader';

import Layout  from '@/components/Holos/Layout/RhApp.vue';
import Link    from '@Holos/Skeleton/Sidebar/Link.vue';

/** Definidores */
const loader = useLoader()

/** Propiedades */
defineProps({
    title: String,
});

/** Ciclos */
onMounted(() => {
    loader.boot()
})
</script>
<template>
  <Layout
        :title="title"
    >
        <template #leftSidebar>
            <Link
                icon="grid_view"
                name="Dashboard" 
                to="dashboard.index"
            />
            <Link
                icon="people"
                name="Empleados" 
                to="employees.index"
            />
            <Link
                icon="school"
                name="Historial Académico" 
                to="academic.index"
            />
            <Link
                icon="security"
                name="Seguridad y Salud" 
                to="security.index"
            />
            <Link
                icon="payments"
                name="Nómina" 
                to="payroll.index"
            />
            <Link
                icon="info"
                name="Información Adicional" 
                to="additional.index"
            />
        </template>
        <!-- Contenido -->
        <RouterView />
        <!-- Fin contenido -->
    </Layout>
</template>