<script setup>
import { useSettingStore } from '@/store/settings.js'
import { getConfig } from '@/config/config'
const settingStore = useSettingStore()
const { collapse,layoutStyle } = storeToRefs(settingStore)
const projectName = ref(getConfig('projectName'))
</script>

<template>
    <div class="tjm_logo_container">
        <img class="logo" v-if="!collapse && layoutStyle=='vertical'" src="../../../assets/images/menu_img.png" alt="" />
        <img class="onlyLogo" v-else src="../../../assets/images/loading-logo-old.png" alt="" srcset="">
        <!-- <h1 class="title" v-if="!collapse">{{ projectName }}</h1> -->
    </div>
</template>

<style lang="scss" scoped>
.tjm_logo_container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  overflow: hidden;
  background: transparent;
  .logo {
    display: inline-block;
    height: 32px;
    vertical-align: middle;
  }
  .onlyLogo {
    width: 60px;
  }
  .title {
    display: inline-block;
    margin-left: 12px;
    font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    vertical-align: middle;
  }
}
</style>