<script lang="ts">
import { defineComponent } from "vue";
import { LOGOUT } from "./store/mutation-types";

export default defineComponent({
  computed: {
    loggedIn() {
      return this.$store.state.Session.Token;
    }
  },
  methods: {
    logout () {
      this.$store.commit(LOGOUT);
      this.$router.push("/login")
    },
    toggleMenu () {
      this.$store.commit("toggleMenu");
    }
  },
  beforeCreate () {
    this.$store.commit("initializeStore");
  }
})
</script>

<template>
  <div class="box-border flex-row w-full">
    <div class="flex bg-gray-400 p-4 m-2 rounded-lg">
      <span class="flex-1" @click="toggleMenu">Home</span>

      <span class="flex-1">{{$store.getters.CurrentBudget.Name}}</span>

      <div class="flex flex-1 flex-row justify-end -mx-4">
        <router-link class="mx-4" v-if="loggedIn" to="/dashboard">Dashboard</router-link>
        <router-link class="mx-4" v-if="!loggedIn" to="/login">Login</router-link>
        <a class="mx-4" v-if="loggedIn" @click="logout">Logout</a>
      </div>
    </div>

    <div :class="$store.state.ShowMenu ? 'visible' : 'hidden'">
      <router-view name="sidebar"></router-view>
    </div>
  
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
