Hook to toggle sidebar visibility programmatically

[chrismayer]

I'd like to have a common hook to toggle the visibility of the app sidebar programmatically (not by a user click). I have a need for that in several Wegue applications and maybe there is chance to add this into the Wegue core functionality. I see differerent possibilities to achieve that:

By event

One possibility would be to define an app-wide event like 'wgu-sidebar-toggle', on which the AppSidebar.vue listens to:

WguEventBus.$on('wgu-sidebar-toggle', () => {
  this.toggleOpen();
});

Once any custom app code emits this event (WguEventBus.$emit('wgu-sidebar-toggle');) the visibility of the sidebar would be toggled.

By ref

Another possibility would be to add a ref for the </wgu-app-sidebar ref="wgu-app-sidebar"> in the WguAppTemplate.vue. Then at least in the WguApp.vue of the app the sidebar would be accessible via this.$refs['wgu-app-sidebar'] and could be toggled by this.$refs['wgu-app-sidebar'].toggleOpen(). But here I see the problem that the WguAppTemplate.vue of existing apps needs to be updated and is not that flexible than an event.

Since @fschmenger is the architect of the sidebar concept I really would appreciate his opinion on the best approach from his point of view (maybe another besides the 2 above) or if there is already a possibility for that, which I missed. Thanks in advance.

[fschmenger]

Hi Christian,

I would prefer the event bus based approach, as this is considered best practice for communication between hierarchically unrelated components (if not using vuex).

In contrast the ref based approach has the problem, that you have to either store a ref to the toplevel app component itself to make the sidebar accessible or inject it into the global namespace. Using a method (e.g. toggleOpen) to modify the state of the component is not a clean approach. It could be feasible to turn the existing visible property into a 2 way binding (v-model based) variable, so it can be just toggled programmatically, but it`s a bit more cumbersome to implement.

The solution for an event hook in AppSidebar.vue should be as simple as that (untested)

created () {
  WguEventBus.$on('wgu-sidebar-toggle', () => {
    this.sidebarOpen = !this.sidebarOpen
  });
}

[chrismayer]

Hi @fschmenger , thanks for your feedback. I totally agree that it should be done by event and your provided code exactly matches to the one I am currently using in patched Wegue applications 👍 I'll come up with a PR for this.