<template>
  <div class="sidebar-logo-container" :class="{ collapse: collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' && navType !== 3 ? variables.menuBackground : variables.menuLightBackground }">
    <transition name="sidebarLogoFade">
      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' && navType !== 3 ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' && navType !== 3 ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
      </router-link>
    </transition>
  </div>
</template>

<script>
import logoImg from "@/assets/logo/logo.png"
import variables from "@/assets/styles/variables.scss"

export default {
  name: "SidebarLogo",
  props: { collapse: { type: Boolean, required: true } },
  computed: {
    variables() { return variables },
    sideTheme() { return this.$store.state.settings.sideTheme },
    navType() { return this.$store.state.settings.navType }
  },
  data() { return { title: process.env.VUE_APP_TITLE, logo: logoImg } }
}
</script>

<style lang="scss" scoped>
.sidebarLogoFade-enter-active { transition: opacity 1.5s; }
.sidebarLogoFade-enter, .sidebarLogoFade-leave-to { opacity: 0; }
.sidebar-logo-container {
  position: relative; height: 50px; line-height: 50px;
  background: #2b2f3a; text-align: center; overflow: hidden;
  .sidebar-logo-link {
    height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none;
    .sidebar-logo { width: 34px; height: 34px; object-fit: contain; margin-right: 10px; flex-shrink: 0; }
    .sidebar-title { display: inline-block; margin: 0; color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  }
}
.sidebar-logo-container.collapse .sidebar-logo-link { justify-content: center; }
.sidebar-logo-container.collapse .sidebar-logo { margin-right: 0 !important; }
</style>
