How to hide sidebar in MainLayout

Question

Hallo,I have a SfSidebar in MainLayout which is working well. Now I want to hide the

SfSidebar using a Button in another razor page. I don't want to use type SidebarType.Push for the

SfSidebar because I want to keep the MediaQuery property.Best regards,Vince

Saravanan Jayavel · Answer

Hi Vince,Thank you for reaching out.Based on your requirement to hide the SfSidebar from another Razor page, we suggest you use a SidebarService. This service helps manage the sidebar's open/close state across your app.Here’s a quick guide: Step 1: Create a shared service to manage sidebar state [Sidebarservice.cs] public class SidebarService { public bool SidebarToggle { get; private set; } = true; public event Action OnChange; public void ToggleSidebar() { SidebarToggle = !SidebarToggle; NotifyStateChanged(); } private void NotifyStateChanged() => OnChange?.Invoke(); } Step 2: Register the service in Program.cs[Program.cs] builder.Services.AddScoped(); Step 3: Update MainLayout.razor to listen for change[MainLayout.razor] @code { protected override void OnInitialized() { base.OnInitialized(); Treedata.Add(new TreeData { NodeId = "01", NodeText = "Home", IconCss = "icon-microchip icon", NavigateUrl = "/error" }); Treedata.Add(new TreeData { NodeId = "02", NodeText = "Counter", IconCss = "icon-thumbs-up-alt icon", NavigateUrl = "/counter" }); Treedata.Add(new TreeData { NodeId = "03", NodeText = "Quick Start", IconCss = "icon-docs icon", NavigateUrl = "/" }); SidebarService.OnChange += StateHasChanged; } } Step 4: Trigger sidebar toggle from Counter Razor page Toggle Sidebar @code { private void ToggleSidebar() { SidebarService.ToggleSidebar(); } } For your reference we attached a sample. Sample: Attached as a zip file.Check out the sample and feel free to reach out if you need any further assistance.Regards,Saravanan JAttachment: BlazorDotNet8SidebarSample1505045154_496113f8.zip

Vince · Answer

Thank for the reply.

Your sample works well. I also tried to achieve it by using an EventCallback but that was not working correct without an SidebarService.

Now I have another question. If in your code sample Counter.razor is the start page and I want to hide the SideBar after starting the app (= Counter.razor is loaded), how do I have to change the code?

Best regards,

Vince

Counter.razor

is loaded), how do I have to change the code?Best regards,Vince

Saravanan Jayavel · Answer

Hi Vince,To prevent the SfSidebar from always being visible when your Blazor page or component loads, you need to understand its default behavior and make specific configuration changes.By default, when the sidebar Type is set to Auto, the component will be expanded on desktop and collapsed on mobile mode. It uses the Over type for mobile resolutions and the Push type for higher resolutions, regardless of the IsOpen property being set to false.To hide the sidebar during initial rendering, you should set the Type property to a specific value (like SidebarType.Over) rather than using Auto. This allows the IsOpen property to properly control the sidebar's visibility.Here's how you can configure it:[MainLayout.razor] [SidebarService.cs] public class SidebarService { public bool SidebarToggle { get; private set; } = false; public event Action OnChange; public void ToggleSidebar() { SidebarToggle = !SidebarToggle; NotifyStateChanged(); } private void NotifyStateChanged() => OnChange?.Invoke(); } With this configuration, the sidebar will respect the IsOpen value (SidebarToggle in this example) and remain closed during initial rendering when set to false.For your reference we attached a sample.Sample: Attached as zip file.Let us know if you need any further assistance.Regards,Saravanan JAttachment: BlazorDotNet8SidebarSample1505045154_258edb32.zip

Vince · Answer

Thanks for the reply Saravanan.I was aware of the "SidebarType.Push" type but as mentioned before the disadvantage is that the MediaQuery property is then not available any more...Best regards,Vince

Saravanan Jayavel · Answer

Hi Vince,When you set the MediaQuery property in the SfSidebar component, it will automatically:• Open the sidebar when the specified resolution condition is met• Close the sidebar when the resolution condition is not metThis is the intended behavior of the MediaQuery property, which is designed to control the sidebar's state based on screen resolution. Due to this design, when your application loads and the screen resolution matches the MediaQuery condition, the sidebar will always open regardless of any IsOpen property setting.If you need the sidebar to start in a closed state regardless of screen size, you can use the Created event to ensure the sidebar starts in a closed state.Here's how to implement this solution:[MainLayout.razor] public void oncreated() { SidebarService.SidebarToggle = false; } This will explicitly set the sidebar to be closed when it's first created, while still maintaining the MediaQuery functionality for responsive behavior.For your reference we attached a sample. Sample: Attached as a zip file.Check out the sample and let us know if you need any further assistance.Regards,Saravanan JAttachment: BlazorDotNet8SidebarSample1505045154_f31780ad.zip

Vince · Answer

Hello Saravanan,Now it works the way I want. Thanks for your reply.Best regards,Vince

Sivakumar ShunmugaSundaram · Answer

Hello Vince,We're glad to hear it's working as you wanted. You're welcome!Regards,Sivakumar S

Vince · Answer

Hallo

Sivakumar ,I unfortunetly found a problem with your code BlazorDotNet8SidebarSample1505045154_f31780ad.zip. At the start of the app the sidebar is not visible which is correct. But when you change the screen size then the sidebar is automatically put on the screen again without clicking the 'Toggle Sidebar' button. How can I prevent that the sidebar is shown automatically when resizing the screen?Best regards,Vince

Vince · Answer

Hallo Sivakumar,

I found a solution for the problem and adjusted your code so that not the Toggle of the Sidebar is adjusted in SidebarService but the Width. By giving it a start value of "0px" the Sidebar is invisible even when you resize the screen. Clicking the

'Toggle Sidebar' button is now changing the Width value from "0px" to "290px".Best regards,Vince

Saravanan Jayavel · Answer

Hi Vince,We’re glad to hear that the
solution you found adjusting the sidebar’s width instead of toggling its
visibility—is working well. Setting it to "0px" helps keep the
sidebar hidden even when resizing the screen.Please let us know if you need
any further assistance.Regards,Saravanan J

Vince · Answer

Hallo,I changed the project from InteractiveServer in client side WebAssembly and now I have some problems. The sidebar is still hiding and showing the way it should when toggling it which changing the Width of the sidebar from 0px to 300px. But the page stays behind the sidebar when the sidebar is visible while it should move to the right.Do you have a solution for this problem?

LeoLavanya Dhanaraj · Answer

Hi
Vince,Based
on the details you shared, we understand that you’re encountering an issue in
WebAssembly where the Sidebar should push the content, but the page remains
behind the Sidebar when it’s visible. To resolve this, we suggest setting the MediaQuery
property directly by specifying the minimum and maximum widths as needed. For
your reference, we have included the Sidebar WASM sample. In
this example, we set the min-width to 300px, so the Sidebar renders in an open
state, and there’s no need to open or close it programmatically inside the
OnInitialized method. The Sidebar will render in an open state on initial load
when the specified resolution is met; otherwise, it will remain closed.Refer the shared details and if we have misunderstood your
requirements/query, provide a clearer explanation along with the sample you
have tried. If possible, please share the issue replicated video footage. This
will help us validate the problem and offer a prompt solution.
Regards,Leo Lavanya DhanarajAttachment: BlazorWASM_d6eaabbd.zip

Vince · Answer

Hallo,Thanks for your reply.Unfortunetly your code sample 'BlazorWASM_d6eaabbd.zip' is not in line with the previous code samples and my adjustments in this thread where the Width is set using Width="@SidebarService.SidebarWidth":namespace ViewsWasm.Services{    public class SidebarService    {        public bool SidebarVisible { get; set; } = false;        public string SidebarWidth { get; set; } = "300px"; // Default width for the sidebar        public event Action OnChange;        public void ToggleSidebarWidth()        {            if (SidebarWidth == "0px")            {                SidebarWidth = "300px"; // Set the width to 300px when visible            }            else            {                SidebarWidth = "0px"; // Set the width to 0px when hidden            }            NotifyStateChanged();        }        public void ToggleSidebar()        {            SidebarVisible = !SidebarVisible;            NotifyStateChanged();        }        private void NotifyStateChanged() => OnChange?.Invoke();    }}Do you have another solution?

LeoLavanya Dhanaraj · Answer

Hi Vince,On further validation and understanding of your query, we understand that you want the Sidebar to remain hidden at all times (regardless of screen resolution) and to open/close only when the toggle button is clicked. In the code snippet you shared (SidebarService.cs), you are dynamically changing the Sidebar's width. We suspect this dynamic change is the root cause of your issue.We would like to let you know that our Sidebar is open on desktop windows and closed on mobile resolutions based on the media query value (min-width: 600px). So, to overcome/meet your need, you can alter the MediaQuery min-width value to one which is greater than your screen/browser resolution.For your reference, we have attached a modified sample and a demo video. Here, the Sidebar will only open when the screen size is more than the 2000px value only; until then, The Sidebar open/close will not happen on screen resize or initial rendering. It will only open/close when you click the toggle button. [MainLayout.razor]

Sidebar

Please review the details on your end and get back to us with where you are calling ToggleSidebarWidth in the component (e.g., external button clicks, inside any customer action, or inside a lifecycle method) if you have any further queries or assistance needed.Attachment: BlazorWASM_a1615e30.zip

Vince · Answer

Hallo,Thanks for your reply.I was able to get my original code working correctly while trying to implement your code sample. Even after deleting your code sample my original code with my SidebarService was working correctly. I do not know what the problem was but it is solved now.

Sivakumar ShunmugaSundaram · Answer

Hi Vince,Thank you for the update—We're happy to hear that your original SidebarService implementation is now working seamlessly in WebAssembly, with the content properly shifting as expected!If you ever pinpoint what flipped the switch or run into any inconsistent toggle behaviors, feel free to share more details.Regards,Sivakumar S