<template>
  <div class="header-bar">
    <sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger>
    <custom-bread-crumb show-icon style="margin-left: 30px;" :list="breadCrumbList"></custom-bread-crumb>
    <div class="custom-content-con">
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from "vue-property-decorator";
import siderTrigger from "./sider-trigger/sider-trigger.vue";
import customBreadCrumb from "./custom-bread-crumb/custom-bread-crumb.vue";
import {State , Mutation, Getter } from "vuex-class";

@Component({
  components: {
    siderTrigger,
    customBreadCrumb
  }
})
export default class HeaderBar extends Vue {


  @State private breadCrumbList! : Array<any>;

  @Prop(Boolean) private collapsed ! : boolean;

  @Emit('on-coll-change') change(state : any){}
  handleCollpasedChange(state : any) : void{
    this.change(state)
  }
}
</script>
