Modal Sidebar..

[maurizio ziraldo]

Is there a way to create a "modal sidebar"?

Like for the dialog object, you open the sidebar and you cannot click any where else.

[Sivakumar ShunmugaSundaram]

Hi maurizio,

We understand that you want to prevent interactions on Main content area while the Sidebar is in open state. To achieve this, you can use the ShowBackdrop property of Blazor sidebar component. Check the below code snippet.

[Index.razor],

 

<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle" ShowBackdrop="true">

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11538169346.zip

For your reference we have attached the sidebar sample. Please check the sample and get back to us if you need any further assistance.

Regards,

Sivakumar S

[Paul]

Hi,

What if you have a modal sidebar open and then, from a button inside that sidebar, you open another smaller modal sidebar over that (I set the z-index to 2000 on the second sidebar)?

How can you cover the first sidebar, while keeping the new sidebar active?

This is the situation I have, see the attached image.

1 = e-sidebar-overlay from the first and second sidebars

2 = first sidebar, that I want to cover

3 = second sidebar - only this should accept input

Thanks.

Attachment: 20240424_170621_56860dd5.zip

[Jafar Ali Shahulhameed]

Hi Paul,

We understand that you are trying to have multiple sidebar one over the other with EnableBackdrop property enabled. We have prepared the sample to meet your requirements by using the Sidebar Target property. Kindly refer the code changes below,

[Index.razor]

 

<SfSidebar ID="sidebar_1" @ref="sidebarObj" Width="700px" EnableGestures="false" Type="SidebarType.Push" @bind-IsOpen="SidebarToggle" Position="SidebarPosition.Right" ShowBackdrop="true">

    …

</SfSidebar>

 

<SfSidebar ID="sidebar_2" @ref="sidebarObj2" ZIndex="2000" EnableGestures="false" Type="SidebarType.Push" Target="#sidebar_1" Width="300px" @bind-IsOpen="SidebarToggle2" Position="SidebarPosition.Right" ShowBackdrop="true">

   ….

</SfSidebar>

 

 

@code{

    SfSidebar sidebarObj;

    SfSidebar sidebarObj2;

    public bool SidebarToggle = false;

    public bool SidebarToggle2 = false;

    public void Close()

    {

        SidebarToggle = false;

    }

    public void Toggle()

    {

        SidebarToggle = !SidebarToggle;

    }

    public void OpenSidebar_2()

    {

        SidebarToggle2 = !SidebarToggle2;

    }   

    public void CloseSidebar_2()

    {

        SidebarToggle2 = !SidebarToggle2;

    }

}

We have attached the sample for your reference,

Sample: Attached as zip file.

Kindly try out the shared details and get back to us if you need further assistance.

Regards,

Jafar

Attachment: BlazorApp_Sidebar_2b2e692b.zip

[Paul]

Hi,

Yes, I had tried that (I forgot to mention it) and this does work as you say - I should explain more :

However, the content of the first sidebar is scrollable and if I target that sidebar with the second sidebar then the second one can appear off the screen because the content has already been scrolled and the second sidebar will be at the top of the scrolled content (effectively hidden from the user).

To get around this, I targeted the second sidebar to a page-level element instead so that the second sidebar is not tied to the scrollable content of the first sidebar.  While this fixes the scroll problem, it does introduce the problem of the second overlay not covering the first sidebar.

What do you think I could do?

Thanks.

[Jafar Ali Shahulhameed]

Hi Paul,

We understand that you are trying to prevent interaction on the first sidebar except the scrollbar within it when the second sidebar is opened. We have achieved the requirement by making use of the “pointerEvents” Css class on the Sidebar changed event. Kindly refer the code changes below,

[Index.razor]

 

<SfSidebar ID="sidebar_2" @ref="sidebarObj2" ZIndex="2000" EnableGestures="false" Changed="OnChanged" Type="SidebarType.Over" Width="300px" @bind-IsOpen="SidebarToggle2" Position="SidebarPosition.Right" ShowBackdrop="false">

    ….

</SfSidebar>

 

public async void OnChanged(Syncfusion.Blazor.Navigations.ChangeEventArgs args)

{

    await jsRuntime.InvokeAsync<string>("getElement_1", sidebarObj2.IsOpen);

}

[_Host.cshtml]

 

function getElement_1(isOpen) {

    var sidebarEle_1 = document.getElementById('sidebar_1');

    if (isOpen) {

        sidebarEle_1.style.pointerEvents = 'none';

    } else {

        sidebarEle_1.style.pointerEvents = '';

    }

}

If you feel we have misunderstood your requirement or you are still facing an issue, kindly replicate the issue you are facing in the attached sample this will help us to provide you a prompt solution.

Kindly get back to us if you need further assistance

Regards,

Jafar

Attachment: BlazorApp_Sidebar_1_f90dc770.zip

[Paul]

Thank you, very nice.
I did however find that sidebarObj2.IsOpen is always false when the sidebar is both opened and closed, so had to use another variable instead of that for my purposes.

Paul

[Jafar Ali Shahulhameed]

Hi Paul,

On validating your query, we found that sidebarObj2.IsOpen is getting updated properly whenever the second sidebar is opened and closed. However, you can make use of the SidebarToggle2 variable which is also updated properly when everytime the first sidebar state changes.

Also, to achieve same in the first sidebar, to update the SidebarToggle for every state change in first sidebar.

Make the below changes in the previously attached sample,

[Index.razor]

 

// for first sidebar

<SfSidebar ID="sidebar_1" @ref="sidebarObj" Width="700px" EnableGestures="false" Type="SidebarType.Over" @bind-IsOpen="SidebarToggle" Position="SidebarPosition.Right" ShowBackdrop="true">

    <ChildContent>

            <span>

                <SfButton @onclick="CloseSidebar_1" CssClass="e-btn close-btn">Close Sidebar</SfButton>

            </span>

    </ChildContent>

</SfSidebar>

 

<div class="text-content" style="text-align: center;">

    <div>

        <SfButton @onclick="Toggle" CssClass="e-btn e-info">Open Sidebar 1</SfButton>

    </div>

</div>

 

public void Toggle()

{

    SidebarToggle = !SidebarToggle;

}

public void CloseSidebar_1()

{

    SidebarToggle = !SidebarToggle;

}

 

// for second sidebar, you can make use of the SidebarToggle2 variable instead of sidebar2Obj.IsOpen

public async void OnChanged(Syncfusion.Blazor.Navigations.ChangeEventArgs args)

{

    await jsRuntime.InvokeAsync<string>("getElement_1", SidebarToggle2);

}

Kindly check out the shared details and get back to us if you need further assistance.

Regards,

Jafar