<script lang="ts" setup>
import { useSettingsStore } from "@/store/modules/settings";

const settingsStore = useSettingsStore();

defineProps({
  collapse: {
    type: Boolean,
    required: true,
  },
});

const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
</script>

<template>
  <div class="w-full h-[50px] bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
    <transition name="sidebarLogoFade">
      <router-link
        v-if="collapse"
        key="collapse"
        class="h-full w-full flex items-center justify-center left-top-box"
        to="/"
      >
        <img
          v-if="settingsStore.sidebarLogo"
          src="../../../assets/img/left-top-logo.png"
          class="left-top-logo"
        />
        <span v-else class="ml-3 text-white text-sm font-bold"></span>
      </router-link>

      <router-link
        v-else
        key="expand"
        class="h-full w-full flex items-center justify-center left-top-box"
        to="/"
      >
        <img
          v-if="settingsStore.sidebarLogo"
          src="../../../assets/img/left-top-logo.png"
          class="left-top-logo"
        />
        <span class="ml-3 text-white text-sm font-bold"></span>
      </router-link>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
// https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component

.left-top-box {
  position: relative;
  height: 80px;
  background-color: #000;
}

.left-top-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 40px;
  padding: 5px 0 0 10px;
}

.sidebarLogoFade-enter-active {
  transition: opacity 2s;
}

.sidebarLogoFade-leave-active,
.sidebarLogoFade-enter-from,
.sidebarLogoFade-leave-to {
  opacity: 0;
}
</style>
