Sidebar as Navmenu

[Andy Jones]

Hi

I am reasonably Ok with backend development, but have almost zero front end HTML, JavaScript, CSS experience and I think I'm missing some important 101 concepts.

I have just started learning Blazor and using Syncfusion components and am making progress, I'm Ok with the C# coding and getting to grips with the framework, however my lack of front end skill is letting me down.

The example at Blazor Sidebar With Default Functionalities Example - Syncfusion Demos is exactly what I am trying to achieve i.e. a sidebar where the NavMenu should be, and I can use it as a fancy NavMenu, loading content into the @body area.

I have used the template generator in VS2019 to generate a demo sidebar. This works fine but when I look at the code, as far as I can tell the sidebar component lives inside the @body areas 'Index.razor' page, I had been expecting it to live in the NavMenu area of the page and then open content into the @body area.

If the sidebar does live in the Index.razor page, does that mean the default NavMenu has just been removed from the MainLayout.aspx page and all other pages and content are loaded within an element of the Index.razor page, or should there be multiple content pages and every content page would have to have its own sidebar component added?

As I said I have 0 experience in web fronts ends and maybe I have got the wrong end of the stick, When starting, I had been expecting the component to live in NavMenu.razor page and just replace the standard navigation?

If anyone could explain where the sidebar components are supposed to sit, at least I can carry on knowing I haven't made a fundamental mistake and I would be extremely grateful!! 

With Thanks

Andy

[Sowmiya Padmanaban]

Hi Andy Jones,  

 

Greetings from Syncfusion support. 

 

We checked your requirement with Sidebar component. To achieve your requirement, you need to add the Sidebar in the MainLayout.razor page of your application to avail it in all the pages of the application. The MainLayout.razor page is commonly shared page whose content will be applied to all the pages of the Blazor application.  

  

The following link will help you to understand better about the use of MainLayout.razor page and its contents.  

  

https://docs.microsoft.com/en-us/aspnet/core/blazor/layouts?view=aspnetcore-3.1  

  

Also, we have added the navigation bar inside the Sidebar component. So, we can use the navigation bar inside the Sidebar for navigating to other pages of the application.  

  

Inside the list items, we have used navLink for page navigation and “rel='nofollow' href” attribute in NavLink denotes that page you have to navigate. @body not denotes the sub pages of the application like Index.razor page, FetchData.razor page and such etc. All pages of the application will render at the place of @body element in the MainLayout.razor. You can know about the purpose @body from the above shared link.  

 

In the below sample, we have set target element of sidebar as .main-content . So, sidebar consider the next div element of .main-content class (div) as a main-content of Sidebar component. 

 

  <SfSidebar HtmlAttributes="@HtmlAttribute" @bind-IsOpen="@SidebarOpen"  Target=".main-content" Width="220px" @ref="Sidebar"> 

            <ChildContent> 

                <ul class="nav flex-column"> 

                    <li class="nav-item px-3"> 

                        <NavLink class="nav-link" rel='nofollow' href="" Match="NavLinkMatch.All"> 

                            <span class="oi oi-home" aria-hidden="true"></span> Home 

                        </NavLink> 

                    </li> 

                    <li class="nav-item px-3"> 

                        <NavLink class="nav-link" rel='nofollow' href="counter"> 

                            <span class="oi oi-plus" aria-hidden="true"></span> Counter 

                        </NavLink> 

                    </li> 

                    <li class="nav-item px-3"> 

                        <NavLink class="nav-link" rel='nofollow' href="fetchdata"> 

                            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data 

                        </NavLink> 

                    </li> 

                </ul> 

            </ChildContent> 

        </SfSidebar> 

        <!-- end of sidebar element --> 

        <!-- main content declaration --> 

        <div class="main-content" id="maintext"> 

            <div class="content"> 

               @Body 

            </div> 

        </div> 

 

Please, refer the sample link with above suggested solution. 

 

https://www.syncfusion.com/downloads/support/forum/160503/ze/Sidebar-192553071.zip 

 

Refer the below links to know more about the sidebar component.  

 

UG Documentation: https://blazor.syncfusion.com/documentation/sidebar/getting-started/  

  

Demo link: https://blazor.syncfusion.com/demos/sidebar/default-functionalities/  

  

API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html   

  

Please let us know, if you need any further assistance.  

  

Regards,   

Sowmiya.P  

[Andy Jones]

Hi Sowmiya Padmanaban

Many thanks for the detailed response. I will take it away this weekend and have a good study of your answer

Also I appreciate the link to the layout information, I'm sure it will fill in a few of the 'front end' gaps I have. 

Thanks again

Andy

[Sowmiya Padmanaban]

Hi Andy,  

  

Thanks for the update. 

  

We will wait to hear from you. 

  

Regards,  

Sowmiya.P