SideBar not Auto Hiding on Mobile Devices

Penfold · January 21, 2022, 5:17am

Hi

Has something changed for the auto hide on the side bar? All my projects and even new ones when viewed on Mobile browsers still has the sidebar visible. Before mobile browsers (or even if I shrink the width of the desktop browser) would auto hide the side bar.

How do I restore the functionality. Do I have to change a property somewhere?

Cheers

enchev · January 21, 2022, 7:47am

Hi @Penfold,

The sidebar will be hidden on mobile devices only for Angular applications but not for Blazor. For example in our demos we have special code for that:

github.com

radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Shared/MainLayout.razor#L116-L130

    
      
          protected override void OnInitialized()
          {
              if (httpContextAccessor != null && httpContextAccessor.HttpContext != null &&
                   httpContextAccessor.HttpContext.Request != null && httpContextAccessor.HttpContext.Request.Headers.ContainsKey("User-Agent"))
              {
                  var userAgent = httpContextAccessor.HttpContext.Request.Headers["User-Agent"].FirstOrDefault();
                  if (!string.IsNullOrEmpty(userAgent))
                  {
                      if (userAgent.Contains("iPhone") || userAgent.Contains("Android") || userAgent.Contains("Googlebot"))
                      {
                          sidebarExpanded = false;
                          bodyExpanded = true;
                      }
                  }
              }