Menu not recognise that sidebar has toogled

Question

I am trying to implement SfSidebar with SfMenu inside.

My attention is to allow sidebar to toggle.

I am trying to recreate sample from demo https://blazor.syncfusion.com/demos/sidebar/sidebar-with-menu?theme=bootstrap4

My customization is taht I want to sidebar exist in NavMenu blazor component, divs with class="main-content" id="maintext" serving @body and they are in mainlayout, all css are in app.css and I want my app to not have top bar menu all menus exits on left side.

My app is blazor webassembly on .Net5 RC2 ver. Syncfusion Blazor components are on version 18.3.0.42

My problem is that when I toggle toolbar menu inside that tollbar looks like not recognise that toolbar is toggled and submenus opening as toolbar is still toggled.

How I can push SfMenu to open submenus next to icon when menu is in toogled state.

In attachment there is mainmenu,navmenu razor files and app.css.

Perhaps my lack of CSS konvelege missing something

Attachment: Syncfusion_7adb1ed7.zip

Madhan Venkateshan · Accepted Answer

Hi Admir Hodžic, 
 
Good day to you. 
 
You can change the css selector from ‘e-menu-wrapper’ to ‘e-menu-container’ for the css in which the width of li element of menu is changed in dock mode to resolve your issue. Please refer the below code snippets. 
 
App.css 




.sidebar-menu.e-dock.e-close .e-menu-container ul .e-menu-item.e-menu-caret-icon, 
.sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical { 
    min-width: 0; 
    width: 50px !important; 
} 
 
Regards,  Madhan V

Admir Hodžic · Answer

Thank you a lot, you made my day

Mohan Kumar Ramasamy · Answer

Hi Admir Hodžic, 
 
Thanks for the update.  
 
We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 
 
Regards, 
Mohankumar R