<template>
  <div class="navbar fixed-header">
    <dk-hamburger :is-active="layout.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    <dk-breadcrumb class="breadcrumb-container" />
    <dk-user-info :user-menus="userMenus" @onClick="clickUserInfoMenu">
      <template v-slot:user-info>
        <slot name="user-info" />
      </template>
    </dk-user-info>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'DkNavbar',
  components: {

  },
  inject: {
    layout: {
      default: () => {
        return {
          opened: true,
          withoutAnimation: false,
          device: 'desktop'
        }
      }
    }
  },
  props: {
    userMenus: {
      default: () => {
        return []
      },
      type: Array
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },
  methods: {
    clickUserInfoMenu(item) {
      this.$emit('onClick', item)
    },
    toggleSideBar() {
      this.layout.opened = !this.layout.opened
      this.layout.withoutAnimation = false
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  //position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }

  .breadcrumb-container {
    float: left;
  }

}
</style>
