<script setup>
const props = defineProps({
  second: {
    type: Boolean,
    default: false,
  },
  iconMode: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <aside
    id="sidebar"
    :class="`fixed ${
      second ? 'left-16 bg-white w-64' : 'left-0 bg-gray-100 w-80'
    } top-0 z-20 flex-shrink-0 h-full pt-16 font-normal duration-75 lg:flex`"
    aria-label="Sidebar"
  >
    <div
      class="relative flex flex-col h-full flex-1 min-h-0 pt-0 border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700"
    >
      <div
        class="flex flex-col justify-between flex-1 pt-5 pb-4 overflow-y-auto"
      >
        <div
          :class="`flex-1 ${
            iconMode ? '' : 'px-3'
          } space-y-1 dark:bg-gray-800 dark:divide-gray-700`"
        >
          <ul class="pb-2 space-y-2">
            <slot></slot>
          </ul>
        </div>

        <div
          :class="`flex-1 ${
            iconMode ? '' : 'px-3'
          } space-y-1 dark:bg-gray-800 dark:divide-gray-700 flex flex-col justify-end`"
        >
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </aside>
  <div
    id="sidebarBackdrop"
    class="fixed inset-0 z-10 bg-gray-900/50 dark:bg-gray-900/90 hidden"
  ></div>
</template>
