Sidebar Not Showing in .Net8 Template Studio Project

[Philip Atha]

Greetings,

Not sure if I'm doing something wrong here. I've added the following sidebar snippet to my MainLayout.razor file:

@inherits LayoutComponentBase

<div class="page">

    <SfSidebar Type="SidebarType.Over" ShowBackdrop="true" Width="300px" DockSize="65px" EnableDock="true" @bind-IsOpen="SidebarToggle">
        <ChildContent>
            <div style="text-align: center;" class="text-content"> Sidebar </div>
            <NavMenu />
        </ChildContent>
    </SfSidebar>


    <main>
        <div class="top-row px-4">
        <a rel='nofollow' href="https://www.syncfusion.com/blazor-components/" target="_blank">Blazor Components</a>
        <a rel='nofollow' href="https://blazor.syncfusion.com/documentation/" target="_blank">User Guide</a>
        <a rel='nofollow' href="http://blazor.syncfusion.com/" target="_blank">View Demos</a>
        </div>


        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

I've made no changes to the Imports.razor file as these are already configured per the project generator. Yet I get no visible sidebar in the application on launch. No errors in the console or network traffic.

The project type is .Net 8.0 - Syncfusion Blazor Web App (.Net 8.0 LTS), Fluent Theme, Individual Accounts, Auto (Server + WASM), Per page/component interactivity.

The snippet is taken directly from the docs: https://blazor.syncfusion.com/documentation/sidebar/getting-started

Are there any known issues with .Net 8.0 LTS?

@Body

[Philip Atha]

After playing with this some more tonight, this appears to be related to the themes. If I disable the theme:

<!--<link rel="stylesheet" rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" />-->

I get the sidebar back, yet its still not behaving as expected.

[Amos]

I'm getting this same issue. 

[SureshRajan Alagarsamy]

Hi  Philip,

We have reviewed your query regarding the Sidebar component not working properly in the Blazor Web App when declared inside the MainLayout.razor page component. It is important to note that this is already know issue at out end. The reported issue occurs due to the Sidebar component's target not being properly assigned. Our resolution involved defining the render mode type in the Routes.razor component. This adjustment ensures the Sidebar component renders correctly while retaining all functionalities when we declared inside MainLayout.razor component.

However, this solution impacts authentication-type applications, leading to a persistent browser reloading issue. We have escalated this concern on Dot Net GitHub. You can find more details through the link below.

GitHub : https://github.com/dotnet/aspnetcore/issues/52686

Regards,
Suresh.

[Mahfoud Bouabdallah]

It's the same issue for me as well

[Jafar Ali Shahulhameed]

Hi Mahfoud,

We would like to inform you that as mentioned in the previous responses it is a known issue. We kindly suggest you to keep track of this thread for the further updates.

Feel free to get back to us if you need further assistance.

Regards,

Jafar

[James mcguire]

Can you explain exactly what to do here?  My POC app doesn't need authentication (yet), so it would be nice to work with sidebar.

Our resolution involved defining the render mode type in the Routes.razor component. This adjustment ensures the Sidebar component renders correctly while retaining all functionalities when we declared inside MainLayout.razor component.

[Jafar Ali Shahulhameed]

Hi James,

We understand that you are trying to utilize Syncfusion Sidebar component and not using an authentication with it and we would like to inform you that you can render the Sidebar component in the MainLayout.razor file and define render mode type in the routes.razor for rendering the Sidebar component without any issues.

Kindly get back to us if you need further assistance

Regards,

Jafar

[James mcguire]

Jafar, can you please provide an example to clarify?  Your response simply restated what SureshRajan stated on 12/26.

[Mahfoud Bouabdallah]

I encourage all participants to visit the GitHub link shared by SureshRajan Alagarsamy and leave a comment. This will hopefully expedite Microsoft’s response to the issue that has been open since December 2023 and has yet to be addressed.

GitHub : https://github.com/dotnet/aspnetcore/issues/52686

[Jafar Ali Shahulhameed]

Hi James,

We have prepared a sample and rendered the sidebar component in a MainLayout.razor page, also defining render mode type in the Routes.razor file. You can see that component has rendered without any issues. But in the case of authentication sample issue occurs while click the authentication page in the rendered sidebar.

As this is a known issues from dotnet, we have already raised a query regarding it. Kindly check the github link provided in the previous responses.

Kindly check out the shared sample and get back to us if you need further assistance.

Regards,

Jafar

Attachment: Sidebar_Mainlayout_beed4dd2.zip

[Mahfoud Bouabdallah]

Hello, SureshRajan Alagarsamy!

 I noticed that Mr. Stephen Halter (halter73) has contributed a fix.

To quote him: I submitted a pull request to the repository project to address the issue of continuous reloading: Sureshrajan-18/Blazor_.NET8-AuthorizeRouteView#1.

What do you think?

[Jafar Ali Shahulhameed]

Hi Mahfoud,

Yes, we have noticed the changed made on the shared repository. On making the suggested changes in our local sample, exception and automatic refreshment issues while clicking the authorization page got resolved. Refer the below github repository for the code changes,

Github: https://github.com/Sureshrajan-18/Blazor_.NET8-AuthorizeRouteView/pull/1/files

We have attached the sample for your reference,

Sample: Attached as zip file

Kindly check out the shared details and get back to us if you need further assistance

Regards,

Jafar

Attachment: BlazorAppAuth_Sample_f8c8533d.zip

[Mahfoud Bouabdallah]

Hello Jafar

First of all sorry for the very delayed response.

As for the continuous browser reloading, it is now fixed, but another problem occurred after the Sidebar collapsed, it does not appear again

[Jafar Ali Shahulhameed]

Hi Mahfoud,

We have made changes in the previously shared sample to meet your requirement to open and close the sidebar. Kindly refer the code changes below,

[MainLayout.razor]

 

<div class="top-row px-4" style="z-index:1111;padding-top:0px">

    <button @onclick="OpenClose">Toggle</button>

</div>

 

public void OpenClose()

{

    SidebarToggle = !SidebarToggle;

}

We have attached a sample for your reference,

Sample: Attached as zip file.

Kindly try out the shared details and get back to us if you need further assistance

Regards,

Jafar

Attachment: BlazorAppAuth_c1d7a4d0.zip

[Mahfoud Bouabdallah]

Hello Jafar

Thank you for the code snippet and the attached sample.

Perhaps I wasn’t clear in my previous question. The previous behavior of the sidebar was a collapsible icon menu (the icons still appear when collapsed). If possible, I would like to maintain this behavior.

Additionally, the new OpenClose button does not function on authentication pages.

Attachment: Syncfusion_Sidebar_Auto_Collapse_95b55f92.zip

[Jafar Ali Shahulhameed]

Hi Mahfoud,

We would like to inform you that we are internally working on the Sidebar rendering with SSR rendering in .Net 8 applications. This is planned for our Volume 2 release and you can track the status through the below feedback link

Feedback: https://www.syncfusion.com/feedback/57429/need-to-render-sidebar-component-in-net-8-ssr-mode

Kindly get back to us if you need further assistance.

Regards,

Jafar