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

const bottomNav = ref();
const drawer = ref();
</script>

<template>
  <v-app>
    <v-app-bar
      :collapse="false"
      :collapse-on-scroll="true"
      absolute
      color="orange accent-4"
      dark
      scroll-target="#scrolling-techniques-6"
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>IID Hausarbeit</v-toolbar-title>
      <template v-slot:extension>
        <v-tabs align-with-title>
          <v-tab>Aktuelles</v-tab>
          <v-tab>Chat</v-tab>
          <v-tab>Termine</v-tab>
        </v-tabs>
      </template>
    </v-app-bar>

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

    <v-navigation-drawer absolute bottom temporary v-model="drawer">
      <v-list nav dense>
        <v-list-item-group active-class="deep-purple--text text--accent-4">
          <v-list-item>
            <v-list-item-title>Foo</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>Bar</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>Fizz</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>Buzz</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>

    <v-bottom-navigation v-model="bottomNav">
      <v-btn value="recent">
        <span>Aktuelles</span>
        <v-icon>mdi-history</v-icon>
      </v-btn>
      <v-btn value="favorites">
        <span>Chat</span>
        <v-icon>mdi-heart</v-icon>
      </v-btn>
      <v-btn value="nearby">
        <span>Termine</span>
        <v-icon>mdi-map-marker</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>
