<script setup lang="ts">
import { ref } from 'vue'
const hiddenOrActive = ref('hidden');

function switchHiddenElement(){
    if(hiddenOrActive.value == 'hidden'){
        hiddenOrActive.value = "active";
    } else{
        hiddenOrActive.value = "hidden"
    }
}

const props = defineProps(
    {
        categoryName: {required : true}
    }
)


</script>


<template>
    <li>
        <button @click="switchHiddenElement()" type="button" class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
            <span class="flex-1 ml-3 text-left whitespace-nowrap">{{props.categoryName}}</span>
        </button>
        <ul class='py-2 space-y-2 bg-gray-50 dark:bg-gray-700 rounded-xl' :class="hiddenOrActive">
            <slot></slot>
        </ul>
    </li>
</template>