<template>
  <ElAside class="x-system-sidebar" :width="$system.asideWidth">
    <div v-if="$system.asideHeader" class="x-system-sidebar__logo">
      <slot name="logo">
        <XIcon v-if="$system.logo" v-bind="logo"></XIcon>
        <span class="x-system-sidebar__name">{{$system.title}}</span>
      </slot>
    </div>
    <XMenu class="x-system-sidebar__menu" v-bind="$attrs" v-on="$listeners"></XMenu>
  </ElAside>
</template>

<script>
import {XIcon, XMenu} from '@newpearl/ui';
import {
  Aside as ElAside
} from 'element-ui';

export default {
  inheritAttrs: false,
  inject: ['$system'],
  components: {
    ElAside,
    XIcon,
    XMenu
  },
  props: {},
  computed: {
    logo() {
      const logo = this.$system.logo;
      return typeof logo === 'object'
        ? {...logo, size: 26}
        : {
          name: logo,
          size: 26
        };
    }
  }
};
</script>
