36 lines
1.1 KiB
Vue
36 lines
1.1 KiB
Vue
<script setup>
|
|
import useRightSidebar from '@Stores/RightSidebar'
|
|
|
|
/** Definidores */
|
|
const rightSidebar = useRightSidebar()
|
|
|
|
/** Eventos */
|
|
const emit = defineEmits(['open']);
|
|
|
|
/** Propiedades */
|
|
const props = defineProps({
|
|
sidebar: Boolean
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="fixed top-[3.1rem] right-[0.1rem] md:right-[0.5rem] w-fit h-[calc(100vh-3.1rem)] transition-all duration-300 z-50"
|
|
:class="{'translate-x-0':rightSidebar.isOpened, 'translate-x-64':rightSidebar.isClosed}"
|
|
>
|
|
<nav
|
|
class="flex md:w-64 h-full transition-all duration-300 border-none"
|
|
:class="{'w-64': rightSidebar.isClosed, 'w-screen': rightSidebar.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-primary dark:bg-primary-d text-white">
|
|
<div>
|
|
<ul class="flex h-full flex-col md:pb-4 space-y-1">
|
|
<slot />
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</template> |