<template>
  <q-layout view="hHh Lpr fFf">

    <!-- HEADER -->
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round icon="menu" @click="drawer = !drawer" />
        <q-toolbar-title>Hackathon 25 | Digitale Helfer für Dart (Navbar ist nur fürs testen da)</q-toolbar-title>
      </q-toolbar>
    </q-header>

    <!-- SIDEBAR / DRAWER -->
    <q-drawer v-model="drawer" show-if-above bordered>
      <q-list>

        <q-item clickable v-ripple to="/">
          <q-item-section>
            Home
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple to="/rules">
          <q-item-section>
            Rules
          </q-item-section>
        </q-item>

        <q-expansion-item
          label="User"
          icon="folder"
          dense
          expand-separator
          switch-toggle-side
        >
          <q-list padding>

            <q-item clickable v-ripple to="/user/username">
              <q-item-section>
                Set Username
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/user/settings">
              <q-item-section>
                User Settings
              </q-item-section>
            </q-item>

          </q-list>

        </q-expansion-item>

        

        <q-expansion-item
          label="Game"
          icon="folder"
          dense
          expand-separator
          switch-toggle-side
        >
          <q-list padding>

            <q-item clickable v-ripple to="/game/select">
              <q-item-section>
                Create Select Game Type
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/game/local/create">
              <q-item-section>
                Create Local Game
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/game/online/create">
              <q-item-section>
                Create Online Game
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/game/online/join">
              <q-item-section>
                Join Online Game
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/game">
              <q-item-section>
                Game
              </q-item-section>
            </q-item>

          </q-list>

        </q-expansion-item>

        

        <q-expansion-item
          label="Tests"
          icon="folder"
          dense
          expand-separator
          switch-toggle-side
        >
          <q-list padding>

            <q-item clickable v-ripple to="/test_DartPicker">
              <q-item-section>
                Dart Picker
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/test_NumbersPage">
              <q-item-section>
                Numbers Input
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple to="/test_WebSpeechApi">
              <q-item-section>
                Web Speech Api
              </q-item-section>
            </q-item>

          </q-list>
        </q-expansion-item>
      </q-list>
    </q-drawer>

    <!-- PAGE CONTAINER -->
    <q-page-container>
      <router-view />
    </q-page-container>

  </q-layout>
</template>

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