<template>
  <div class="flex items-center justify-center overflow-hidden">
    <router-link class="whitespace-nowrap text-center"
                 to="/">
      <h1 v-if="!collapse"
          class="ml-1 text-[22px] lg:text-lg leading-[1] font-bold text-[#333]">{{ title }}</h1>
    </router-link>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Settings from '@/settings';

export default defineComponent({
  name: 'SidebarLogo',
  props: {
    collapse: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      title: Settings.title,
    };
  },
});
</script>
