<template>
  <router-link class="side-logo-container" key="collapse" to="/">
    <el-image class="logo-image" :src="config.site_logo" fit="contain" v-if="config.site_logo" />
    <transition name="title-transition">
      <h1 class="logo-title" :class="{ 'text-white': sideTheme == 'dark' }" v-show="!props.collapse">
        {{ config.site_name }}
      </h1>
    </transition>
  </router-link>
</template>

<script setup lang="ts">
import { useConfigStore } from '@/stores/modules/config'
import { useSettingStore } from '@/stores/modules/setting'

interface Props {
  collapse: boolean
}
const props = defineProps<Props>()
const configStore = useConfigStore()

const settingStore = useSettingStore()
const config = computed(() => configStore.config)

const sideTheme = computed(() => settingStore.sideTheme)
</script>

<style lang="scss" scoped>
.side-logo-container {
  @apply w-full flex items-center gap-3;
  padding: 8px 13px;
  height: var(--navbar-height);
  overflow: hidden;

  .logo-image {
    @apply w-7 h-7;
  }

  .logo-title {
    width: calc(100% - 52px);
    position: absolute;
    left: 52px;
    @apply font-bold text-lg truncate text-nowrap;
  }

  .title-transition {
    &-enter-active {
      opacity: 0;
      transition: all 0.3s ease-out;
    }

    &-leave-active {
      transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
    }

    &-enter-from,
    &-leave-to {
      width: 0;
      opacity: 0;
    }
  }
}
</style>
