<template>
	<div class="dashboard">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="container">
        <div class="navbar-brand">
          <div class="navbar-item">
            <img class="dashboard-logo" src="../img/logo.png" aria-hidden="true">
            <h1 class="dashboard-title">Zeppelin Dashboard</h1>
          </div>
        </div>

        <div class="navbar-menu is-active">
          <div class="navbar-start">
            <router-link to="/dashboard" class="navbar-item">Guilds</router-link>
            <a href="#" class="navbar-item">Docs</a>
            <a href="javascript:void(0)" class="navbar-item" v-on:click="logout()">Log out</a>
          </div>
        </div>
      </div>
    </nav>

    <div class="section">
      <div class="container">
        <router-view></router-view>
      </div>
    </div>
	</div>
</template>

<style scoped>
  .dashboard-logo {
    margin-right: 12px;
  }

  .dashboard-title {
    font-weight: 600;
  }
</style>

<script>
  export default {
    async mounted() {
      await import("../style/dashboard.scss");
    },
    methods: {
      async logout() {
        await this.$store.dispatch("auth/logout");
        this.$router.push('/');
      }
    },
  };
</script>
