<template>
  <v-app>
    <v-layout class="rounded rounded-md">
      <v-app-bar color="surface-variant" title="Math">
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-app-bar>
      <v-navigation-drawer>
        <v-list nav>
          <v-list-item to="/" prepend-icon="mdi-email" title="Inbox" value="inbox"></v-list-item>
          <v-list-item to="/auth" prepend-icon="mdi-account-supervisor-circle" title="登录" value="supervisors"></v-list-item>
          <v-list-item prepend-icon="mdi-clock-start" title="Clock-in" value="clockin"></v-list-item>
          <v-list-item prepend-icon="mdi-clock-start" :title="token" value="clockin"></v-list-item>
          <v-list-item prepend-icon="mdi-clock-start" title="Clock-in" value="clockin"></v-list-item>
        </v-list>
      </v-navigation-drawer>
      <v-main class="d-flex align-center justify-center" style="min-height: 300px;">
        <router-view></router-view>
      </v-main>
    </v-layout>
    <!-- <v-main>
      <router-view />
    </v-main> -->
  </v-app>
</template>

<script lang="ts" setup>

import { ref } from 'vue';
import { useAuthStore } from './store/auth';

const authStore = useAuthStore();
const token = ref(authStore.token);

</script>
