<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <!-- <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="toggleLeftDrawer"
        /> -->
        <q-toolbar-title>
          Quasar App
        </q-toolbar-title>
        <q-btn to="/" flat icon="home" label="Home" />
        <q-btn to="/about" flat icon="info" label="About" />
        <LogoutButton/>

      </q-toolbar>
    </q-header>

    <!-- <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
    >
      <q-list>
        <q-item-label
          header
        >
          Essential Links
        </q-item-label>

        <EssentialLink
          v-for="link in linksList"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer> -->

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref } from 'vue'
import EssentialLink from 'components/EssentialLink.vue'
import LogoutButton from 'components/LogoutButton.vue'

defineOptions({
  name: 'MainLayout'
})

const linksList = [
  {
    title: '1',
    caption: 'quasar.dev',
    icon: 'school',
    link: '/login'
  },
  {
    title: '2',
    caption: 'github.com/quasarframework',
    icon: 'code',
    link: '/'
  },
  {
    title: '3',
    caption: 'chat.quasar.dev',
    icon: 'chat',
    link: '/chat'
  }
]

const leftDrawerOpen = ref(false)

function toggleLeftDrawer () {
  leftDrawerOpen.value = !leftDrawerOpen.value
}
</script>
