Simple working example?

[Miles Gibson]

Do you have a simple working example using the SideBar component as part of the MainLayout.  All of your examples are part of the HUGE demo application and not easily unpacked to be used on its own. I even created a sample Syncfusion Blazor Server application with the SideBar example, but it just embeds into a separate page, which is not what I want.

I want to be able to embed the NavBar component into the SideBar component, and then show/hide that for the entire application, ie. MainLayout.

TIA,

Miles

[Indhumathy Loganathan]

Hi Miles, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement in Sidebar component. You can render the Sidebar inside the MainLayout.razor page. You can use the @Body inside the target element to perform NavBar page navigation. Refer to the below code snippet. 

 

<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle"> 

    <ChildContent> 

        <div style="text-align: center;" class="text-content"> 

            <span> 

                <NavMenu /><br/> 

                <SfButton @onclick="Toggle" CssClass="e-btn close-btn">Close Sidebar</SfButton> 

            </span> 

        </div> 

    </ChildContent> 

</SfSidebar> 

 

<div id="head"> 

    <SfToolbar> 

        <ToolbarItems> 

            <ToolbarItem PrefixIcon="e-tbar-menu-icon tb-icons" TooltipText="Menu" OnClick="Toggle"></ToolbarItem> 

        </ToolbarItems> 

    </SfToolbar> 

</div> 

 

<div class="text-content e-main-content" style="text-align: center;width:100%;">@Body</div> 

... 

@code{ 

    SfSidebar sidebarObj; 

    public bool SidebarToggle = false; 

    public void Toggle() 

    { 

        SidebarToggle = !SidebarToggle; 

    } 

} 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169481/ze/Sidebar_blazor2056315126 

 

Also, you can check our documentation link to find simple Sidebar examples. Please check the below link. 

 

https://blazor.syncfusion.com/documentation/sidebar/getting-started#adding-component-to-the-application 

 

Please check the sample and get back to us if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Miles Gibson]

Hi  Indhumathy,

Yes, that works quite well actually.  Is there a way to keep the hamburger icon menu visible all of the time?  So then the user knows it is always there?

TIA,

Miles

[Indhumathy Loganathan]

Hi Miles, 

 

We have validated your requirement in Sidebar component. You can set the hamburger icon visible for all the time by rendering the Sidebar component inside some target element (inside a div container) by using the Target property. Refer to the below code snippet. 

 

<SfSidebar @ref="sidebarObj" Width="280px" Type=SidebarType.Push @bind-IsOpen="SidebarToggle" Target="@Target"> 

    <ChildContent> 

        <NavMenu/> 

    </ChildContent> 

</SfSidebar> 

... 

... 

<div class="maincontent text-content" style="text-align: center;"> 

    @Body 

</div> 

... 

@code{ 

    SfSidebar sidebarObj; 

    public string Target = ".maincontent"; 

 

You can render the Sidebar inside the maincontent div block which is rendered after the hamburger icon. So that the icon will be available all the time. You can find the modified sample from below link. 

 

https://www.syncfusion.com/downloads/support/forum/169481/ze/Sidebar_blazor1776959336 

 

Please check the sample and let us know if you need any further assistance. 

 

Regards, 

Indhumathy L