<template>
  <div :class="getAppLogoClass" @click="goHome">
    <div class="ml-2 truncate md:opacity-100" :class="getTitleClass">
      {{ title }}
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { useDesign } from '~/composables/useDesign';

  const { prefixCls } = useDesign('app-logo');
  const title = import.meta.env.VITE_GLOB_APP_TITLE
  const getAppLogoClass = computed(() => [
    prefixCls
  ]);
  const getTitleClass = computed(() => [
    `${prefixCls}__title`,
  ]);
  const router = useRouter()
  function goHome() {
    router.push('/')
  }
</script>
<style lang="scss" scoped>
  $prefix-cls: '#{$name-prefix}-app-logo';
  $header-prefix-cls: '#{$name-prefix}-layout-header';
  .#{$header-prefix-cls} {
    &--white {
      .#{$prefix-cls} {
        &__title {
          //color: @white;
          color: #333 !important;
        }
      }
    }

    &--host {
      .#{$prefix-cls} {
        &__title {
          color: $white !important;
          //color: #333;
        }
      }
    }
  }
  .#{$prefix-cls} {
    display: flex;
    align-items: center;
    padding-left: 7px;
    cursor: pointer;
    transition: all 0.2s ease;

    &.light {
      //border-bottom: 1px solid @border-color-base;
    }

    &.collapsed-show-title {
      padding-left: 20px;
    }

    &.light &__title {
      //color: @primary-color;
      color: #333;
    }

    &.dark &__title {
      //color: @white;
      color: #333;
    }

    &__title {
      font-size: 28px;
      font-weight: 700;
      transition: all 0.5s;
      line-height: normal;
    }
  }
</style>
