<template>
  <v-app-bar>
    <v-app-bar-nav-icon @click="drawerActive = !drawerActive"></v-app-bar-nav-icon>
  </v-app-bar>
  <v-navigation-drawer v-model="drawerActive" app width="250">
    <v-list-item title="Vue Utilities" subtitle="powered by vuetify"></v-list-item>
    <v-divider></v-divider>
    <v-list>
      <!-- Navigation Links -->
      <v-list-item
        to="/text-to-mermaid"
        router
        exact
        active-class="v-list-item--active"
        prepend-icon="mdi-chart-bar"
      >
        <v-list-item-title>Text to Mermaid</v-list-item-title>
      </v-list-item>

      <v-list-item
        to="/text-to-markdown"
        router
        exact
        active-class="v-list-item--active"
        prepend-icon="mdi-language-markdown-outline"
      >
        <v-list-item-title>Text to Markdown</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script setup>
import { ref } from 'vue'
const drawerActive = ref(true)
</script>

<style scoped>
/* No custom styles yet */
</style>