Hi everybody,
I am not able to show sidebar on mobile devices or on desktop if the window is smaller. The toggle button is shown, but the sidebar is not sliding into view:
@inherits LayoutComponentBase
<AuthorizeView>
<Authorized>
<RadzenLayout style="height: 100%;">
<RadzenHeader>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
<RadzenSidebarToggle Click="@(() => SidebarExpanded = !SidebarExpanded)" />
<RadzenLabel Text="@TranslationService?.GetText("Title")" />
</RadzenStack>
</RadzenHeader>
<RadzenSidebar Style="width:auto" Responsive="false">
<RadzenPanelMenu DisplayStyle="@(SidebarExpanded ? MenuItemDisplayStyle.IconAndText : MenuItemDisplayStyle.Icon)" ShowArrow=false>
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuDashboard")" Icon="dashboard" Click="@(() => NavigateTo("dashboard"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuRecipes")" Icon="scale" Click="@(() => NavigateTo("recipes"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuGroups")" Icon="groups" Click="@(() => NavigateTo("groups"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuProfile")" Icon="face_6" Click="@(() => NavigateTo("profile"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuShopping")" Icon="local_grocery_store" Click="@(() => NavigateTo("shopping"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuScheduler")" Icon="calendar_month" Click="@(() => NavigateTo("scheduler"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuSettings")" Icon="settings" Click="@(() => NavigateTo("settings"))" />
</RadzenPanelMenu>
</RadzenSidebar>
<RadzenBody class="rz-p-0">
<div class="main" style="height: 100%">
<div class="coctoc-content" style="height: 100%; padding: 10px;">
@Body
</div>
</div>
</RadzenBody>
</RadzenLayout>
</Authorized>
<NotAuthorized>
<div class="main">
<div class="top-row px-4">
</div>
<div class="content px-4" style="overflow-y: hidden;">
@Body
</div>
</div>
</NotAuthorized>
</AuthorizeView>
<RadzenComponents />
Menu button is visible, but nothing is happend when clicking on it:
Is it possible to get the same behaviour for desktop and mobile devices?
Hi @Softwerker04 ,
Seems to work as expected here: Blazor DataGrid commponent with code-less paging, sorting and filtering of IQueryable data sources
I can show the sidebar via the toggle button just fine. You can check with your browser developer tools if the sidebar is rendered anywhere but just not visible.
Hi @korchev ,
thanks for your fast answer. Indeed, this is working for me:
@inherits LayoutComponentBase
<AuthorizeView>
<Authorized>
<RadzenLayout>
<RadzenHeader>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
<RadzenSidebarToggle Click="@(() => SidebarExpanded = !SidebarExpanded)" />
<RadzenLabel Text="@TranslationService?.GetText("Title")" />
</RadzenStack>
</RadzenHeader>
<div style="display: flex; flex-direction: column;">
<RadzenSidebar Style="width: auto; height: 100%;" @bind-Expanded="@SidebarExpanded">
<RadzenPanelMenu>
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuDashboard")" Icon="dashboard" Click="@(() => NavigateTo("dashboard"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuRecipes")" Icon="scale" Click="@(() => NavigateTo("recipes"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuGroups")" Icon="groups" Click="@(() => NavigateTo("groups"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuProfile")" Icon="face_6" Click="@(() => NavigateTo("profile"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuShopping")" Icon="local_grocery_store" Click="@(() => NavigateTo("shopping"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuScheduler")" Icon="calendar_month" Click="@(() => NavigateTo("scheduler"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuSettings")" Icon="settings" Click="@(() => NavigateTo("settings"))" />
</RadzenPanelMenu>
</RadzenSidebar>
</div>
<RadzenBody class="rz-p-4">
<div class="main" style="height: 100%">
<div class="coctoc-content" style="height: 100%">
@Body
</div>
</div>
</RadzenBody>
</RadzenLayout>
</Authorized>
<NotAuthorized>
<div class="main">
<div class="top-row px-4">
</div>
<div class="content px-4" style="overflow-y: hidden;">
@Body
</div>
</div>
</NotAuthorized>
</AuthorizeView>
<RadzenComponents />
But the behaviour is different when I try to implement an icon sidebar like this:
@inherits LayoutComponentBase
<AuthorizeView>
<Authorized>
<RadzenLayout>
<RadzenHeader>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
<RadzenSidebarToggle Click="@(() => SidebarExpanded = !SidebarExpanded)" />
<RadzenLabel Text="@TranslationService?.GetText("Title")" />
</RadzenStack>
</RadzenHeader>
<div style="display: flex; flex-direction: column;">
<RadzenSidebar Style="width: auto; height: 100%;">
<RadzenPanelMenu DisplayStyle="@(SidebarExpanded?MenuItemDisplayStyle.IconAndText:MenuItemDisplayStyle.Icon)" ShowArrow=false>
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuDashboard")" Icon="dashboard" Click="@(() => NavigateTo("dashboard"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuRecipes")" Icon="scale" Click="@(() => NavigateTo("recipes"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuGroups")" Icon="groups" Click="@(() => NavigateTo("groups"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuProfile")" Icon="face_6" Click="@(() => NavigateTo("profile"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuShopping")" Icon="local_grocery_store" Click="@(() => NavigateTo("shopping"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuScheduler")" Icon="calendar_month" Click="@(() => NavigateTo("scheduler"))" />
<RadzenPanelMenuItem Text="@TranslationService?.GetText("MenuSettings")" Icon="settings" Click="@(() => NavigateTo("settings"))" />
</RadzenPanelMenu>
</RadzenSidebar>
</div>
<RadzenBody class="rz-p-4">
<div class="main" style="height: 100%">
<div class="coctoc-content" style="height: 100%">
@Body
</div>
</div>
</RadzenBody>
</RadzenLayout>
</Authorized>
<NotAuthorized>
<div class="main">
<div class="top-row px-4">
</div>
<div class="content px-4" style="overflow-y: hidden;">
@Body
</div>
</div>
</NotAuthorized>
</AuthorizeView>
<RadzenComponents />
For me the icon sidebar is working on dektop, but not on mobile.
I also set the Responsible flag at Sidebar to True. But it has no effect: when browser window becomes smaller, the sidebar collapsed.
Try this:
<RadzenSidebar Responsive="false" style="width: max-content">
Responsive=false will stop the default behavior which hides the sidebar on mobile devices. width: max-content should make it work.
codep
May 8, 2024, 8:21pm
6
@Softwerker04 Did you ever work out a solution for this? I have the same issue. Sidebar works fine in desktop browser but on mobile, either A the sidebar is still shown, or if I set Responsive to true, the Sidebar will hide, but will not open on hamburger menu click. Have tried korchev's suggesting, no change.
I should add, I'm using the DisplayStyle like this: <RadzenPanelMenu DisplayStyle="@(sidebarExpanded ? MenuItemDisplayStyle.IconAndText : MenuItemDisplayStyle.Icon)" ShowArrow="false">
Roune
August 2, 2024, 6:08am
7
I'll just try and awaken the zombie-thread, as i had a similar experience. What i did to make it work is:
<RadzenHeader>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
<RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
<RadzenLabel Text="TourneyKeeper" />
</RadzenStack>
</RadzenHeader>
<RadzenSidebar Responsive="true" Expanded="@sidebarExpanded" Style="width: max-content">
<RadzenPanelMenu DisplayStyle="@(sidebarExpanded ? MenuItemDisplayStyle.IconAndText : MenuItemDisplayStyle.Icon)" ShowArrow="false">
codep
August 2, 2024, 3:26pm
8
Thank you, Roune. I will give this a try.
