<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import "style.scss";
</style>

<!-- Template -->
<template>
  <div class="component-container header-component">
    <b-navbar toggleable="md" type="light" variant="light">
      <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
      <b-navbar-brand href="javascript:void(0);" @click="headerBarIndexHandler()">
        <i class="fa fa-github" aria-hidden="true" style="font-size:1.5rem"></i>
        <span>Default Header</span>
      </b-navbar-brand>
      <b-collapse is-nav id="nav_collapse">
        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">

          <b-navbar-nav>
            <router-link to="/guide">
              <b-nav-item href="javascript:void(0);">
                GUIDE
              </b-nav-item>
            </router-link>
          </b-navbar-nav>

        </b-navbar-nav>
      </b-collapse>
    </b-navbar>

  </div>
</template>

<!-- Script -->
<script>
  import {mapGetters} from 'vuex';

  const _Header = {
    name: 'Header',
    created: function () {
    },
    updated: function () {
    },
    mounted: function () {
    },
    activated: function () {
    },
    data: function () {
      return {};
    },
    methods: {
      headerBarIndexHandler() {
        console.log('Header methods > headerBarIndexHandler');
        this.$router.push({path: '/'});
      }
    },
    components: {},
    computed: {
      ...mapGetters([])
    }
  };
  export default _Header;
</script>
