60 lines
2.4 KiB
Vue
60 lines
2.4 KiB
Vue
<script setup>
|
|
import { APP_VERSION, APP_COPYRIGHT } from '@/config.js'
|
|
import useLeftSidebar from '@Stores/LeftSidebar'
|
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
|
|
|
/** Definidores */
|
|
const leftSidebar = useLeftSidebar()
|
|
|
|
/** Eventos */
|
|
const emit = defineEmits(['open']);
|
|
|
|
/** Propiedades */
|
|
const props = defineProps({
|
|
sidebar: Boolean
|
|
});
|
|
|
|
const year = (new Date).getFullYear();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="fixed top-[3.1rem] md:top-0 w-fit h-[calc(100vh-3.1rem)] md:h-screen transition-all duration-300 z-50"
|
|
:class="{'-translate-x-0':leftSidebar.isOpened, '-translate-x-64':leftSidebar.isClosed}"
|
|
>
|
|
<nav
|
|
class="flex md:w-64 h-full transition-all duration-300 border-none"
|
|
:class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
|
|
>
|
|
<div class="flex flex-col h-full p-2 md:w-64">
|
|
<div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-white dark:bg-primary-d text-page-t dark:text-page-dt border-r border-gray-200 dark:border-primary/20">
|
|
<div class="py-4 bg-transparent">
|
|
<div class="flex flex-row justify-center items-center w-full px-4 mb-6 gap-2">
|
|
<GoogleIcon class="bg-[#2563eb] text-white text-3xl rounded p-1" name="apartment" />
|
|
<div class="flex flex-col items-center justify-center gap-1">
|
|
<h2 class="text-gray-800 dark:text-primary-dt font-bold text-xl"> HR Manager</h2>
|
|
<span class="text-sm text-gray-500 dark:text-primary-dt/70">Sistema de RRHH</span>
|
|
</div>
|
|
</div>
|
|
<ul class="flex h-full flex-col space-y-1 px-2">
|
|
<slot />
|
|
</ul>
|
|
</div>
|
|
<div class="mb-4 px-4 py-4 border-t border-gray-200">
|
|
<p class="text-center text-xs text-gray-400 dark:text-primary-dt/70">
|
|
© {{ year }} {{ APP_COPYRIGHT }}
|
|
</p>
|
|
<p class="text-center text-xs text-gray-400 dark:text-primary-dt/70">
|
|
APP {{ APP_VERSION }} API {{ $page.app.version }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="h-full"
|
|
:class="{'w-[calc(100vw-17rem)] dark:bg-black/40 md:w-0 bg-black/20':leftSidebar.isOpened,'md:w-0':leftSidebar.isClosed}"
|
|
@click="leftSidebar.toggle()"
|
|
></div>
|
|
</nav>
|
|
</div>
|
|
</template> |