Search results

Multiple Sidebar

Two Sidebars can be initialized in a web page with same main content. Sidebars can be initialized on right side or left side of the main content using Position property.

The HTML element with class name e-main-content will be considered as the main content and both the Sidebars will behave as side content to this main content area of a web page.

In the following sample, more than one sidebar is rendered based on Position property.

@using Syncfusion.EJ2.Blazor.Navigations
@using Syncfusion.EJ2.Blazor.Buttons

<div id="header" style="height:45px;text-align: center;color:white;background-color:midnightblue;font-size:1.2rem;line-height:45px;">
    Header
</div>

<EjsSidebar @ref="leftSidebarInstance" Type=SidebarType.Push Width="250px">
    <ChildContent>
        <div style="text-align: center;" class="text-content"> Left Sidebar</div>
    </ChildContent>
</EjsSidebar>
<EjsSidebar @ref="rightSidebarInstance" Width="250px" Position=SidebarPosition.Right>
    <ChildContent>
        <div style="text-align: center;" class="text-content"> Right Sidebar</div>
    </ChildContent>
</EjsSidebar>

<div style="text-align:center" class="text-content e-main-content">
    <div>Main content</div>
    <div>
        <EjsButton @onclick="ToggleLeftSidebar" IsToggle="true" CssClass="e-btn e-info">Left Toggle Sidebar</EjsButton>
    </div>
    <div style="margin-top:10px">
        <EjsButton @onclick="ToggleRightSidebar" IsToggle="true" CssClass="e-btn e-info">Right Toggle Sidebar</EjsButton>
    </div>
</div>

@code {
    EjsSidebar leftSidebarInstance;
    EjsSidebar rightSidebarInstance;    
    public void ToggleLeftSidebar()
    {
        this.leftSidebarInstance.Toggle();
    }
    public void ToggleRightSidebar()
    {
        this.rightSidebarInstance.Toggle();
    }
}

<style>
    .e-sidebar {
        background-color: #f8f8f8;
        color: black;
    }

    .text-content {
        font-size: 1.5rem;
        padding: 3rem;
    }

    .main > div {
        padding: 0px !important;
    }
</style>

Output be like the below.

output