Hide on OPen

Question

I am struggling with designing the overall menu layout. It seems like the components have updated and code in different places doesn't seem to work. I think I understand that you set Type=SidebarType.Push to have it hide the side bar but nothing I set hides it. I tried to set toggle method after render but that also fails. So I am trying to accomplish the following:

1. Hide the sidebar on open; and

2. Set css color for just the sidebar. I want the top menu another color.

I am attaching the sample I have been struggling with. Thank you for all of the assistance, it is greatly appreciated.

Attachment: 2_899b3831.7z

Shameer Ali Baig Sulaiman Ali Baig · Accepted Answer

Hi Slynch, 
 
Greetings from Syncfusion support. 
 
We have validated your reported problem with Sidebar in your application. On validating your shared application, we found that you have set transition for body, Sidebar and its main content element. By default, Sidebar will add transition and margin-left to it main content element when it expand/collapse. This style will be applied from the script execution, if the transition was overridden in application level, then Sidebar will not work as expected 
 
Query: Hide the sidebar on open with push type 
 
Removed the following styles from your application to resolve your reported problem. 
 




    body { 
        transition: none !important; 
    } 
 
    .custom .content { 
        -webkit-transition: unset !important; 
        -moz-transition: unset !important; 
        -o-transition: unset !important; 
        -ms-transition: unset !important; 
        transition: unset !important; 
        transform: none !important; 
        margin-left: 220px !important; 
    } 
 
    .custom .e-sidebar { 
        /*CSS transitions*/ 
        -o-transition-property: none !important; 
        -moz-transition-property: none !important; 
        -ms-transition-property: none !important; 
        -webkit-transition-property: none !important; 
        transition-property: none !important; 
        transition: unset !important; 
        /*CSS transforms*/ 
        -o-transform: none !important; 
        -moz-transform: none !important; 
        -ms-transform: none !important; 
        -webkit-transform: none !important; 
        transform: none !important; 
        /*CSS animations*/ 
        -webkit-animation: none !important; 
        -moz-animation: none !important; 
        -o-animation: none !important; 
        -ms-animation: none !important; 
        animation: none !important; 
        width: 220px !important; 
        visibility: visible !important; 
    } 
 
 
Query: Set css color for just the sidebar. I want the top menu another color. 
 
As per your request, I have modified the top menu color in your application with below styles. 
 




#header.header-section, 
    #header .search-icon { 
        height: 65px; 
        background: black; 
        color:white; 
    } 
 
Please, download the solution sample from the following link. 
 
https://www.syncfusion.com/downloads/support/forum/159333/ze/Sidebar_with_menu701918749  
 
Please, check out the following links to know more about SF Blazor Sidebar. 
 
Demos: https://blazor.syncfusion.com/demos/sidebar/default-functionalities?theme=bootstrap4    
 
Documentation: https://blazor.syncfusion.com/documentation/sidebar/auto-close/   
 
https://blazor.syncfusion.com/documentation/sidebar   
 
API Reference: 
 
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Navigations.SfSidebar.html  
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S.