How to Fire Function On Layout In Mobile

[o'kennedy]

I had to use a custom call back for toggling the drawer that toggles both the q-layout-drawer and a custom app-drawer-footer component that uses v-show.

This seems to work well on the desktop break-point, however, not on mobile -> The Drawer toggles as expected in both cases but not the DrawerFooter ( the footer only toggles via the header-btn which is hidden when the drawer is open ). I think I need to use the @on-layout(Boolean) to fire it on the overlay(??) but I can not figure out how.

Below is the mothods I’m currently using.
Any help will be greatly appreciated!

data() {
  return {
    leftDrawerOpen: false,
    leftDrawerFooterShow: false,
  }
},

created() {
  // listen for menu btn in LayoutHeader.vue to toggle the leftDrawer
  this.$bus.$on('toggleLeftDrawer', this.LeftDrawerCallBack)
  // Animates the leftDrawer to open when app finishes loading
  this.LeftDrawerCallBack()
},

methods: {
  LeftDrawerCallBack() {
    // Toggle the leftDrawer
    this.leftDrawerOpen = !this.leftDrawerOpen
    // Toggle the LeftDrawerFooter
    this.leftDrawerFooterShow = !this.leftDrawerFooterShow
  },
  // loadRoute() {
  // },
},