<template lang="pug">
div.theheader
  vm-navbar(class="nabar" type="border")
    router-link(to='/')
      .logo-header
        img(src='@/assets/logo.jpg', alt='Logo', height=24)
    vm-spacer
    vm-navbar-item(index="0")
      vm-dropdown
        vm-button(type="flat" radius icon="bell-outline" color="#afbbc6")

        vm-dropdown-menu
          .heading.d-flex.justify-content-between
            h4 \{{ $t('strings.notifications') }}
            vm-button(type="flat" size="small") \{{ $t('strings.see_all') }}
          vm-dropdown-item.nonotifications(divider) \{{ $t('strings.no_notifications') }}
    vm-navbar-item(index="0")
      vm-dropdown
        vm-button(type="flat" radius icon="email-outline" color="#afbbc6")

        vm-dropdown-menu
          .heading.d-flex.justify-content-between
            h4 \{{ $t('strings.messages') }}
            vm-button(type="flat" size="small") \{{ $t('strings.see_all') }}
          vm-dropdown-item.nonotifications(divider) \{{ $t('strings.no_messages') }}
    vm-navbar-item(index="1")
      vm-dropdown
        vm-avatar(src="https://avatars2.githubusercontent.com/u/31676496?s=460&v=4")

        vm-dropdown-menu
          vm-dropdown-item \{{ $auth.user().name }}
          vm-dropdown-item(@click="logout" divider) \{{ $t('strings.exit') }}

  vm-navbar(class="sub-nabar", text-color="rgba(var(--gray),1)", active-text-color="rgba(var(--primary),1)")
    vm-spacer
    vm-navbar-item(index="0" v-for="(item, i) in menuItems" :key="i")
      router-link(:to='item.link')
        vm-icon(:icon="item.icon" size="1.4rem")
        span \{{ $t(item.name) }}
    vm-spacer
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'TheHeader',
  methods: {
    logout () {
      this.$auth.logout({
        makeRequest: true,
        redirect: { name: 'login' }
      })
    }
  },
  computed: {
    ...mapGetters([
      'menuItems'
    ])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.theheader {
  position: fixed;
  width: 100%;
  background: white;
  z-index: 10000;
  .nabar {
    padding: .4rem 1rem;
    .logo-header {
      margin-left: 25px;
    }
    .vm-navbar--item {
      padding: 0 10px;
      display: flex;
      .con-vm-avatar {
        margin: 0;
      }
    }
  }
  .sub-nabar{
    .vm-navbar--item {
      padding: 5px 10px;
      margin: 0px 10px;
      .router-link-active {
        i {
          color: rgba(var(--primary),1);
        }
        ~.vm-navbar-after {
            width: 100%;
        }
      }
      span {
        margin-top: 3px;
      }
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
}
.heading {
  min-width: 180px;
  padding: 2px 12px;
  h4 {
    padding-top: 3px;
  }
}
.nonotifications {
  text-align: center;
}
</style>
