<script setup lang="ts">
import { ref } from 'vue';

const drawer = ref(false)
</script>

<template>
  <v-app-bar color="pink-lighten-3" scroll-behavior="elevate">
    <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
    <v-app-bar-title>Isekai Slow Life Calculator</v-app-bar-title>
  </v-app-bar>
  <v-navigation-drawer v-model="drawer" app bottom>
    <v-list nav>
      <v-list-item :to="{ name: 'home' }">
        <v-list-item-title>Isekai: Slow Life Calc</v-list-item-title>
      </v-list-item>
      <v-divider></v-divider>
      <v-list-item :to="{ name: 'blessing-power' }">
        <v-list-item-title>Blessing Power</v-list-item-title>
      </v-list-item>
      <v-list-item :to="{ name: 'fellow-power' }">
        <v-list-item-title>Fellow Power</v-list-item-title>
      </v-list-item>
      <v-list-item :to="{ name: 'intimacy-power' }">
        <v-list-item-title>Intimacy Power</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>
