Dynamic Bars, Sidebar Menu based on resolutions

[Jhon]

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,

[Christopher Issac Sunder K]

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:  

http://www.syncfusion.com/downloads/support/forum/142844/ze/Sidebar636501799  

Please check it and let us know if you have any concerns. 

  

Thanks,
Christo