Sidebar properties dependent upon media query

[Doug Simpson]

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."

[Sowmiya Padmanaban]

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.  

Sample link : https://ej2.syncfusion.com/blazor/documentation/sidebar/auto-close/?no-cache=1  

   

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. 

 

Feedback link : https://www.syncfusion.com/feedback/9456/support-for-dynamically-change-the-dock-state-of-sidebar 

 

Please let us know, if you have any concerns.  

  

Regards, 

Sowmiya.P 

   

[Keerthana Rajendran]

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. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Demo1528293104.zip 

Please get back to us if you need further assistance.


Regards,
Keerthana R.