How to Fire Function On Layout In Mobile



  • 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() {
      // },
    },