toggle SfSidebar

[Sarah]

hello

I'm using SfSidebar in MainLayout. It is displayed by default. How can I toggle SfSidebar in MainLayout on some pages?

As a user, he enters the mydomain.com/page1 link in the browser's address bar and SfSidebar is not displayed.

[Vishwanathan Muruganantham]

Hi Sara,

Greetings from Syncfusion support.

We have prepared a sample of the ‘Sidebar’ in the main layout page and added a toggle button in the top row, which remains static across all pages. This allows us to toggle the sidebar from any page. We have attached a sample for reference.

Refer to the below code snippet for reference.

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Buttons

 

<div id="wrapper">

    <div class="top-row px-4">

        <SfButton CssClass="e-primary" @onclick="ToggleSidebar">Toggle Sidebar</SfButton>

        <a rel='nofollow' href=https://learn.microsoft.com/aspnet/core/ target="_blank">About</a>

    </div>

    <SfSidebar  Width="250px"  @bind-IsOpen="SidebarToggle">

        <ChildContent>

            <NavMenu/>

        </ChildContent>

    </SfSidebar>

    <div>@Body</div>

</div>

 

<div id="blazor-error-ui">

    An unhandled error has occurred.

    <a rel='nofollow' href="" class="reload">Reload</a>

    <a class="dismiss">🗙</a>

</div>

 

@code {

    private void ToggleSidebar()

    {

        SidebarToggle = !SidebarToggle;

    }

    // Specify the value of Sidebar component opened or closed state.

    public bool SidebarToggle = false;

}

Sample: Attached as zip folder.

Best regards,

Vishwanathan

Attachment: BlazorSideBar_2b6fb1f5.zip

[Sarah]

Hi Vishwanathan,

Thank you for your reply. I have no problem to toggle in the MainLayout. As I said before, I want to toggle the sfsidebar in the MainLayout when some pages are opened. For example, when the user loads the following url in the address:

https://domain/counter

I want the sfsidebar in MainLayout to be toggled.

[Vishwanathan Muruganantham]

Hi Sarah,

We have reviewed your query and understand that you need to toggle the sidebar for a specific page directly opened through a URL. To achieve this, we can use the “NavigationManager “ service to detect when the URL changes. In the 'OnAfterRender' method, we can retrieve the current page using 'Navigation.Uri,' which allows us to control and prevent the sidebar toggle accordingly. Please refer to the code snippet below for reference:

 

…

    <SfSidebar  Width="250px"  @bind-IsOpen="SidebarToggle" OnOpen="OnOpen">

        <ChildContent>

            <NavMenu/>

        </ChildContent>

    </SfSidebar>

   

…

 

@code {

…

   public void OnOpen(Syncfusion.Blazor.Navigations.EventArgs args)

    {

        if (preventOpen)

        {

            args.Cancel = preventOpen;

            preventOpen = false;

        }

    }

    // Specify the value of Sidebar component opened or closed state.

    public bool SidebarToggle;

 

    protected override void OnAfterRender(bool firstRender)

    {

        if (firstRender)

        {

            if (Navigation.Uri.Contains("/counter"))

            {

                preventOpen = true;

            }

            Navigation.LocationChanged += HandleLocationChanged;

        }

        base.OnAfterRender(firstRender);

    }

   

 

    private void HandleLocationChanged(object sender, Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs e)

    {

        if (e.Location.Contains("/counter"))

        {

            SidebarToggle = false;

        }

        else

        {

            SidebarToggle = true;

        }

        StateHasChanged();

    }

 

    public void Dispose()

    {

        Navigation.LocationChanged -= HandleLocationChanged;

    }

}

Sample: attached as zip

Best Regards,
Vishwanathan M

Attachment: BlazorSidebar_860a8ec.zip

[Sarah]

Hi  Vishwanathan M,

Thank you for your reply

[Kalpana Ganesan]

Hi Sarah,

You're welcome! Glad that the provided solution was helpful. If you have any other questions, please reach out to us, we will be happy to help you.

Regards,

Kalpana.

[Sarah]

hello

I want to put a border around the sfsidebar, but I encountered a problem. The file is attached.

I want to implement it like the picture below

Attachment: MainLayout_9e203a91.rar

[Vishwanathan Muruganantham]

Hi Sarah,

We have validated your query and understand the requirement to apply border styles to the Sidebar element. To achieve this, you can use the "ID" property along with the ”HtmlAttributes” property.

Refer to the below code snippet for reference.

…

    <SfSidebar Width="250px" ID="custom" @bind-IsOpen="SidebarToggle"  OnOpen="OnOpen" HtmlAttributes="HtmlAttribute">

        <ChildContent>

            <NavMenu/>

        </ChildContent>

    </SfSidebar>

….

 

<style>

    #custom.mysidebarclass {

        border:solid 1px red;

        border-radius:15px;

    }

</style>

Please check the sample and let us know if you need any further assistance.

Sample: attached as zip folder.

Best Regards,
Vishwanathan

Attachment: Sidebar_4cee991c.zip

[Sarah]

hello

Thank you for your reply. Now I faced another problem. Margin is not working properly. I want to put a border around the sfsidebar and put a shadow around it.

Attachment: MainLayout_2460f333.rar

[Vishwanathan Muruganantham]

Hi Sarah,

We have reviewed your query and understand that you need to add a box “shadow” and “margin” to the Sidebar element. To achieve this, we have added a custom shadow instead of using the Bootstrap class. Additionally, we have set the “left” value and position style for the “sidebar” content to ensure that the sidebar does not overlap with the content.

Refer to the below code snippet for reference.

…

 

    <SfSidebar Width="250px" ID="custom" @bind-IsOpen="SidebarToggle" OnOpen="OnOpen" HtmlAttributes="HtmlAttribute" >

        <ChildContent>

            <NavMenu/>

        </ChildContent>

    </SfSidebar>

    <div class="sidebar-content">@Body</div>

 

….

 

 

    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()

    {

        { "class", " mysidebarclass" },

 

    };

}

 

<style>

    #custom.mysidebarclass {

        overflow: hidden;

        box-shadow: 0px 0px 20px 15px rgba(0, 0, 0, 0.45);

        border:solid 2px red;

        border-radius:15px;

        margin-left:20px;

        margin-right:20px;

    }

 

    .sidebar-content {

        position: absolute;

        left: 30px;

    }

</style>

Please check the sample and let us know if you need any further assistance.

Sample: attached as zip folder.

Best Regards,
Vishwanathan

Attachment: Sidebar_e606cedb.zip