Sidebar open razor component in body area?

[Sao]

Hello,

I followed the video tutorial on Sidebar (https://github.com/SyncfusionExamples/getting-started-with-blazor-sidebar-component/tree/main/Pages) which simply shows how to display text in the body area. Does Sidebar have the ability to open razor components, e.g., Counter.razor in the body area like MenuItem?

Could you provide an example?

Best regards

Sao

[Indhumathy Loganathan]

Hi Sao,

Greetings from Syncfusion support.

Yes, you can render any Syncfusion component or a Blazor application page as the Main content of the Sidebar component. For your reference, we have prepared a sample where we rendered the Sidebar in the MainLayout.razor page with the Counter page as its Main content. Check the below code snippet.

[MainLayout.razor]

 

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

    <Sidebar_blazor.Pages.Counter/>

</div>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_blazor918741836

You will also be able to perform page navigation with the Sidebar by setting the @Body tag as the Main content. Refer to the below forum where we handled a similar query.

https://www.syncfusion.com/forums/169481/simple-working-example

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

Regards,

Indhumathy L

[Sao]

Hello,

I have not made myself clear when asking questions. I want to adopt the Sidebar and when a user clicks on it, I want to display/route to the respective razor component. I have added the  HtmlAttributes but it does not work.

Could you please help?

Sao

---- My Code ----

@page "/Grids/SidebarTest2"

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Lists

<div>

    <div id="header" style="width: 100%">

        <span style="float: left">

            <SfButton CssClass="custom-button" IconCss="e-icons e-menu"

                      @onclick="MenuButtonClick"> </SfButton>

        </span>

        <span style="float: left; font-size: 20px; padding-left: 10px">Language</span>

        <span style="font-size: 25px">@HeaderText</span>

    </div>

    <SfSidebar Width="250px" Position="SidebarPosition.Left" @bind-IsOpen="ToggleSidebar"

               MediaQuery="(min-width: 600px)" EnableDock="true" DockSize="80px" Type="SidebarType.Over">

        <ChildContent>

            <SfListView DataSource="@ListViewData">

                <ListViewFieldSettings TValue="ListViewDataModel" Id="Id" Text="Text" HtmlAttributes="HtmlAttributes">

                </ListViewFieldSettings>

                <ListViewEvents TValue="ListViewDataModel" Clicked="OnSelect"></ListViewEvents>

            </SfListView>

        </ChildContent>

    </SfSidebar>

    <div class="main-text-content">@MainContent</div>

</div>

@code {

    public void OnSelect(ClickEventArgs<ListViewDataModel> args)

    {

        this.MainContent = args.ItemData.Description;

    }

    public class ListViewDataModel

    {

        public string Id { get; set; }

        public string Text { get; set; }

        public string Description { get; set; }

        public string HtmlAttributes { get; set; }

        //

    }

    List<ListViewDataModel> ListViewData = new List<ListViewDataModel>

    {

        new ListViewDataModel {Id="1", Text = "KC", Description = "JavaScript (JS) is an interpreted computer programming language.", HtmlAttributes="/Grids/HCList", },

        new ListViewDataModel {Id="2", Text = "OD", Description = "React is a declarative, efficient, and flexible JavaScript library for building user interfaces.", HtmlAttributes="/Grids/ODList", },

        new ListViewDataModel {Id="3", Text = "Vue", Description = "A progressive framework for building user interfaces.", HtmlAttributes="", }

    };

    public bool ToggleSidebar;

    public void MenuButtonClick()

    {

        ToggleSidebar = !ToggleSidebar;

    }

    public string HeaderText = "Header";

    public string MainContent = "Before getting into any programming language, one should have basic knowledge about HTML, CSS, and JavaScript.";

}

<style>

    .custom-button {

        color: white !important;

        font-size: 20px !important;

        background-color: midnightblue !important;

        border-color: midnightblue !important;

    }

    #header {

        text-align: center;

        color: white;

        background-color: midnightblue;

        line-height: 51px;

    }

    .main-text-content {

        font-size: 18px;

        text-align: left;

        padding-top: 50px;

        padding-left: 30px;

    }

    /* .text-content {

            font-size: 25px;

            text-align: center;

            padding-top: 50px;

        }*/

    .e-sidebar {

        background-color: #f8f8f8;

        color: black;

    }

        .e-sidebar.e-left {

            top: 55px;

        }

        .e-sidebar.e-right {

            top: 55px;

        }

    .main > div {

        padding: 0px !important;

    }

</style>

[Indhumathy Loganathan]

Hi Sao,

We understand that you want to navigate to other pages when clicking the TreeView node item. To achieve your requirement, you need to place the Sidebar on the MainLayout.razor
page. By using the NavigateUrl property of TreeView, you can navigate to other pages.

We have performed page navigation by using TreeView within Sidebar and you need to render the @Body as the main-content of the Sidebar in the MainLayout.razor page of your application.

Refer to the below code snippet.  

[MainLayout.razor ]

 

<SfSidebar HtmlAttributes="@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" @ref="tree" 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>@*main-content declaration*@

<div class="main-content" id="main-text" onclick="click()">

    <div class="sidebar-content">

        <div class="content">

            @Body

        </div>

    </div>

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

</div>

 

public class TreeData

{

    …

    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 = "/" });

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

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

}

For your reference, we have attached the sample.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorSidebarSample569546574

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

Regards,

Indhumathy L