<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="$openSign" />
        <ClientOnly>
            <UButton
                v-if="!$isSignIn"
                class="flex gap-2 justify-center"
                size="lg"
                label="登录"
                @click="$openSign"
            />
        </ClientOnly>
    </div>
    <UModal v-model="$isOpenSign">
        <ISign @close="$closeSign" />
    </UModal>
</template>
<script setup>
const { $isSignIn, $isOpenSign } = storeToRefs(useUserStore())
const { $openSign, $closeSign } = useUserStore()
const Layout = inject('Layout')
function handleClickItem () {
    Layout.handleCloseAside()
}
</script>
