Untitled

<template>
  <v-app>
    <v-app-bar v-if="storedData.$state.userInformation.username != undefined" density="compact" color="#CADCAE" prominent>
      <v-toolbar-title>Kawara Converter</v-toolbar-title>
      <v-btn @click="register">Register</v-btn>
      <v-btn @click="handleLogout" class="icon-button">
    <logoutIcon class="home-icon" />
  </v-btn>
    </v-app-bar>

    <!-- <v-navigation-drawer v-model="drawer" v-if="$route == 'Login'" temporary>
      <v-list density="compact" class="pt-0">
        <v-list-item v-for="(item, i) in items" :key="i" :value="item" color="primary" :to="item.path">
          <template v-slot:prepend>
            <v-icon :icon="item.icon"></v-icon>
          </template>
          <v-list-item-title v-text="item.title"></v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer> -->

    <v-main>
      <router-view></router-view>
    </v-main>
  </v-app>
</template>

<script>
import LogoutIcon from "vue-material-design-icons/Logout.vue"; 
import { useMainStore } from "../../mainStore";
export default {
  data() {
    return {
      storedData: useMainStore()
    }
  },
components: {
    LogoutIcon,
  },
  methods: {
    logout() {
      this.$router.push('/login'); 
      this.storedData.$state.userInformation = {} // from mainstore
    },
  },
};
</script>