<template>
    <div class="flex flex-col w-full gap-2">
        <UButton
            leading-icon="i-heroicons-home"
            color="gray"
            variant="ghost"
            size="md"
            label="首页"
            to="/"
            @click="handleClickItem"
        />
        <UButton
            leading-icon="i-heroicons-rectangle-stack"
            color="gray"
            variant="ghost"
            size="md"
            label="收藏夹"
            to="/library"
            @click="handleClickItem"
        />
        <ISearchHistory @sign="handleOpenSign" />
        <ClientOnly>
            <UButton
                v-if="!$isSignIn"
                class="flex flex-grow gap-2 justify-center"
                size="lg"
                label="登录"
                @click="handleOpenSign"
            />
        </ClientOnly>
    </div>
    <UModal v-model="isOpenSign">
        <ISign @close="handleCloseSign" />
    </UModal>
</template>
<script setup>
const { $isSignIn } = storeToRefs(useUserStore())
const Layout = inject('Layout')
const isOpenSign = ref(false)
const handleOpenSign = () => {
    isOpenSign.value = true
}
const handleCloseSign = () => {
    isOpenSign.value = false
}
function handleClickItem () {
    Layout.handleCloseAside()
}
</script>
