<script setup lang="ts">
const props = defineProps<{
  isCollapsed: boolean
  hasChildren: boolean
}>()

const emit = defineEmits<{
  toggle: []
}>()
</script>

<template>
  <button
    v-if="hasChildren"
    class="p-0.5 rounded-sm hover:bg-sidebar-accent text-muted-foreground transition-all duration-200 hover:cursor-pointer"
    @click.stop="emit('toggle')"
  >
    <i
      class="dku-icon-chevron-right-16 transition-transform duration-200"
      :class="{ 'rotate-90': !isCollapsed }"
    />
  </button>
</template>
