1. Home
  2. Forum
  3. Blazor
  4. Changing Sidebar Type on MediaQuery

Changing Sidebar Type on MediaQuery

My goal is for large screens/desktop to show a Sidebar as open (i.e. default behaviour) but when the window shrinks/on mobile, the Sidebar Type should change to "SidebarType.Over" so that when open it appears over the page. I've seen that there is a MediaQuery property that can automatically close the sidebar when the window shrinks however i can't work out how to get the Type to change. Is it possible? Thanks.

5 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team August 28, 2020 01:51 PM UTC

Hi Christopher,  
 
Greetings from Syncfusion support. 
 
By default, Sidebar pushes the main-content on initial loading (Desktop) and Sidebar type is set as Over for mobile mode. This is the default behaviour. If you want to change the Sidebar type on window mediaQuery.  You can change the Sidebar type by using open event of Sidebar component by using JS interop. Because, you can’t able predict the window dimension in Blazor platform. 
 
Refer the below code snippet. 
 
<SfSidebar @ref="sidebar" ID="sidebar" Width="250px" MediaQuery="(min-width: 600px)"  OnOpen="open"> 
    <ChildContent> 
        <SfButton @onclick="Close" CssClass="e-btn close-btn">Toogle Sidebar</SfButton> 
        <div style="text-align: center;" class="text-content"> Sidebar </div> 
    </ChildContent> 
</SfSidebar> 
 
<div class="text-content" style="text-align: center;"> 
    <SfButton @onclick="Close" CssClass="e-btn close-btn">Toogle Sidebar</SfButton> 
    Main content 
</div> 
@code { 
 
    [Inject] 
    public IJSRuntime JSRuntime { get; set; } 
    SfSidebar sidebar; 
   
 
    public void Close() 
    { 
        this.sidebar.Toggle(); 
    } 
    public void open() 
    { 
        JSRuntime.InvokeAsync<int>("Sidebar"); 
    } 
} 
    <script> 
        function Sidebar() { 
            var sidebar = document.getElementById("sidebar").ej2_instances[0]; 
            if (!window.matchMedia("(min-width: 600px)").matches) { 
                sidebar.type = "Over"; 
            } 
            else { 
                sidebar.type = "Push"; 
            } 
        } 
    </script> 
 
Refer the sample link below. 
 
 
To know more about Sidebar component, please refer the below links.   
   
   
   
   
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
CH Christopher August 28, 2020 08:42 PM UTC

Thanks for your reply. you said by default "Sidebar type is set as Over for mobile mode.". Trying the responsive demo shows that by default it still does Push. it doesn't switch to Over in mobile mode?

Is there any plan to make it more configurable so you don't have to resort to JS interop to switch from Push to Over?

MK Muthukrishnan Kandasamy Syncfusion Team August 31, 2020 12:33 PM UTC

 
Hi Christopher, 
 
Query 1: Trying the responsive demo shows that by default it still does Push. it doesn't switch to Over in mobile mode? 
 
We suspect that you are using browser simulator to check the Sidebar in mobile mode. After switching to mobile mode in browser simulator, we need to reload the page as all the script functionalities of mobile mode of Sidebar has to be executed to make it render in mobile mode. After refreshing the page, Sidebar will render with Over type in mobile mode. 
 
If your reported still persists, please share us your output screen recorded video. It would help us to check the cause of your problem and to provide the prompt solution. 
 
Query 2: Is there any plan to make it more configurable so you don't have to resort to JS interop to switch from Push to Over? 
 
We have provided support to change the Sidebar Type as like your requirement in server-side code in Blazor. However, we cannot check whether the window size changes in Blazor server side, as it is depends on the client-side browser window. So, we don’t have any plan to include functionality to check the window media size in Blazor without using the JS interop as it is not feasible currently in Blazor application.  
 
As suggested in our last update, you need to use the JS interop to achieve your expected requirement. 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


FE Fergus October 5, 2024 11:54 AM UTC

Hi,

It appears that the above javascript no longer works in the latest version.

When i declare  "var sidebar = document.getElementById("sidebar").ej2_instances[0]; " it does not have a property called type.

But when it is set it does nothing anyway when media is less than 600px. It sets .type as "Over" but it makes no difference.

Is there an updated version of this.


Thanks

Fergus


SA SureshRajan Alagarsamy Syncfusion Team October 7, 2024 05:44 PM UTC

Hi Fergus,
We have reviewed your query and understand you are experiencing issues with the Sidebar instance on the script side in the application. We would like to inform you that Syncfusion has introduced the MediaQuery component, which allows you to detect changes in browser size efficiently. By using this component, you can adjust the "Type" property value of the Sidebar based on your needs without requiring JavaScript interop calls to identify the browser size.
To assist you, we have customized the Type property value based on screen size using built-in breakpoints. The ActiveBreakpoint property will provide the breakpoint that currently matches the media query.
For your reference we have shared Media Query component demos and documentation for your additional reference.
Refer to the below code snippet for further reference.

[MainLayout.razor]

<SfMediaQuery @bind-ActiveBreakpoint="@activeBreakpoint"></SfMediaQuery>

.....

@*Initialize the Sidebar component*@
<SfSidebar @attributes="@HtmlAttribute" Width="290px" @bind-Type="@sidebarType" Target=".e-main-content" @bind-IsOpen="SidebarToggle" OnOpen="Opened">

     .......

</sfSidebar>

@Code{
private string activeBreakpoint;

public SidebarType sidebarType;

public async Task Opened()
{
    if (activeBreakpoint == "Small")
    {
        sidebarType = SidebarType.Push;
    }
    else if (activeBreakpoint == "Medium")
    {
        sidebarType = SidebarType.Slide;
    }
    else
    {
        sidebarType = SidebarType.Over;
    }
}
protected override void OnInitialized()
{
    base.OnInitialized();
    .......

   SfMediaQuery.Small.MediaQuery = "(max-width: 600px)";
   SfMediaQuery.Medium.MediaQuery = "(min-width: 600px)";
   SfMediaQuery.Large.MediaQuery = "(min-width: 1100px)";
}
}

We have also attached a sample for your reference.

Sample: Attached as zip folder.

Regards,
Suresh.

Attachment: BlazorSidebarMediaQuery_28ddb6cb.zip

Loader.
Up arrow icon