<template>
    <div class="flex-grow bg-gray-100 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800">
        <div class="p-4 flex flex-col">
            <ILogo class="mt-2" />
            <UButton
                class="flex w-full mt-6"
                color="gray"
                leading-icon="i-heroicons-plus-20-solid"
                size="md"
                @click="handleShowCreate"
            >
                <div class="flex flex-grow justify-between items-center">
                    <span>新主题</span>
                    <div class="flex items-center gap-0.5">
                        <UKbd>{{ metaSymbol }}</UKbd>
                        <UKbd>K</UKbd>
                    </div>
                </div>
            </UButton>
            <div class="mt-4">
                <INav />
            </div>
        </div>
    </div>
    <UDivider />
    <div class="p-4 bg-gray-100 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col items-center justify-center">
        <IUserInfo />
    </div>
    <UModal v-model="isOpenCreate" :ui="{ width: 'w-full sm:max-w-screen-md' }">
        <ICreate @search="handleCloseCreate" />
    </UModal>
</template>
<script setup lang="ts">
const { metaSymbol } = useShortcuts()
const isOpenCreate = ref(false)
const handleShowCreate = () => {
    isOpenCreate.value = true
}
const handleCloseCreate = () => {
    isOpenCreate.value = false
}
defineShortcuts({
    meta_k: {
        handler: () => {
            handleShowCreate()
        }
    }
})
</script>
