Hi Jan,
Greetings from Syncfusion support.
Based on the details you shared, we understand that you
would like to hide the Dock Sidebar on mobile resolutions. Based on your
requirement, we have prepared and shared the Blazor Dock Sidebar sample with
the latest version.
In this sample, we have used a JSinterop call to
determine whether it is in desktop or mobile mode and have set the value to false
for the EnableDock
and IsOpen
properties within the Sidebar Created
event.
KB link : https://www.syncfusion.com/faq/blazor/tips-and-tricks/how-do-you-detect-whether-a-page-is-loaded-in-mobile-or-on-desktop
Check out the below code snippets for reference.
|
[MainLayout.razor]
@inject
IJSRuntime jsRuntime
<SfSidebar @ref="sidebarObj" ID="sidebar" @bind-IsOpen="SidebarToggle" EnableDock=@sidebarDock Created="onCreated">
</SfSidebar>
private bool mobile { get; set; }
private bool sidebarDock= true;
public async Task onCreated()
{
mobile = await
jsRuntime.InvokeAsync<bool>("isDevice");
if (mobile)
{
sidebarDock = false;
SidebarToggle = false;
}
}
[_Layout.cshtml]
function isDevice() {
var isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera
mini|mobile/i.test(navigator.userAgent);
return isMobile;
}
|
Refer to the attached sample and get back to us if you need
any further assistance.
Regards,
Leo Lavanya Dhanaraj
Attachment:
BlazorApp1_1d76cd2c.zip
