Responsive panel menu

Radzen.Blazor Components
1

I have set up an app with a sidebar and inside that a panelmenu component. Now I want to make my site more responsive and I can get the side panel to behave thanks to the -collapsed modifier, I cannot get the panelmenu to change it's behaviour.

I have seen that the regular menu component collapses into a hamburger on mobile, is that also possible for the panelmenu? If not which of these options do you recommend:

  • Swap between a menu and panelmenu at breakpoints
  • Use a menu component and style it as a panelmenu for desktop views
  • Keep using the panelmenu and add custom styling for mobile views

Help and suggestions is welcome.

Arne.

2

Hi @arne,

Have you checked the Layout demos? You can use RadzenSidebarToggle button in combination with RadzenSidebar and RadzenPanelMenu to achieve different responsive configurations including expandable icon sidebar navigation.

3

That is more like it. I am using the Full height overlay Sidebar as that is the good solution for mobile in our case.

I do need some further help because I would like the sidebarExpanded to be always true on desktop. I already hid the toggle button for desktops but what would be a good solution to keep the sidebar in place on higher screen sizes? Also note that it would be changed from absolute to initial display because it needs to push the content aside and not super impose. I do not want to toggle between two sidebars and hide them with the rz-display-sm-none classes.

4

Setting Responsive to true should do the trick:

<RadzenSidebar Responsive="true" ...>

You can use media queries to apply styles for smaller screen sizes only. Here is an example:

<RadzenLayout style="position: relative;grid-template-areas: 'rz-sidebar rz-header' 'rz-sidebar rz-body'">
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
            <RadzenLabel Text="Header" />
        </RadzenStack>
    </RadzenHeader>
    <RadzenSidebar Responsive="true" @bind-Expanded="@sidebarExpanded" class="nav-mobile">
        <RadzenStack AlignItems="AlignItems.End" Class="rz-p-2">
            <RadzenButton Icon="west" Variant="Variant.Text" ButtonStyle="ButtonStyle.Secondary" Click="@(() => sidebarExpanded = false)" />
        </RadzenStack>
        <RadzenPanelMenu>
            <RadzenPanelMenuItem Text="Home" Icon="home" />
            <RadzenPanelMenuItem Text="Users" Icon="account_box" />
        </RadzenPanelMenu>
        <div class="rz-p-4">
            Sidebar
        </div>
    </RadzenSidebar>
    <RadzenBody>
        <div class="rz-p-4">
            Body
        </div>
    </RadzenBody>
    @if (sidebarExpanded)
    {
    <div @onclick="@(() => sidebarExpanded = false)" class="rz-dialog-mask nav-overlay"></div>
    }
</RadzenLayout>

@code {
    bool sidebarExpanded = false;
}

<style>
@@media (max-width: 576px) {
    .nav-mobile {
        position: absolute;
        z-index: 3
    }
    
    .nav-overlay {
        position: absolute; 
        z-index: 2
    }
}
</style>
5

I see, Our issue is that we were trying to minimise custom styling but your solution works exactly what we need. Thank you for your swift answers, I know enough to proceed, thanks.

P.S. Just wondering, why do you use properties for one solution and utility classes for another? See this example:
AlignItems="AlignItems.End" Class="rz-p-2"

6

Indeed, some of the configuration properties could simply live as utility css classes, however exposing them as a property makes visual editing quicker and straightforward. These are also usually the most configured ones.

Here is an example of AlignItems="AlignItems.End"

image
image2418×1364 301 KB

On the other hand, it would be an overkill to expose all utility classes for spacing as properties. Yet, they can also be managed and configured visually in Radzen Blazor Studio:

image
image2416×1382 321 KB

7

I see and the link to the Studio makes sense, thank you for the explanation.