<script setup>
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
});
</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">
              2025 RH Manager &copy; Golsystems
            </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>