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

Sidebar properties dependent upon media query

How do I combine the MediaQuery property with other properties on the Sidebar to get responsive material design effects?

For example, when the window is below 1000px wide, the sidebar will automatically hide from view until the user clicks a hamburger in the top menu bar to open it as a modal sidebar with a scrim over the content. When the window is greater than 1000px, clicking the hamburger to "close" only docks it (i.e. only sets the EnableDock to true) and EnableDock to false when "open."

2 Replies

SP Sowmiya Padmanaban Syncfusion Team October 11, 2019 12:25 PM UTC

Hi Doug,  
Thanks for contacting Syncfusion support.  
Query 1 – Closes the sidebar for particular width.  
We have checked your reported query regarding mediaquery . You can close the sidebar for the particular width by enabling the‘mediaQuery’ property in your sample level. Refer the below sample link for mediaQuery property.  
Query 2 – Dynamically Enabling dock state  
Currently, we have not provided support for dynamically enabling dock state in sidebar component. We have provided the support for dynamically change the type of the sidebar component.  However, we might consider this as a feature from our end, this will be included in any one of our upcoming release. Generally, we will plan the feature implementation based on feature rank, Wishlist plan and customer request count for some feature. Please be patience, until then. Please track the below feedback link for the feature status. 
Please let us know, if you have any concerns.  

KR Keerthana Rajendran Syncfusion Team October 1, 2021 12:09 PM UTC

Hi Doug,

Greetings from Syncfusion Support.

We would like to let you know that by setting the EnableDock to true and in a closed state, the sidebar dock icons will be displayed in both desktop and mobile resolutions. This is the default behavior of the Sidebar component. However, you can achieve this requirement (need to hide sidebar dock icons in mobile resolutions) at the application level. You can check the resolution at the application level and disable the EnableDock property if it is a mobile resolution.

For your reference, we have prepared a sample based on this in the below link. 

Please get back to us if you need further assistance.

Keerthana R. 

Live Chat Icon For mobile
Up arrow icon