Hi Jhon,
Thank you for contacting Syncfusion support.
We have checked your requirement - “To make functionality similar to outlook using sidebar component“. mediaQuery property of Sidebar component specifies whether Sidebar needs to be opened or closed when the specified resolution meets. The showBackDrop property specifies whether or not to apply overlay options to main content when sidebar is in open state and set the type property as “Over” to float the sidebar over the main content. You can use these APIs to achieve your mentioned requirement. Please check below code snippet,
|
//Sidebar created event
function onCreated() {
var defaultSidebarOBJ = document.getElementById('default-sidebar').ej2_instances[0];
//Set mediaQuery property to 900px(When window size is below 900px sidebar automatically closes)
defaultSidebarOBJ.mediaQuery = window.matchMedia('(min-width: 900px)');
}
window.addEventListener("resize", function () {
if (window.innerWidth < 900) {
//When resolution is below mediaQuery resolution enable showBackDrop and set type to “Over”
defaultSidebarOBJ.showBackdrop = true;
defaultSidebarOBJ.type = "Over";
.
.
.
} else {
//When resolution is below mediaQuery resolution enable showBackDrop and set type to “Over”
defaultSidebarOBJ.showBackdrop = false;
defaultSidebarOBJ.type = "Push";
.
.
.
}
}); |
We have prepared a sample for your reference.
Sample:
Please check it and let us know if you have any concerns.
Thanks,
Christo
