<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-01-10 10:15:50
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-01-12 16:57:26
 * @FilePath: \General-AI-Platform-Web-Client\src\layout\components\sidebar\logo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { getTopMenu } from "@/router/utils";
import { useNav } from "@/layout/hooks/useNav";

const props = defineProps({
  collapse: Boolean
});

const { title } = useNav();
</script>

<template>
  <div class="sidebar-logo-box" :class="{ collapses: props.collapse }">
    <transition name="sidebarLogoFade">
      <router-link
        v-if="props.collapse"
        key="props.collapse"
        :title="title"
        class="sidebar-logo-link"
        :to="getTopMenu()?.path ?? '/'"
      >
        <img src="/logo.svg" alt="logo" />
      </router-link>
      <router-link
        v-else
        key="expand"
        :title="title"
        class="text-center sidebar-logo-link"
        :to="getTopMenu()?.path ?? '/'"
      >
        <img src="/logo.svg" alt="logo" />
      </router-link>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.sidebar-logo-box {
  padding: 24px 0 16px;
  margin: 0 20px;
  overflow: hidden;
  border-bottom: 1px solid #fff3;

  .sidebar-logo-link {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;

    img {
      display: inline-block;
      width: 56px;
    }
  }
}
</style>
