Include a Menu Bar in hamburger mode in an AppBar - From 198525

[Michael DeLange]

The solution mentioned in option 1 is going to work, thank you for your assistance.  On a different topic however, I'm noting that a sidebar with a type of "Push" does not horizontally resize panels correctly in a DashboardLayout on one of my pages.  Full width dashboard panels (SizeX equals the number of dashboard columns) overflow past the right edge of the browser window.  If I resize the browser window manually it corrects itself.  Is there a way to force a refresh of the DashboardLayout when the sidebar is initialized, opened, or closed?

[Priyanka Karthikeyan]

Hi Michael,

Yes, this behavior can occur when using a Sidebar with Type="Push" alongside a DashboardLayout. The DashboardLayout calculates its panel widths based on the available container size when it is rendered. When the sidebar is opened or closed, the available width changes, but the DashboardLayout may not automatically recalculate its dimensions until a browser resize event occurs. Syncfusion has previously recommended refreshing the DashboardLayout after the Sidebar layout change to ensure the panels are sized correctly.

You can force the DashboardLayout to recalculate its size by calling RefreshAsync() when the Sidebar state changes:

<SfSidebar @bind-IsOpen="SidebarOpen"

Changed="OnSidebarChanged"

Type="SidebarType.Push">

</SfSidebar>

<SfDashboardLayout @ref="Dashboard"

Columns="12">

...

</SfDashboardLayout>

@code {

private SfDashboardLayout? Dashboard;

private bool SidebarOpen = true;

private async Task OnSidebarChanged()

{

// Allow the sidebar animation/layout update to complete

await Task.Delay(150);

if (Dashboard != null)

{

await Dashboard.RefreshAsync();

}

}

}

If the issue occurs during the initial page load, you can also trigger a refresh after the dashboard is first rendered:

protected override async Task OnAfterRenderAsync(bool firstRender)

{

if (firstRender && Dashboard != null)

{

await Task.Delay(150);

await Dashboard.RefreshAsync();

}

}

This should force the DashboardLayout to recalculate panel widths whenever the sidebar is initialized, opened, or closed, preventing full-width panels (SizeX equal to the configured column count) from overflowing beyond the browser window.

Regards,

Priyanka K