38 lines
818 B
Vue
38 lines
818 B
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
collapsed?: boolean
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
collapsed: false
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<transition name="fade">
|
|
<img
|
|
v-if="collapsed"
|
|
src="/logo.png"
|
|
alt="LastWebNovel logo"
|
|
class="h-8 w-8"
|
|
>
|
|
</transition>
|
|
|
|
<transition name="fade">
|
|
<div v-if="!collapsed" class="flex flex-col gap-0 px-4 py-2">
|
|
<span class="text-lg font-bold text-gray-900 dark:text-white" style="font-family: 'Caveat', cursive; font-weight: 700;">LastWebNovel</span>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">Your Web Novel Hub</span>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.fade-enter-active, .fade-leave-active {
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.fade-enter-from, .fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|