1. Home
  2. Forum
  3. Blazor
  4. SidebarMenu Demo/Sample - Please demonstrate replacing "NavMenu"

SidebarMenu Demo/Sample - Please demonstrate replacing "NavMenu"

Hello,

I am spending and investing a lot time both getting stronger at Blazor, as well as learning how to incorporate SyncFusion components.  Focusing on the sample provided for SidebarMenu.  

Background
=========
Sr Software Engineer FullStack
- 25+ experience from desktop to Web "Asp.Net"

Baseline
======
Using default Blazor sample as a foundation all I want to do is;
  1. Proper way to use this SidebarMenu Component example and replace the NavMenu.razor
  2. Adding the razor pages to the menu item examples
  3.   ex: Url ="counter"
  4. I cannot get the page to display in the DIV found in the MainLayout.razor page
  5. I have tried creating RenderFragment, no luck
The only way I go to this to work was to replace the MainLayout.razor page with the SidebarMenu.razor and placing the "@Body" inside of the "main-content" css class div.  Now it works perfectly, but has taken over the mainlayout functionality.

Is this correct....  I have tried everything, but to no avail..  

What am I doing wrong.

Please understand the SidebarMenu displays perfectly, it is when 'click' a Url configured item that nothing renders.  Unless replace the MainLayout.razor page with the SidebarMenu's contents, "of course I have removed this // @inherits SampleBaseComponent..

I have not seen one example of any components that shows "onclick" event placing content in the @Body window of the MainLayout.razor page.

All I wanted to was have the "menu item URL" to render in the MainLayout.razor layout....

It appears that this control requires to take over all base navigation, unless I am making a mistake do to my 'newbie' status with Blazor.

Regards,
Tom

Here is a screenshot of it working...




13 Replies 1 reply marked as answer
MK Mohan Kumar Ramasamy Syncfusion Team July 28, 2020 10:34 AM UTC

Hi CodeChaser, 
 
We have checked your reported query, we can achieve your requirement in NavMenu.razor file. We have changed the sample in below way. 
 
1.We have use the SidebarMenu component in NavMenu.razor file, then customize the css. 
 
NavMenu.razor 
<div id="wrapper"> 
    <div class="col-lg-12 col-sm-12 col-md-12"> 
        <div class="header-section dock-menu" id="header"> 
            <ul class="header-list"> 
                <li id="hamburger" class="icon-menu icon list" @onclick="@Toggle"></li> 
                <input type="text" placeholder="Search..." class="search-icon list"> 
                <li class="right-header list"> 
                    <div class="horizontal-menu"> 
                        <SfMenu CssClass="dock-menu" Items="@AccountMenuItems" Orientation="@Orientation"></SfMenu> 
                    </div> 
                </li> 
                <li class="right-header list support">Support</li> 
                <li class="right-header list tour">Tour</li> 
            </ul> 
        </div> 
        <!-- sidebar element declaration --> 
        <SfSidebar HtmlAttributes="@HtmlAttribute" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" @ref="Sidebar"> 
            <ChildContent> 
                <div class="main-menu"> 
                    <p class="main-menu-header">MAIN</p> 
                    <div> 
                        <SfMenu CssClass="dock-menu" Items="@MainMenuItems" Orientation="@VerOrientation"></SfMenu> 
                    </div> 
                </div> 
                <div class="action"> 
                    <p class="main-menu-header">ACTION</p> 
                    <button class="e-btn action-btn" id="action-button">+ Button</button> 
                </div> 
            </ChildContent> 
        </SfSidebar> 
        <!-- end of sidebar element --> 
        <!-- main content declaration --> 
        <!--end of main content declaration --> 
    </div> 
    <title>Essential JS 2 (Preview) for Blazor Sidebar-> Sidebar Menu</title> 
</div> 
@code { 
    SfSidebar Sidebar; 
    public Orientation Orientation = Orientation.Horizontal; 
    public Orientation VerOrientation = Orientation.Vertical; 
    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>() 
{ 
        {"class", "sidebar-menu" } 
    }; 
    public List<MenuItem> MainMenuItems = new List<MenuItem>{ 
        new MenuItem { 
            Text = "Blazor Projects", IconCss = "icon-user icon", 
                Items = new List<MenuItem> { 
                    new MenuItem{ Text = "Home", Url="/" }, 
                    new MenuItem{ Text = "Counter", Url="/counter" }, 
                    new MenuItem{ Text = "FetchData", Url="/fetchdata" } 
                } 
            }, 
         new MenuItem { 
            Text = "Overview", IconCss = "icon-user icon", 
                Items = new List<MenuItem> { 
                    new MenuItem{ Text = "All Data" }, 
                    new MenuItem{ Text = "Category2" }, 
                    new MenuItem{ Text = "Category3" } 
                } 
            } 
    }; 
    public void Toggle() 
    { 
        this.Sidebar.Toggle(); 
    } 
} 
 
<style> 
------------ 
-------- 
.e-menu-wrapper ul .e-menu-item .e-caret, 
    #header .search-icon, 
    .sidebar-menu .action-btn, 
    #header .e-menu-item .e-caret, 
    .e-menu-wrapper ul .e-menu-item, 
    .e-menu-wrapper .e-ul .e-menu-item .e-menu-url { 
        color: #fff !important; 
    } 
 
  @@media (min-width: 768px) { 
        app { 
            flex-direction: column; 
        } 
    }
</style> 
 
We have created the Sidebar target element(.main-content) in MainLayout.razor file, then placing the "@Body" inside of the ".main-content" element. 
 
MainLayout.razor 
 
@inherits LayoutComponentBase 
 
    <NavMenu /> 
 
<div class="main"> 
        <div class="main-content" id="maintext"> 
            <div class="content"> 
                @Body 
            </div> 
        </div> 
</div> 
 
 
For your reference we have prepared a sample based on this. Please refer the below link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohankumar R 
 
 


Marked as answer
CO CodeChaser July 28, 2020 07:38 PM UTC

Thx Mohankumar R ,

I will try this evening.  In my attempts to get it working I was playing with target="" setting as well.  But you did it a little differently.  Can wait to try it.

Tom

MK Mohan Kumar Ramasamy Syncfusion Team July 29, 2020 01:25 PM UTC

Hi CodeChaser,  
  
Thanks for the update  
  
We will wait to hear from you.   
  
Regards,  
Mohankumar R 


CO CodeChaser July 29, 2020 02:24 PM UTC

Hi Mohan,

Yea that worked and is what I needed to learn.  I took a few steps further changing the " Target=".main-content" " to my class, this will give me greater control in the future.  As you may notice I am using 'CSS Grids' for my main layout, see image below...  Looks just like my other screenshot, but now I am NOT taking over the 'MainLayout.razor' page with the SidebarMenu sample...  

Thx again,
Tom

FYI.. the screen is fully responsive and the bottom row is sticky, but as in design versus 'position: sticky'.  The idea is to give a 'desktop' app feel. 
** as far as my layout and shadows n such, still a work in progress, but not too far away from where I want to be...



MK Mohan Kumar Ramasamy Syncfusion Team July 30, 2020 11:45 AM UTC

Hi CodeChaser, 
 
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 


CO CodeChaser July 30, 2020 04:43 PM UTC

Mohan,

Here is a tip.  The default CSS for the SidebarMenu has the submenu's with a few pixels between the dock bar and the submenu.  Consequently it makes it hard to choose a submenu item without moving the moue just right.  As you can see by the image below I reduced the right-margin I to allow the submenu to get closer with no spaces "pixels" which stabilized the selection.  

Tom
 


MK Mohan Kumar Ramasamy Syncfusion Team August 3, 2020 09:02 AM UTC

Hi CodeChaser, 
 
Thanks for your update. 
 
We have checked your reported query, we can customize width for sidebar-menu element. Please refer the below CSS for override the sidebar-menu element. 
 
    .e-sidebar.e-left.e-dock.sidebar-menu { 
        width: 222px !important; 
    } 
 
We have prepared a sample for this, please refer below link. 
 
 
Please let us know, if you need any further assistance, 
 
Regards, 
Mohankumar R 


JO Joe October 22, 2020 05:00 PM UTC

Hi,

this doesn't work with the latest version of Sf.  The side bar is a different color than the rest and the collapse function didn't work.

Thanks,

MK Mohan Kumar Ramasamy Syncfusion Team October 23, 2020 11:20 AM UTC

Hi Joe, 
 
Sorry for the inconvenience caused.  
 
In our latest version (v18.3.35), we have included some breaking changes in Menu component. We would like you to review the breaking changes from the below location before you upgrade. 
 
We have checked your reported query, we have changed the class name for menu component e-menu-container from e-menu wrapper.  
 
For your reference, we have prepared a sample based on this, please refer below link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohan kumar R 


SA Sam November 21, 2020 10:06 AM UTC

Hello,

I tried the original sample :

It worked perfectly well and it was exactly what I needed, thank you!

However, when I upgrade the Syncfusion nuget package to the latest version (v18.3.0.50), it breaks the collapsed state of the sidebar. 

What needs to be done to fix this please? Thank you





MK Mohan Kumar Ramasamy Syncfusion Team November 23, 2020 09:18 AM UTC

Hi Sam, 
 
We have checked your reported query. We have included some breaking changes in Menu component from this version (v18.3.35), We would like you to review the breaking changes from the below location before you upgrade. 
 
 
we have changed the class name for menu component e-menu-container from e-menu wrapper.   
  
Code Snippets ex 
 
 
/* end of horizontal-menu styles */ 
    /* vertical-menu styles */ 
    .sidebar-menu .e-menu-container ul .e-menu-item.e-menu-caret-icon { 
        width: 220px; 
    } 
 
    .sidebar-menu .e-menu-container ul .e-menu-item:hover, .e-menu-wrapper ul .e-menu-item.e-focused:hover { 
        background-color: #3e454c !important; 
    } 
 
    .e-menu-container ul .e-menu-item.e-selected { 
        background-color: #3e454c !important; 
    } 
 
/* end of vertical-menu styles */ 
    /* end of menu styles */ 
    /* Sidebar styles */ 
    /* docksidebar styles */ 
    .e-menu-container ul .e-menu-item .e-caret, 
    #header .search-icon, 
    .sidebar-menu .action-btn, 
    #header .e-menu-item .e-caret, 
    .e-menu-container ul .e-menu-item, 
    .e-menu-container .e-ul .e-menu-item .e-menu-url { 
        color: #fff !important; 
    } 
 
    .e-close .e-menu-container ul .e-menu-item { 
        width: 50px; 
    } 
 
    .e-close ul .e-menu-item.e-menu-caret-icon { 
        padding-right: 12px; 
    } 
 
    .sidebar-menu.e-dock.e-close .e-menu-container ul .e-menu-item .e-caret, 
    .sidebar-menu.e-dock.e-close .main-menu-header, 
    .sidebar-menu.e-dock.e-close .action-btn { 
        display: none; 
    } 
.sidebar-menu, #header ul, .e-menu-container, .e-menu-container ul { 
        background-color: #33383e !important; 
        color: #fff !important; 
    } 
 
For your reference, we have updated your sample based on this, please refer below link.  
  
  
Please let us know, if you need any further assistance.  
  
Regards,  
Mohan kumar R  


DE Denis July 1, 2022 01:19 PM UTC

Hi... I've found this samplce very interesting and helps me (even if my scenario is a bit different - I'va a PWA + server) but if I update Nuget package to latest version sample stop working and i obtain same strange results 

Senza nome.jpg


Attachment: SidebarMenu_c7ee3a6b.zip

YA YuvanShankar Arunagiri Syncfusion Team July 4, 2022 10:30 AM UTC

Hi Denis,


We have validated your reported query and there is no project sample in your attached zip file. We have prepared the sample based on your requirement with latest version (20.2.0.36). please find the below attachment. We suspect that, Syncfusion script and style does not refer properly in your end. Please refer below UG link about how to refer the Syncfusion scripts.


UG link: https://blazor.syncfusion.com/documentation/common/adding-script-references


Please get back to us, if you need any further assistance on this. 


Regards,

YuvanShankar A


Attachment: SidebarMenulatest_a45bdf0e.zip

Loader.
Up arrow icon