We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dynamic Bars, Sidebar Menu based on resolutions

Hi,
I need your help to know how can I make similar functions like Outlook showcase, that, bars and sidebar menu change based on resolution. Like this:
Outlook showcase:
Maximized Windows
Resized windows
Resized Windows 2
What library or control did use to do this functionality.

Thanks!

Regards,

1 Reply

CI Christopher Issac Sunder K Syncfusion Team February 22, 2019 03:06 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon