Mikolaj Widla
3ec139c8bd
Co-authored-by: widlam <mikolaj.widla@gmail.com> Reviewed-on: #226 Reviewed-by: Adam Bem <bema@noreply.example.com> Co-authored-by: Mikolaj Widla <widlam@noreply.example.com> Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>
32 lines
865 B
Vue
32 lines
865 B
Vue
<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> |