How to make Drawer to a Component

[muoname]

I'm quite new to Vue and Quasar and I'm currently using it with Vite on a rails project.
Since the drawer would be a redundant feature throughout the app I was thinking of making it into a component but I can't seem to toggle it within the main App.vue file

Codes:

App.vue

Drawer.vue

How can I make it so that with the button on App.vue will open the drawer component in Drawer.vue?

[pratik227]

Drawer.vue

<template>
  <q-drawer
    :model-value="drawer"
    :width="200"
    :breakpoint="500"
    overlay
    bordered
    class="bg-grey-3"
  >
    <q-scroll-area class="fit">
      <q-list>

        <template v-for="(menuItem, index) in menuList" :key="index">
          <q-item clickable :active="menuItem.label === 'Outbox'" v-ripple>
            <q-item-section avatar>
              <q-icon :name="menuItem.icon"/>
            </q-item-section>
            <q-item-section>
              {{ menuItem.label }}
            </q-item-section>
          </q-item>
          <q-separator :key="'sep' + index" v-if="menuItem.separator"/>
        </template>

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


<script>

const menuList = [
  {
    icon: 'inbox',
    label: 'Inbox',
    separator: true
  },
  {
    icon: 'send',
    label: 'Outbox',
    separator: false
  },
  {
    icon: 'delete',
    label: 'Trash',
    separator: false
  },
  {
    icon: 'error',
    label: 'Spam',
    separator: true
  },
  {
    icon: 'settings',
    label: 'Settings',
    separator: false
  },
  {
    icon: 'feedback',
    label: 'Send Feedback',
    separator: false
  },
  {
    icon: 'help',
    iconColor: 'primary',
    label: 'Help',
    separator: false
  }
]
import {defineComponent, ref} from 'vue'

export default defineComponent({
  name: "Drawer",
  setup() {
    return {
      menuList
    }
  },
  props:["drawer"]
})
</script>

<style scoped>

</style>

App.vue

<template>
  <q-layout view="hHh Lpr lff" container style="height: 300px" class="shadow-2 rounded-borders">
    <q-header elevated class="bg-black">
      <q-toolbar>
        <q-btn flat @click="drawer = !drawer" round dense icon="menu"/>
      </q-toolbar>
    </q-header>
    <drawer :drawer="drawer"></drawer>
    <q-page-container>
      <q-page padding>

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

<script>
import {defineComponent, ref} from 'vue'
import Drawer from "components/Drawer.vue";

export default defineComponent({
  name: 'App',
  components: {Drawer},
  setup() {
    return {
      drawer: ref(true)
    }
  }
})
</script>