1. Home
  2. Forum
  3. Blazor
  4. Sidebar Docking in MainLayout (non-body element) problem (.Net 9.0)

Sidebar Docking in MainLayout (non-body element) problem (.Net 9.0)

I've recently started testing Syncfusion components for blazor app development and ran into what should be a very simple problem. I looked at a lot of examples, but they are all partial solutions.

What do I want to achieve? I want to use Sidebar component in MainLayout.razor page.

The page has a 'header' and a 'footer' and between them is the main content. Within that content, on the left side is the 'docked' Sidebar (Type Push), and to the right of it is the content of the corresponding pages that are selected by clicking on the menu options in the Sidebar.


Picture1.png

This is shown in picture 1. 


Picture2.png

Docking works well as you can see in picture 2.

However, when a menu option is selected from the sidebar, the page itself is not displayed to the right of the sidebar but simply goes below it. The problem can be seen in picture number 3.

Picture3.png

How this can be solved?

Additionally, I would like to point out that the project uses the 'Fluent2' theme.

Here is the source code. 

MainLayout.razor:

@inherits LayoutComponentBase


<div class="page">
   <header>
      <NavBar></NavBar>
   </header>
   <main style="background-color: antiquewhite">
      <Sidebar/>
      <div id="main-sidebar" class="e-main-content">
         <article class="content px-4">
            @Body
         </article>
      </div>
   </main>
   <footer>
      <SfAppBar Position="AppBarPosition.Bottom" Mode="AppBarMode.Dense" ColorMode="AppBarColor.Primary">
         <AppBarSpacer></AppBarSpacer>
         <span style="white-space: nowrap">Company Name Ltd © 2025, All rights reserved.</span>
      </SfAppBar>
   </footer>
</div>


<div id="blazor-error-ui" data-nosnippet>
   An unhandled error has occurred.
   <a rel='nofollow' href="." class="reload">Reload</a>
   <span class="dismiss">🗙</span>
</div>


MainLayout.razor.css:

body {
   margin: 0;
   padding: 0;
}


header, footer {
   background-color: #f0f0f0;
   padding: 0;
   text-align: center;
   position: fixed;
   height: 40px;
   width: 100%;
}


header {
   top: 0;
}


footer {
   bottom: 0;
}


.page {
   position: relative;
   display: flex;
   flex-direction: column;
}


main {
   flex: 1;
   position: relative;
   top: 40px;
   height: calc(100dvh - 80px);
   overflow-y: auto;
}


@media (max-width: 640.98px) {
}


@media (min-width: 641px) {
   .page {
      flex-direction: row;
   }
}


#blazor-error-ui {
   color-scheme: light only;
   background: lightyellow;
   bottom: 0;
   box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
   box-sizing: border-box;
   display: none;
   left: 0;
   padding: 0.6rem 1.25rem 0.7rem 1.25rem;
   position: fixed;
   width: 100%;
   z-index: 1000;
}


   #blazor-error-ui .dismiss {
      cursor: pointer;
      position: absolute;
      right: 0.75rem;
      top: 0.5rem;
   }


Sidebar.razor:

@rendermode InteractiveServer



@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Lists


<SfSidebar Width="220px" EnableDock="true" DockSize="38px" Animate="false" Target="e-main-content" Type="SidebarType.Push" IsOpen="_sidebarOpen">
   <ChildContent>
      <div style="overflow: hidden">
         <div>
            <SfButton IconCss="e-icons e-justify" @onclick="OnToggleClick"></SfButton>
         </div>
         <div>
            <SfMenu TValue="MenuItem" Orientation="Orientation.Vertical">
               <MenuItems>
                  <MenuItem style="width: 100%" Text="Home" Url="/" IconCss="e-icons e-home sidebar-icons"></MenuItem>
                  <MenuItem Text="Counter" Url="/counter" IconCss="e-icons e-edit sidebar-icons"></MenuItem>
                  <MenuItem Text="Weather" Url="/weather" IconCss="e-icons e-justify sidebar-icons"></MenuItem>
               </MenuItems>
            </SfMenu>
         </div>
      </div>
   </ChildContent>
</SfSidebar>


<style>
   .e-menu-container {
      width: 100%;
   }


   .e-menu-container .e-ul .e-menu-item {
      width: 100%;
      background-color: cadetblue;
   }


   .sidebar-icons {
      color: var(--color-sf-primary) !important;
      padding-right: 10px;
   }
</style>


@code {
   private bool _sidebarOpen = false;


   private void OnToggleClick(MouseEventArgs args) {
      _sidebarOpen = !_sidebarOpen;
   }
}

I have also prepared a ZIP file that contains the entire project.

Thanks in advance for your reply.




Attachment: SyncfusionBlazorApp2_f5be2d5f.zip

13 Replies 1 reply marked as answer
PM Prasanth Madhaiyan Syncfusion Team December 31, 2024 02:42 PM UTC

Hi Aleksandar,


Greetings from Syncfusion support.


Based on the shared details, we understand that the Blazor Sidebar component is not pushing the content properly when navigating razor pages through menu items. However, while checking your shared sample, we noticed that you rendered the Sidebar component in a separate Razor file and set its content as @Body in the MainLayout page. Additionally, you did not provide a class selector for the target property. However, to address this issue and ensure the content is pushed properly, we rendered the Sidebar component directly in the MainLayout.razor page with its @Body content.


Refer to the below code snippets.


[MainLayout.razor]


<div class="page">

   <header>

      <NavBar></NavBar>

   </header>

   <main style="background-color: antiquewhite">

    <SfSidebar Width="220px" EnableDock="true" DockSize="38px" Animate="false" Target=".main-content" Type="SidebarType.Push" IsOpen="_sidebarOpen">

        <ChildContent>

            <div style="overflow: hidden">

                <div>

                    <SfButton IconCss="e-icons e-justify" @onclick="OnToggleClick"></SfButton>

                </div>

                <div>

                    <SfMenu TValue="MenuItem" Orientation="Orientation.Vertical">

                        <MenuItems>

                            <MenuItem style="width: 100%" Text="Home" Url="/" IconCss="e-icons e-home sidebar-icons"></MenuItem>

                            <MenuItem Text="Counter" Url="/counter" IconCss="e-icons e-edit sidebar-icons"></MenuItem>

                            <MenuItem Text="Weather" Url="/weather" IconCss="e-icons e-justify sidebar-icons"></MenuItem>

                        </MenuItems>

                    </SfMenu>

                </div>

            </div>

        </ChildContent>

    </SfSidebar>

    <div class="main-content" id="main-text">

        <div>

            <div class="content px-4" style="padding:20px">

                @Body

            </div>

        </div>

        <!--end of main content declaration -->

    </div>

   </main>

   <footer>

      <SfAppBar Position="AppBarPosition.Bottom" Mode="AppBarMode.Dense" ColorMode="AppBarColor.Primary">

         <AppBarSpacer></AppBarSpacer>

         <span style="white-space: nowrap">Company Name Ltd © 2025, All rights reserved.</span>

      </SfAppBar>

   </footer>

</div>

 

 

<style>

    …

 

    .e-sidebar {

        top: 48px;

    }

 

    .main-content {

        height: 650px;

    }

</style>


Additionally, the Blazor Sidebar component does not have a Height property or responsive height support because it is a layout component. Its height is determined by the height of its main content, which is the default behavior of the Blazor Sidebar component. So, we set static height for the main-content element.


To ensure the sidebar component functions properly when rendering in the MainLayout.razor page for the .NET 9 sample, you need to specify the rendermode in the App.razor page as shown below.

[App.razor]


…

<body>

    <Routes @rendermode="InteractiveServer"/>

    …

</body>

 

</html>


For your reference, we have attached the sample and screenshots.


Sample: Attached as a zip file.


Screenshots:


Dock mode

Default mode


Check out the shared details and let us know if you need any further assistance.


Regards,

Prasanth Madhaiyan.


Attachment: SyncfusionBlazorApp2_735f0e9c.zip

Marked as answer
AL Aleksandar January 2, 2025 03:35 PM UTC

First of all I would like to thank you for your quick reply and then I would like to wish you a happy and prosperous New Year. :)


AL Aleksandar January 2, 2025 08:36 PM UTC

However, I noticed a new problem. When navigating to one of the pages, the content of the <PageTitle> html element is not displayed in the browser...

Does it have something to do with a change to the <Routes> component?


LD LeoLavanya Dhanaraj Syncfusion Team January 3, 2025 01:02 PM UTC

Hi Aleksandar,

We would like to inform that the <PageTitle> in Blazor is specifically designed to set the content of the <title> tag in the document's <head> section, which determines the title displayed on the browser tab. It does not render anything visible in the UI by design. It does not have a visual representation in the body of the page. If you want to display the page title on the webpage itself, you need to explicitly add an element (e.g., <h1>, <h2>, or <div>) in the Blazor component.


<PageTitle>Index</PageTitle>  <!-- Sets the browser tab title -->

<h1> Index </h1>                        <!-- Displays the title on the page -->


Also, if you want to maintain a single source of truth for the page title, you can define it in a variable and use it in both the <PageTitle> component and the visible content.


@code {

    private string pageTitle = " Index "; // Define the page title

}

<PageTitle>@pageTitle</PageTitle>    <!-- Sets the browser tab title -->

<h1>@pageTitle</h1>                            <!-- Displays the title on the page -->


To know more about the PageTitle, please check the below links.


https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.web.pagetitle?view=aspnetcore-9.0

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/control-head-content?view=aspnetcore-9.0#set-a-page-title-for-components-via-a-layout

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/control-head-content?view=aspnetcore-9.0#control-head-content-in-a-razor-component
https://stackoverflow.com/questions/72944916/pagetitle-template-component-method


Regards,

Leo Lavanya Dhanaraj


AL Aleksandar January 4, 2025 02:43 PM UTC

Thank you for your quick response. It seems that my question was not clear enough.

The <PageTigle> element refers to the title of the browser tab and that is completely clear. That's exactly what I meant when I asked the question.

So, I opened the project that you gave in response to the previous question. When navigating from one page to another, browser tab title DOESN'T CHANGE and that's the problem.

If the App.razor file is changed from <Routes @rendermode='InteractiveServer' /> to <Routes />, then <PageTigle> works.

So, the question is what should be done now?



PM Prasanth Madhaiyan Syncfusion Team January 6, 2025 12:49 PM UTC

Hi Aleksandar,


To change the browser tab title based on Razor page navigation in a Blazor .NET 9 application, you need to set @rendermode="InteractiveServer" for the <HeadOutlet/> in the App.razor file.


Refer to the below code snippets.


[App.razor]


<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base rel='nofollow' href="/" />

    <link rel="stylesheet" rel='nofollow' href="@Assets["bootstrap/bootstrap.min.css"]" />

    <link rel="stylesheet" rel='nofollow' href="@Assets["app.css"]" />

    <link rel="stylesheet" rel='nofollow' href="@Assets["SyncfusionBlazorApp2.styles.css"]" />

               <link rel='nofollow' href="syncfusion-blazor-icons.css" rel="stylesheet" />

    <ImportMap />

    <link rel="icon" type="image/png" rel='nofollow' href="favicon.png" />

              

    <HeadOutlet @rendermode="InteractiveServer"/>

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

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

</head>

 

<body>

    <Routes @rendermode="InteractiveServer"/>

    <script src="_framework/blazor.web.js"></script>

</body>

 

</html>

 


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: SyncfusionBlazorApp2_95f38b86.zip

AL Aleksandar January 6, 2025 04:45 PM UTC

It works now. Thank you very much. 


KG Kalpana Ganesan Syncfusion Team January 7, 2025 04:29 AM UTC

Hi Aleksandar,


Glad it worked. Please reach out to us for further assistance.


Regards,

Kalpana.


SS Sergio Sant'Anna February 25, 2025 03:13 PM UTC

Hi,

Based on the first example sent by Aleksandar, I’m looking for a way to use the Sidebar and other interactive components in the MainLayout without having to define the rendering mode globally, which was the solution applied here.

I have a use case where the application needs to maintain flexibility in the rendering mode per-page/component. So far, the only way I’ve found is to keep the interactive components in a separate file from the MainLayout so that they can have their own defined rendering mode.

Would it be possible to achieve this using the class selector in the Target property and perhaps some additional code or custom CSS?

Could you please provide an example where this would work?


Regards,

Sergio Sant'Anna


PM Prasanth Madhaiyan Syncfusion Team February 26, 2025 12:35 PM UTC

Hi Sergio Sant'Anna,


Based on the shared details, rendering the Sidebar component in a Razor page and using it in the MainLayout page will not properly push content while navigating to another page. However, we would like to inform you that the Blazor Sidebar component works correctly within the MainLayout when InteractiveMode is set globally.

We suggest following this approach, and we have attached a sample for your reference. 

Sample: Attached as a zip file.

Please review the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.


Attachment: SyncfusionBlazorApp2_10c7a125.zip

SS Sergio Sant'Anna February 26, 2025 01:17 PM UTC

Hi Prasanth Madhaiyan,


Thank you for the quick response.


Unfortunately, global interactivity isn’t an option for this project, and we’d like to maintain consistency for Syncfusion components throughout the application.


Just as an example, the MudBlazor library allows this with a small JavaScript snippet (as shown in this example: "https://github.com/MudBlazor/MudBlazor/issues/7511#issuecomment-1814664202"), and it would be great if we had a similar solution with Syncfusion.



Thank you,

Sérgio Sant'Anna


PM Prasanth Madhaiyan Syncfusion Team February 27, 2025 02:54 PM UTC

Hi Sergio Sant'Anna,

We are currently validating your reported query on our end in the Blazor Sidebar component and require additional time for this. We will provide you with further details on or before March 3, 2025. We appreciate your patience until then.

Regards,

Prasanth Madhaiyan.


PM Prasanth Madhaiyan Syncfusion Team March 4, 2025 02:47 PM UTC

Hi Sergio Sant'Anna,


Upon further validation, in the Blazor .NET 9 application, when using per-page rendering, some functionalities are not working correctly. For your reference, we have attached the GitHub issues link. 

https://github.com/dotnet/aspnetcore/issues/53482

To ensure the Blazor Sidebar component functions without any issues, you need to use global interactive mode as mentioned previously. 

Check out the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.


Loader.
Up arrow icon