<template>
  <div class="layout-header">
    <div class="layout-header__body">
      <Breadcrumb :list="breadList" />
    </div>
    <div class="layout-header__footer">
      <User />
    </div>
  </div>
</template>

<script>
import User from './User.vue'
import Breadcrumb from './Breadcrumb.vue'

export default {
  components: {
    User,
    Breadcrumb,
  },

  props: {
    breadList: Array,
  },

  setup(props) {
    
  }
}
</script>

<style lang="less" scoped>
.layout-header {
  display: flex;
  align-items: center;
  height: 100%;

  &__body {
    flex: auto;
  }

  &__footer {
    flex: none;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
}
</style>
