sidebar navigatable

8 Replies
3 Participants

Created by
HM Hossam Metwally

Platform
Blazor

Platform
Blazor

Control
Sidebar

Created On
Dec 13, 2023 09:46 PM UTC

Last Activity On
Dec 19, 2023 09:19 AM UTC

Want to subscribe?
SIGN IN

Hello,

@page "/navbar"

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Inputs

@*Initialize the Sidebar component*@

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

</div>

<div>

</TreeViewFieldsSettings>

</SfTreeView>

</div>

</ChildContent>

</SfSidebar>

<div>

@*Initialize the Toolbar component*@

<div class="e-folder-name">Navigation Pane</div>

</div>

</Template>

</ToolbarItem>

</ToolbarItems>

</SfToolbar>

</div>

@*main-content declaration*@

<div class="sidebar-heading"> Responsive Sidebar with Treeview</div>

This is a graphical aid for visualizing and categorizing the site, in the style of an expandable and collapsable treeview component.

It auto-expands to display the node(s), if any, corresponding to the currently viewed title, highlighting that node(s)

and its ancestors. Load-on-demand when expanding nodes is available where supported (most graphical browsers),

falling back to a full-page reload. MediaWiki-supported caching, aside from squid, has been considered so that

unnecessary re-downloads of content are avoided where possible. The complete expanded/collapsed state of

the treeview persists across page views in most situations.

</p>

</div>

@code {

// Specifies the value of TreeView component ExpanOn property.

public ExpandAction Expand = ExpandAction.Click;

// Specify the value of Sidebar component state. It indicates whether the sidebar component is in an open/close state.

public bool SidebarToggle = false;

// Specifies the event handler for Clicked event in Toolbar component.

public void Toggle(ClickEventArgs args)

{

if (args.Item.TooltipText == "Menu")

{

SidebarToggle = !SidebarToggle;

}

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; }

}

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

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

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

Treedata.Add(new TreeData { NodeId = "04", NodeText = "Components", IconCss = "icon-th icon", HasChild = true });

Treedata.Add(new TreeData { NodeId = "04-01", NodeText = "Calendar", IconCss = "icon-circle-thin icon", Pid = "04" });

Treedata.Add(new TreeData { NodeId = "04-02", NodeText = "DatePicker", IconCss = "icon-circle-thin icon", Pid = "04" });

Treedata.Add(new TreeData { NodeId = "04-03", NodeText = "DateTimePicker", IconCss = "icon-circle-thin icon", Pid = "04" });

Treedata.Add(new TreeData { NodeId = "04-04", NodeText = "DateRangePicker", IconCss = "icon-circle-thin icon", Pid = "04" });

Treedata.Add(new TreeData { NodeId = "04-05", NodeText = "TimePicker", IconCss = "icon-circle-thin icon", Pid = "04" });

Treedata.Add(new TreeData { NodeId = "04-06", NodeText = "SideBar", IconCss = "icon-circle-thin icon", Pid = "04" });

Treedata.Add(new TreeData { NodeId = "05", NodeText = "API Reference", IconCss = "icon-code icon", HasChild = true });

Treedata.Add(new TreeData { NodeId = "05-01", NodeText = "Calendar", IconCss = "icon-circle-thin icon", Pid = "05" });

Treedata.Add(new TreeData { NodeId = "05-02", NodeText = "DatePicker", IconCss = "icon-circle-thin icon", Pid = "05" });

Treedata.Add(new TreeData { NodeId = "05-03", NodeText = "DateTimePicker", IconCss = "icon-circle-thin icon", Pid = "05" });

Treedata.Add(new TreeData { NodeId = "05-04", NodeText = "DateRangePicker", IconCss = "icon-circle-thin icon", Pid = "05" });

Treedata.Add(new TreeData { NodeId = "05-05", NodeText = "TimePicker", IconCss = "icon-circle-thin icon", Pid = "05" });

Treedata.Add(new TreeData { NodeId = "05-06", NodeText = "SideBar", IconCss = "icon-circle-thin icon", Pid = "05" });

Treedata.Add(new TreeData { NodeId = "06", NodeText = "Browser Compatibility", IconCss = "icon-chrome icon" });

Treedata.Add(new TreeData { NodeId = "07", NodeText = "Upgrade Packages", IconCss = "icon-up-hand icon" });

Treedata.Add(new TreeData { NodeId = "08", NodeText = "Release Notes", IconCss = "icon-bookmark-empty icon" });

Treedata.Add(new TreeData { NodeId = "09", NodeText = "FAQ", IconCss = "icon-help-circled icon" });

Treedata.Add(new TreeData { NodeId = "10", NodeText = "License", IconCss = "icon-doc-text icon" });

}

<style>

/* Sample specific styles*/

.container-fluid {

padding-left: 0;

padding-right: 0;

}

/* Specific styles for TreeView component expandable && collapse icon element*/

.sidebar-treeview .e-treeview .e-icon-collapsible,

.sidebar-treeview .e-treeview .e-icon-expandable {

float: right;

}

.sidebar-treeview .e-treeview .e-icon-collapsible,

.sidebar-treeview .e-treeview .e-icon-expandable {

margin: 3px;

}

.tailwind .sidebar-treeview .e-treeview .e-icon-collapsible,

.tailwind-dark .sidebar-treeview .e-treeview .e-icon-expandable {

margin: 7px;

}

.e-bigger .sidebar-treeview .e-treeview .e-icon-collapsible,

.e-bigger .sidebar-treeview .e-treeview .e-icon-expandable {

margin: 8px;

}

/* Specific styles for TreeView component*/

.sidebar-treeview .e-treeview,

.sidebar-treeview .e-treeview .e-ul {

padding: 0;

margin: 0;

}

#wrapper .sidebar-treeview {

z-index: 20 !important;

}

/* Specific styles for main-menu-header element */

.sidebar-treeview .main-menu .main-menu-header {

color: #656a70;

padding: 15px 15px 15px 0;

font-size: 14px;

width: 13em;

margin: 0;

}

.material-dark .sidebar-treeview .main-menu .main-menu-header, .highcontrast .sidebar-treeview .main-menu .main-menu-header,

.fabric-dark .sidebar-treeview .main-menu .main-menu-header, .bootstrap-dark .sidebar-treeview .main-menu .main-menu-header,

.tailwind-dark .sidebar-treeview .main-menu .main-menu-header {

color: white;

}

.material-dark .sidebar-treeview .main-treeview .icon {

color: white;

}

#main-text .sidebar-heading {

font-size: 16px;

}

.e-bigger #main-text .sidebar-heading {

font-size: 18px;

}

/* specifies the table of content area styles */

.sidebar-treeview .table-content {

padding: 20px 18px;

height: 8em;

}

.material .sidebar-treeview .table-content {

padding: 20px 14px;

}

.bootstrap4 .sidebar-treeview .table-content,

.highcontrast.e-bigger .sidebar-treeview .table-content,

.fabric.e-bigger .sidebar-treeview .table-content,

.fabric-dark.e-bigger .sidebar-treeview .table-content {

padding: 20px 22px;

}

.bootstrap .sidebar-treeview .table-content,

.bootstrap-dark .sidebar-treeview .table-content {

padding: 20px 12px;

}

.highcontrast .sidebar-treeview .table-content {

padding: 20px 18px;

}

.fabric .sidebar-treeview .table-content,

.fabric-dark .sidebar-treeview .table-content {

padding: 20px 16px;

}

.bootstrap.e-bigger .sidebar-treeview .table-content,

.bootstrap-dark.e-bigger .sidebar-treeview .table-content {

padding: 20px;

}

.bootstrap4.e-bigger .sidebar-treeview .table-content {

padding: 20px 30px;

}

.material.e-bigger .sidebar-treeview .table-content {

padding: 20px 18px;

}

.e-bigger .sidebar-treeview .table-content {

padding: 20px 27px;

}

/*Specific styles for content area elements */

#main-text .sidebar-content .line {

width: 100%;

height: 1px;

border-bottom: 1px dashed #ddd;

margin: 40px 0;

}

#main-text .sidebar-content {

padding: 15px;

font-size: 14px;

}

.e-bigger #main-text .sidebar-content {

font-size: 16px;

}

#main-text .paragraph-content {

padding: 15px 0;

font-weight: normal;

font-size: 14px;

}

/*Specific styles for icon elements */

@@font-face {

font-family: 'fontello';

src: url('data:application/octet-stream;base64,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') format('truetype');

}

.sidebar-treeview .main-treeview .icon {

font-family: 'fontello';

font-size: 16px;

margin: -4px 0;

}

#wrapper .e-toolbar .e-icons {

font-size: 20px;

}

#wrapper .e-tbar-menu-icon:before {

content: '\e914';

font-family: 'sbicons';

}

.e-bigger .e-folder {

font-size: 18px;

}

.e-folder {

text-align: center;

font-weight: 500;

font-size: 16px

}

/* Specific styles for TreeView component*/

.sidebar-treeview .e-treeview .e-text-content {

padding-left: 18px;

}

.material .sidebar-treeview .e-treeview .e-text-content {

padding-left: 14px;

}

.bootstrap4 .sidebar-treeview .e-treeview .e-text-content {

padding-left: 22px;

}

.bootstrap .sidebar-treeview .e-treeview .e-text-content,

.bootstrap-dark .sidebar-treeview .e-treeview .e-text-content {

padding-left: 12px;

}

.fabric .sidebar-treeview .e-treeview .e-text-content,

.fabric-dark .sidebar-treeview .e-treeview .e-text-content {

padding-left: 16px

}

.bootstrap.e-bigger .sidebar-treeview .e-treeview .e-text-content,

.bootstrap-dark.e-bigger .sidebar-treeview .e-treeview .e-text-content,

.bootstrap.e-bigger .sidebar-treeview .e-treeview .e-list-icon + .e-list-text,

.bootstrap-dark.e-bigger .sidebar-treeview .e-treeview .e-list-icon + .e-list-text {

padding-left: 20px;

}

.bootstrap4.e-bigger .sidebar-treeview .e-treeview .e-text-content {

padding-left: 30px;

}

.tailwind-dark.e-bigger .sidebar-treeview .e-treeview .e-text-content,

.tailwind.e-bigger .sidebar-treeview .e-treeview .e-text-content,

.bootstrap5.e-bigger .sidebar-treeview .e-treeview .e-text-content,

.bootstrap5-dark.e-bigger .sidebar-treeview .e-treeview .e-text-content {

padding-left: 26px;

}

.material.e-bigger .sidebar-treeview .e-treeview .e-text-content,

.highcontrast .sidebar-treeview .e-treeview .e-text-content {

padding-left: 18px;

}

.e-bigger .sidebar-treeview .e-treeview .e-text-content {

padding-left: 22px;

}

.sidebar-treeview .main-treeview .icon-microchip::before {

content: '\e806';

}

.sidebar-treeview .main-treeview .icon-thumbs-up-alt::before {

content: '\e805';

}

.sidebar-treeview .main-treeview .icon-docs::before {

content: '\e802';

}

.sidebar-treeview .main-treeview .icon-th::before {

content: '\e803';

}

.sidebar-treeview .main-treeview .icon-code::before {

content: '\e804';

}

.sidebar-treeview .main-treeview .icon-chrome::before {

content: '\e807';

}

.sidebar-treeview .main-treeview .icon-up-hand::before {

content: '\e810';

}

.sidebar-treeview .main-treeview .icon-bookmark-empty::before {

content: '\e811';

}

.sidebar-treeview .main-treeview .icon-help-circled::before {

content: '\e813';

}

.sidebar-treeview .main-treeview .icon-doc-text::before {

content: '\e812';

}

.sidebar-treeview .main-treeview .icon-circle-thin::before {

content: '\e808';

}

/* Specific styles for Toolbar component */

.tailwind-dark #wrapper .e-toolbar {

border-bottom: 1px solid #4b5563;

}

.material #wrapper .e-toolbar {

border-bottom: 1px solid rgba(0,0,0,0.12);

}

.tailwind #wrapper .e-toolbar {

border-bottom: 1px solid #e5e7eb;

}

.bootstrap5-dark #wrapper .e-toolbar {

border-bottom: 1px solid #444c54;

}

.bootstrap5 #wrapper .e-toolbar {

border-bottom: 1px solid #d2d6de;

}

#wrapper .main-content {

height: 380px;

}

/* Specific styles for Overall wrapper element*/

.material .sidebar-treeview {

border-right: 1px solid rgba(0,0,0,0.12) !important;

}

.fabric .sidebar-treeview {

border-right: 1px solid #eaeaea !important;

}

.tailwind .sidebar-treeview {

border-right: 1px solid #d7d7d7 !important;

}

.bootstrap5-dark .sidebar-treeview {

border-right: 1px solid #444c54 !important;

}

.bootstrap5 .sidebar-treeview {

border-right: 1px solid #dee2e6 !important;

}

.material-dark .sidebar-treeview {

border-right: 1px solid #616161 !important;

}

.fabric-dark .sidebar-treeview {

border-right: 1px menu #414040 !important;

}

.tailwind-dark .sidebar-treeview {

border-right: 1px solid #4b5563 !important;

}

.bootstrap5 .e-folder-name, .bootstrap5-dark .e-folder-name {

margin-top: -2px;

}

.bootstrap4 .e-folder-name,

.bootstrap .e-folder-name, .bootstrap-dark .e-folder-name {

margin-top: 3px;

}

.material .e-folder-name, .material-dark .e-folder-name {

margin-top: 1px;

}

</style>

I'm trying to use this sidebar instead of the default blazor one, how to make them

navigatable? and where is the icons source and is there a way to upload a custom one?
and last question how to remove the horizontal part?

8 Replies

PM Prasanth Madhaiyan Syncfusion Team December 14, 2023 11:59 AM UTC

Hi Hossam,

Greetings from Syncfusion support.

Query 1: I'm trying to use this sidebar instead of the default blazor one, how to make them navigatable?

To achieve your requirement, you need to place the Sidebar on the MainLayout page. For your reference, we have performed page navigation by using Sidebar with TreeView. You need to render the @Body as the main content of the Sidebar in the MainLayout.razor page of your application.

[MainLayout.razor]

…

@Body

</div>

</div>

…

In the TreeView component, we have provided a NavigateUrl property. By using this property, you can navigate to other pages.

[MainLayout.razor]

@*Initialize the Sidebar component*@

<SfSidebar class="sidebar-treeview" Width="290px" Target=".main-content" MediaQuery="(min-width:600px)" @bind-IsOpen="SidebarToggle">

<ChildContent>

…

<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>

</ChildContent>

</SfSidebar>

…

</div>

@code {

…

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

…

}

Query 2: where is the icon source?

You can use Syncfusion Blazor library icons by referring to the below user guide documentation. To achieve this requirement, For example, if you want to use the Bootstrap 5 theme's icons at your end, you need to set the proper font family (e-icons) and then the content value for the Bootstrap 5 theme to the corresponding component icons class “:before” pseudo-elements, as per the documentation.

Refer to the below code snippets. Here we have referred menu icon for the Toolbar component from the Bootstrap 5 theme.

[MainLayout.razor]

…

<style>

…

#wrapper .e-tbar-menu-icon:before {

content: '\e799';

font-family: 'e-icons';

}

…

</style>

…

https://blazor.syncfusion.com/documentation/appearance/icons

Query 3: is there a way to upload a custom one?

Yes, you can refer to the custom icons for the Syncfusion component at your end. To achieve this requirement, you need to set the proper font family, src and content value for the Blazor TreeView component icons class “:before” pseudo-elements on your end.

Please refer to the below code snippets.

[MainLayout.razor]

…

<style>

/*Specific styles for icon elements */

@@font-face {

font-family: 'fontello';

}

.sidebar-treeview .main-treeview .icon {

font-family: 'fontello';

font-size: 16px;

margin: -4px 0;

}

.sidebar-treeview .main-treeview .icon-microchip::before {

content: '\e806';

}

.sidebar-treeview .main-treeview .icon-thumbs-up-alt::before {

content: '\e805';

}

.sidebar-treeview .main-treeview .icon-docs::before {

content: '\e802';

}

.sidebar-treeview .main-treeview .icon-th::before {

content: '\e803';

}

.sidebar-treeview .main-treeview .icon-code::before {

content: '\e804';

}

.sidebar-treeview .main-treeview .icon-chrome::before {

content: '\e807';

}

.sidebar-treeview .main-treeview .icon-up-hand::before {

content: '\e810';

}

.sidebar-treeview .main-treeview .icon-bookmark-empty::before {

content: '\e811';

}

.sidebar-treeview .main-treeview .icon-help-circled::before {

content: '\e813';

}

.sidebar-treeview .main-treeview .icon-doc-text::before {

content: '\e812';

}

.sidebar-treeview .main-treeview .icon-circle-thin::before {

content: '\e808';

}

…

</style>

…

For your reference, we have attached the sample.

Sample: Attached as a zip file.

Query 4: How to remove the horizontal part?

Regarding the above query, we were unclear about your exact requirement for the Blazor Sidebar component. Could you please share your exact requirement for the Blazor Sidebar component with more details? Based on that, we will investigate and provide you with a prompt solution. Kindly get back to us with the requested details.

Regards,

Prasanth Madhaiyan.

Attachment: SidebarSample_3b829edf.zip

HM Hossam Metwally December 14, 2023 03:21 PM UTC

Thanks so much, please how to make the sidebar full website height?

Attachment: 20231214_17h22_04_3f0c18e7.zip

PM Prasanth Madhaiyan Syncfusion Team December 15, 2023 09:19 AM UTC

Hi Hossam,

Based on the details you've shared, we understand that your requirement is to make the Blazor Sidebar component the full height of your website. To achieve this, you need to set the Blazor Sidebar main content class as 'e-main-content'. The HTML element with the class name 'e-main-content' will be considered as the main content, and the Sidebar will behave as side content to this main content area of a web page.

Refer to the below code snippets.

[MainLayout.razor]

@*Initialize the Sidebar component*@

<SfSidebar class="sidebar-treeview" Width="290px" MediaQuery="(min-width:600px)" @bind-IsOpen="SidebarToggle">

<ChildContent>

…

</ChildContent>

</SfSidebar>

…

@*main-content declaration*@

@Body

</div>

</div>

…

For your reference, we have attached the sample and screenshot.

Sample: Attached as a zip file.

Screenshot:

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: SidebarSample_f03b99cd.zip

HM Hossam Metwally December 15, 2023 02:46 PM UTC

thank you.

the problem now is the width, I don't know why it's messed up, and also when I link items the icon is not aligned with the name "

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

"

and here's my full code:

@page "/navbar"

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Inputs

@*Initialize the Sidebar component*@

<SfSidebar class="sidebar-treeview" Width="290px" Target=".main-content" MediaQuery="(min-width:600px)" @bind-IsOpen="SidebarToggle">

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

</div>

<div>

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

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

</TreeViewFieldsSettings>

</SfTreeView>

</div>

</ChildContent>

</SfSidebar>

<div>

@*Initialize the Toolbar component*@

<div class="e-folder-name">Navigation Pane</div>

</div>

</Template>

</ToolbarItem>

</ToolbarItems>

</SfToolbar>

</div>

@*main-content declaration*@

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

<div class="sidebar-content">

</div>