Thanks for the update; it works well!
fyi - I chose a slightly different approach based on the fact that I use a angular data service to load the treeview items and 'preserve' the open/closed status of the side bar. This allowed me to decouple the hamburger menu 'click' event from the side bar processing.
But primarily I kept the media query approach and modified it by processing the close event manually:
<ejs-sidebar id="sidebar-treeview" class="dock-menu" #sidebarTreeviewInstance [enablePersistence]='persistence'
[enableDock]='enableDock' [width]='width' [dockSize]='dockSize' (created)="onCreated($event)" style="visibility: hidden"
[target]='target' [mediaQuery]='mediaQuery' (close)='closeSidebarByWindowResize($event)'>
public closeSidebarByWindowResize(args: EventArgs) {
console.log('closeSidebarByWindowResize', args);
// isInteracted - Defines the boolean that returns true when the Sidebar is closed by user interaction, otherwise returns false.
if (!args.isInteracted) {
const sidebarIsOpenning = false;
this.processWindowResizeSidebarToggle(sidebarIsOpenning);
}
}
private processWindowResizeSidebarToggle(currentSideIsOpen: boolean) {
this.sidebarOptions.getSidebarOptions()
.pipe(take(1)).subscribe(data => {
console.log('processWindowResizeSidebarToggle: ', this.sidebarTreeviewInstance.isOpen, data.sidebarOpen, currentSideIsOpen);
if (data.sidebarOpen !== currentSideIsOpen) {
const newOptions = data;
newOptions.sidebarOpen = currentSideIsOpen;
this.sidebarOptions.setSidebarOptions(newOptions);
}
});
}
By subscribing to sidebar status in the service I was, when the sidebar open/close status changed, able to finally process this locally:
private processSidebarToggle(sideBarToBeOpen: boolean) {
console.log('processSidebarToggle: prior state vs desired', this.sidebarTreeviewInstance.isOpen, sideBarToBeOpen);
if (this.sidebarTreeviewInstance.isOpen !== sideBarToBeOpen) {
this.sidebarTreeviewInstance.toggle();
}
if (this.sidebarTreeviewInstance.isOpen) {
this.processOpenSideBar();
} else {
this.processClosedSideBar();
}
}
I can then add orremove the mediaQuery string and apply the css style required.
The main advantage is that shrinking the window, with the status bar open, will still cause it to close as before; this handles the window resize 'gracefully' and is a 'better user experience'. Closing the status bar at any point causes it to remain closed until a manual or programmatic intervention causes it to open it again.
Hope that makes sense!? And thank you for all your help
Tim
