Appbar and Sidebar

[Martin Holmes]

Please can you give an example on how to use the appbar with sidebar in MainLayout.razor to acheive the following. The hamburger should minimise the sidebar so only the icons are showing using blazor server .Net6 and sf controls v26.1.39

[Vijay Ravi]

Hi Martin,

Based on your requirement we prepare the Blazor sample for Appbar with Sidebar component as shown in the below shared code snippet. Additionally, you can refer the below shared documentation for Appbar with Sidebar in MainLayout.razor file in blazor server .Net6.

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Buttons

<div class="page">

    <div id="wrapper">

        <div>

            @*Initialize the Toolbar component*@

            <SfAppBar ColorMode="AppBarColor.Primary">

        <SfButton CssClass="e-inherit" IconCss="e-icons e-menu" @onclick="Toggle"></SfButton>

        <span class="regular">Blazor AppBar</span>

        <AppBarSpacer></AppBarSpacer>

        <SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>

    </SfAppBar>

        </div>    

        <SfSidebar EnableDock="true" DockSize="60px" @attributes="@HtmlAttribute" Width="290px" Target=".e-main-content" MediaQuery="(min-width:600px)" @bind-IsOpen="SidebarToggle">  

            <ChildContent>

                <div class="main-menu">

                    <div class="table-content">

                        <SfTextBox Placeholder="Search..."></SfTextBox>

                        <p class="main-menu-header">TABLE OF CONTENTS</p>

                    </div>

                    <div>

                        <SfTreeView CssClass="main-treeview" ExpandOn="@Expand" TValue="TreeData">

                            <TreeViewFieldsSettings Id="NodeId" NavigateUrl="NavigateUrl" Text="NodeText" IconCss="IconCss" DataSource="Treedata" HasChildren="HasChild" ParentID="Pid">

                            </TreeViewFieldsSettings>                            

                        </SfTreeView>

                    </div>

                </div>

            </ChildContent>

        </SfSidebar>

        <!-- end of sidebar element -->

        @*main-content declaration*@

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

            <div class="sidebar-content">

                <div class="content px-4">

                   

                </div>

            </div>

            <!--end of main content declaration -->

        </div>

    </div>

</div>

@code {

    SfSidebar sidebarObj;

    public string Target = ".maincontent";

    public bool SidebarToggle = false;

    public string SidebarWidth = "280px";

    public string SidebarContentClass = "text-content";

    public ExpandAction Expand = ExpandAction.Click;

    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()

    {

        {"class", "sidebar-treeview" }

    };

    public void Toggle()

    {

        SidebarToggle = !SidebarToggle;

        if (SidebarToggle)

        {

            SidebarWidth = "180px";

            SidebarContentClass = "text-content minimized";

        }

        else

        {

            SidebarWidth = "180px";

            SidebarContentClass = "text-content";

        }

    }

    public class TreeData

    {

        public string NodeId { get; set; }

        public string NodeText { get; set; }

        public string IconCss { get; set; }

        public bool HasChild { get; set; }

        public string Pid { get; set; }

        public string NavigateUrl { get; set; }

    }

    private List<TreeData> Treedata = new List<TreeData>();

    protected override void OnInitialized()

    {

        base.OnInitialized();

        Treedata.Add(new TreeData { NodeId = "01", NodeText = "Installation", IconCss = "icon-microchip icon", NavigateUrl = "/error" });

        Treedata.Add(new TreeData { NodeId = "02", NodeText = "Deployment", IconCss = "icon-annotation-edit icon", NavigateUrl = "/counter" });

        Treedata.Add(new TreeData { NodeId = "03", NodeText = "Quick Start", IconCss = "icon-docs icon", NavigateUrl = "/" });

    }

}

Sample link: https://blazorplayground.syncfusion.com/rDLfDnhHpsGMsctN

UG Documentation link: https://blazor.syncfusion.com/documentation/sidebar/how-to/sidebar-in-the-dotnet8-application

Please get back to us if you need any further assistance

Regards,

Vijay