Horizontal Dockable sidebar

[Nathanael]

Is it possible to have a horizontal and dockable sidebar? I would be putting filtering buttons and dropdowns on it. 

[Indhumathy Loganathan]

Hi Nathanael, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement in Sidebar component. Currently, we do not have direct support to render horizontal Sidebar. However, this requirement can be achieved through style customizations. Refer to the below code snippet. 

 

public async void Toggle() 

{ 

    await jsRuntime.InvokeAsync<object>("sidebarOpenClose"); 

    SidebarToggle = !SidebarToggle; 

} 

... 

<style> 

    #top-sidebar { 

        background-color: rgb(25, 118, 210); 

        color: #ffffff; 

        overflow: hidden; 

    } 

 

    /* top sidbar element styles*/ 

    .top_sidebar.e-open { 

        transform: translateY(0%) !important; 

        transition: transform 0.5s ease; 

        visibility: visible; 

    } 

 

    .top_sidebar, 

    #top-sidebar.e-left { 

        width: 100% !important; 

        float: left; 

        height: 75px; 

    } 

 

    .top_sidebar, 

    #top-sidebar.e-left { 

        transform: translateY(-100%) !important; 

    } 

 

    .top_sidebar.e-close { 

        transform: translateY(-100%); 

    } 

 

    .top_content_animation { 

        margin-left: 0px !important; 

        margin-top: 75px; 

    } 

</style> 

 

_Host.cshtml 

 

function sidebarOpenClose() { 

    var element = document.getElementsByClassName("e-content-animation")[0]; 

    var topSidebar = document.getElementById('top-sidebar').ej2_instances[0]; 

    if (topSidebar.element.classList.contains('e-left')) { 

        element.style.height = (element.offsetHeight - 75) + "px"; 

        setTimeout(function () { 

            element.classList.add("top_content_animation"); 

            // Remove the e-left class in sidebar 

            topSidebar.element.classList.remove("e-left"); 

            // Add the custom class to sidebar 

            topSidebar.element.classList.add("top_sidebar"); 

        }, 10);             

    } 

    else { 

        var element = document.getElementsByClassName("e-content-animation")[0]; 

        element.style.height = (element.offsetHeight + 75) + "px"; 

        element.classList.remove("top_content_animation"); 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/166206/ze/Horizontal_Sidebar1389420492 

 

If the above sample doesn’t meet your requirement, please share a pictorial representation of your exact use case requirement so that we can guide you in a better way.  

 

Regards, 

Indhumathy L