@using Syncfusion.Blazor.Navigations@using Syncfusion.Blazor.Lists
<div id="control-section">
<div id="wrapper">
@*Initialize the Sidebar Component*@
<SfSidebar class="sidebar-list" Width="250px" Target=".maincontent" @bind-IsOpen="SidebarToggle" Type="@SidebarType.Auto">
<ChildContent>
<div class="content-area">
@*Initialize the ListView Component*@
<SfListView DataSource="@List" TValue="listData" CssClass="e-template-list">
<ListViewFieldSettings TValue="listData" Id="Id" Text="Text"></ListViewFieldSettings>
<ListViewTemplates TValue="listData">
<Template>
<div class="list-wrapper">
<span class="text e-text-content">@((context as listData).Text)</span>
</div>
</Template>
</ListViewTemplates>
<ListViewEvents TValue="listData" Clicked="OnSelect"></ListViewEvents>
</SfListView>
</div>
</ChildContent>
</SfSidebar>
<div>
@*Initialize the Toolbar component*@
<SfToolbar>
<ToolbarEvents Clicked="@Toggle"></ToolbarEvents>
<ToolbarItems>
<ToolbarItem PrefixIcon="e-icons e-menu" TooltipText="Menu"></ToolbarItem>
<ToolbarItem>
<Template>
<div class="e-folder">
<div class="e-folder-name">Language</div>
</div>
</Template>
</ToolbarItem>
</ToolbarItems>
</SfToolbar>
</div>
<div class="maincontent">
<div class="content">
<SfTab LoadOn="ContentLoad.Demand" ShowCloseButton=true @bind-SelectedItem="SelectedTab">
<TabItems>
@foreach (TabData Item in TabItems)
{
<TabItem>
<HeaderTemplate>
<div>@(Item.Header)</div>
</HeaderTemplate>
<ContentTemplate>
<div>@(Item.Content)</div>
</ContentTemplate>
</TabItem>
}
</TabItems>
</SfTab>
</div>
</div>
</div>
</div>
@code {
public class TabData
{
public string Header { get; set; }
public string Content { get; set; }
}
List<TabData> TabItems = new List<TabData>();
private int SelectedTab = 0;
// Specifies the content for Right side pane.
public string ContentText = "Before getting into any programming language, one should have basic knowledge about HTML, CSS, and JavaScript. These are the basic building blocks of web designing. HTML describes the structure of a web page whereas CSS describes the presentation of the web page";
// Specify the value of Sidebar component state. It indicates whether the sidebar component is in an open/close state.
public bool SidebarToggle = true;
// Specifies the value of ListView component Datasource property.
public List<listData> List = new List<listData>
{
new listData {Id="1", Text = "JavaScript", Pic = "javascript", Description = "JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed. However, it has recently become common in both game development and the creation of desktop applications." },
new listData {Id="2",Text = "TypeScript", Pic = "typescript", Description = "It is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is an open-source, object-oriented programing language. It contains all elements of JavaScript. It is a language designed for large-scale JavaScript application development, which can be executed on any browser, any Host, and any Operating System. TypeScript is a language as well as a set of tools. TypeScript is the ES6 version of JavaScript with some additional features." },
new listData {Id="3",Text = "Angular", Pic = "angular", Description = "Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications." },
new listData {Id="4", Text = "React", Pic = "react", Description = "React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. It can also render on the server using Node." },
new listData {Id="5", Text = "Vue", Pic = "vue", Description = "A progressive framework for building user interfaces. It is incrementally adoptable. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries." }
};
public class listData
{
public string Id { get; set; }
public string Text { get; set; }
public string Pic { get; set; }
public string Description { get; set; }
}
// Specifies the event handler for Clicked event in ListView component.
public void OnSelect(Syncfusion.Blazor.Lists.ClickEventArgs<listData> args)
{
if (args.ItemData != null)
{
TabItems.Add(new TabData { Header = args.ItemData.Text, Content = args.ItemData.Description });
SelectedTab = TabItems.Count - 1;
}
}
// Specifies the event handler for Clicked event in Toolbar component.
public void Toggle(ClickEventArgs args)
{
if (args.Item.TooltipText == "Menu")
{
SidebarToggle = !SidebarToggle;
}
}
} 
