1. Home
  2. Forum
  3. Blazor
  4. Sidebar in Mainlayout in .net8

Sidebar in Mainlayout in .net8

Hi,

Is it possible to get a sample of the Sidebar component working in the MainLayout.razor in a .net8 Web App with interactivity set per page/component? I cannot seem to get it to render in the MainLayout and I want a sidebar to appear across all of my pages


Thanks


7 Replies
PM Prasanth Madhaiyan Syncfusion Team February 13, 2024 09:52 AM UTC

Hi Forash,


Greetings from Syncfusion support.


Based on the shared details, we understand that your requirement is to render the Blazor Sidebar component on the .NET 8 application MainLayout.razor page. To achieve this, directly render the Blazor Sidebar component on the MainLayout.razor page in the .NET 8 application, and you just need to add the @rendermode InteractiveServer in the .NET 8 application Routes.razor page at your end.


[Routes.razor]


@rendermode InteractiveServer

...


For your reference, we have attached the sample.


Sample: Attached as a zip file.


Check out the attached sample and let us know if you need any further assistance.


Regards,

Prasanth Madhaiyan.


Attachment: BlazorDotNet8SidebarSample_865dbf3d.zip

FO Forash replied to Prasanth Madhaiyan February 13, 2024 01:34 PM UTC

Hi,


Thanks for this. What if interactivity type is set to WebAssembly? This would only seem to work if interactivity type is set to server or auto


PM Prasanth Madhaiyan Syncfusion Team February 14, 2024 12:08 PM UTC

Hi Forash,


Based on the shared details, we understand that your requirement is to render the Sidebar component on the MainLayout.Razor page within the .NET 8 Blazor WASM application and the interactivity type is set to WebAssembly at your end. To achieve this requirement in the Blazor WASM application, we have created the Sidebar.razor component page. Inside this page, we have included the relevant codes for our Sidebar component. After that, we have rendered the Sidebar.razor component inside the MainLayout.razor page using the @rendermode InteractiveWebAssembly.


Refer to the below code snippets.


[Sidebar.razor]


…

@*Initialized the Sidebar component*@

…


[MainLayout.razor]


@inherits LayoutComponentBase

@using BlazorAppWASM.Client.Pages

 

<Sidebar @rendermode="RenderMode.InteractiveWebAssembly"></Sidebar>

 

…


For your reference, we have attached the sample.


Sample: Attached as a zip file.


Check out the attached sample and let us know if you need any further assistance.


Regards,

Prasanth Madhaiyan.


Attachment: BlazorAppWASMSidebar_b278d1d4.zip

FO Forash replied to Prasanth Madhaiyan February 14, 2024 12:22 PM UTC

Hi,


This works in the sample. However if I try to navigate to a different page, the sidebar stays ontop of the content.


Please see attached screenshot where I try to navigate to the weather page in your attached sample.


Image_7805_1707913352494


PM Prasanth Madhaiyan Syncfusion Team March 1, 2024 12:57 PM UTC

Hi Forash,


To address the Blazor Sidebar component navigation-related mentioned scenario in the .NET 8 WASM Application, follow the instructions below.


  • Place or move the layout and navigation files of the server app's Components/Layout folder into the .Client project's Layout folder. Create a Layout folder in the .Client project if it doesn't exist.
  • Place or move the components of the server app's Components/Pages folder into the .Client project's Pages folder. Create a Pages folder in the .Client project if it doesn't exist.
  • Place or move the Routes component of the server app's Components folder into the .Client project's root folder.


Blob link: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#apply-a-render-mode-to-the-entire-app


After implementing the changes in the .NET 8 WASM Application, the Sidebar component is now rendered on the MainLayout.razor page, and the @rendermode InteractiveWebAssembly has been added to the Routes.razor page.


For your reference, we have attached the sample.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppWASMSidebarSample-953746295.zip


Check out the attached sample and let us know if you need any further assistance.


Regards,

Prasanth Madhaiyan.


JC Jay Chapani May 9, 2024 06:59 PM UTC

Can't we make it work with rendemode InteractiveAuto

?


LD LeoLavanya Dhanaraj Syncfusion Team May 10, 2024 05:11 PM UTC

Hi Jay,


We have prepared a Blazor Sidebar sample with the rendemode InteractiveAuto. However, we were not able to reproduce the navigation issue with the mentioned auto mode. For your reference, we have included the sample.


Check out the below code snippets and attached sample for further assistance.


[MainLayout.razor]

@using Syncfusion.Blazor.Navigations

<PageTitle>BlazorApp1</PageTitle>

<div class="page">

    <SfSidebar ID="sidebar" Width="250px">

        <NavMenu />

    </SfSidebar>

….

</div>

 

<style>

    #sidebar {

        background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);

    }

</style>


[Routes.razor]

@rendermode InteractiveAuto

….


Also, refer to the below documentation for further reference,


Documentation: https://blazor.syncfusion.com/documentation/sidebar/getting-started-webapp


Regards,

Leo Lavanya.


Attachment: Blazor_Sidebar_AutoRender_a67c22cd.zip

Loader.
Up arrow icon