<template>
  <div class="layout-logo" :style="{'justify-content': !isCollapse ? 'space-between' : 'center' }">
    <img v-if="!isCollapse" alt="" class="logo-img" src="@/assets/Vue.png">
    <div v-if="!isCollapse" class="website-name">{{ title }}</div>
<!--    <i :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'" style="font-size: 26px; color: rgb(64, 158, 255);"-->
<!--       @click="handleFold"></i>-->
  </div>
</template>

<script>
export default {
  name: "Logo",
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "simple-base-unit"
    }
  },
  model: {
    prop: "isCollapse",
    event: "input"
  },
  methods: {
    handleFold() {
      this.$emit('input', !this.isCollapse)
    }
  }
}
</script>

<style lang="scss" scoped>

.layout-logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 5px;

  .logo-img {
    width: 28px;
  }

  .website-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px;
  }
}
</style>
