<script lang="ts" setup>
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
        style="position: relative"
        v-if="collapse"
        key="collapse"
        class="h-full w-full flex items-center left-top-box"
        to="/"
      >
        <img
          src="../../../assets/img/left-top-logo.png"
          class="left-top-logo boxCentreImg"
        />
      </router-link>

      <router-link
        v-else
        style="position: relative"
        key="expand"
        class="h-full w-full flex items-center left-top-box"
        to="/"
      >
        <img
          src="../../../assets/img/left-top-logo.png"
          class="left-top-logo boxCentreImg"
        />
      </router-link>
    </transition>
  </div>
</template>

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

.left-top-box {
  height: 80px;
  // background-color: #1b213a;
  background-color: #000;
}

.left-top-logo {
  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>
