Collapsing Sidebar on browser resize

Hello all,

I'm a bit new to Blazor and to a greater extent, Radzen Blazor components, so I apologize in advance if this is something easy, but I am getting stuck with the sidebar layout. My goal is to have the RadzenSidebar collapse when the browser size goes below 768px and have the RadzenSidebarToggle appear as a means to open it again. I have read that the most appropriate place to do this is in a @media directive in the CSS. The good news is that I've been able to get the RazdenSidebarToggle to hide itself using the display directive, however, I do not see where the Expanded property is available in CSS for the RadzenSidebar, it is a component property. I tried to use the display directive for the Sidebar thinking it might be a proxy to setting the Expanded property in CSS, but it only hides the sidebar, it does not collapse it to allow the body to take over the entire width of the form (this is the intended behavior).

Is there any method of linking the CSS to the Expanded property? Possibly some event that is fired and accessible to perform this property set? Any assistance is appreciated.

Thanks.

Hi @cfshuhl,

While there is no way to set the Expanded property of the Sidebar from CSS you can check this forum thread. It shows how we are dealing with a similar situation with the Radzen Blazor online demos.

Hello everyone, sorry to reopen this topic after so long but I have the same problem.

With the latest version at this time (2.65.4), when creating a new project and adding an empty page the sidebar does not behave properly when loading on small screens or when resizing the window.

Link

I think as comrade @cfshuhl says it should automatically adjust both when loading and resizing. Especially on small devices, in fact, in the Radzen designer it is displayed correctly:

I take the opportunity to ask if it is possible to not use the CSS generated by Radzen and replace it with my own? I would like to obtain a final finish similar to this (I have the necessary css) Metronic Live preview | Keenthemes

Thank you very much for the excellent work!

The file weighs 1.1MB but it cannot be uploaded.

image