<template>
  <q-layout view="lHh Lpr lFf" style="background-color: #f8fafc;">
    <q-drawer
      v-model="ld.leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
    >
      <q-scroll-area class="fit">
        <q-list>
          <q-item-label header>
            <q-img src="notitek.png" width="120px" class="q-mb-lg"/>
            <br/>
            Bordro Eşleme
            <br/>
            {{ $VERSION.version }}
            <span style="font-size:0.7rem;">
                {{ $VERSION.build }}
            </span>
          </q-item-label>

          <template v-for="m in ld.menu" :key="m.grantKey">
            <q-item :to="m.to" v-if="!m.children" active-class="text-pcolor1">
              <q-item-section avatar v-if="m.icon">
                <q-icon :name="m.icon"/>
              </q-item-section>
              <q-item-section>
                <q-item-label>{{ m.label }}</q-item-label>
              </q-item-section>
            </q-item>
            <q-expansion-item
              v-else
              :icon="m.icon"
              :label="m.label"
            >
              <q-item v-for="c in m.children" :key="c.grantKey" :to="c.to" exact :inset-level=".5"  active-class="text-pcolor1">
                <q-item-section avatar v-if="c.icon">
                  <q-icon :name="c.icon"/>
                </q-item-section>
                <q-item-section>
                  <q-item-label>{{ c.label }}</q-item-label>
                </q-item-section>
              </q-item>
            </q-expansion-item>
          </template>


        </q-list>
      </q-scroll-area>
    </q-drawer>

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

<script setup>
import { $VERSION } from 'boot/version'
import { inject, reactive } from 'vue'
import { useLoginStore } from 'stores/login'
import { menu } from 'src/lib/menu'

const loginStore = useLoginStore()

const ld = reactive({
  leftDrawerOpen: true,
  menu: menu(),
})

const bus = inject('bus') // inside setup()
bus.on('toggleLeftDrawerOpen', () => {
  ld.leftDrawerOpen = !ld.leftDrawerOpen
})

const logout = function () {
  loginStore.logout()
}

</script>

