<template>
	<div class="flex md:hidden flex-shrink-0">
		<UButton
			class="z-20"
			:class="{ 'fixed top-2 left-2' : fixed }"
			color="white"
			trailing-icon="i-heroicons-bars-3-20-solid"
			@click="handleToggleAside"
		/>
		<USlideover
			v-model="isOpenAside"
			class="w-64"
			side="left"
			:overlay="false"
		>
			<UButton
				class="absolute top-2 right-2 z-20"
				color="white"
				trailing-icon="i-heroicons-x-mark-20-solid"
				@click="handleToggleAside"
			/>
			<IAside />
		</USlideover>
	</div>
</template>
<script setup>
defineProps({
  fixed: {
    type: Boolean,
    default: false
  }
})
const isOpenAside = ref(false)
function handleToggleAside () {
  isOpenAside.value = !isOpenAside.value
}
</script>