<template>
  <KActionNavBar
    @click-back-arrow="()=>
      console.log('clicBackArrow')"
    @toggle-right-drawer="toggleRightDrawer()"
  >
    <template #topLeftHeader>
      Top left header
    </template>
    <template #bottomHeader>
      Hola
    </template>
    <template #drawerContainer>
      <q-drawer
        id="drawer"
        ref="drawer"
        v-model="rightDrawerOpen"
        show-if-above
        bordered
        side="right"
        behavior="mobile"
        no-swipe-open
      >
        <div class="text-k-accent">
          hola
        </div>
      </q-drawer>
    </template>
  </KActionNavBar>
</template>
<script setup>
import { KActionNavBar } from '../components/ActionNavBar'
import { ref } from 'vue'

const rightDrawerOpen = ref(false)
function toggleRightDrawer () {
  rightDrawerOpen.value = !rightDrawerOpen.value
}
</script>

<style></style>
