|
<div id="wrapper">
<div class="col-lg-12 col-sm-12 col-md-12">
<div class="header-section dock-menu" id="header">
<ul class="header-list">
<li id="hamburger" class="icon-menu icon list" @onclick="@Toggle"></li>
<input type="text" placeholder="Search..." class="search-icon list">
<li class="right-header list">
<div class="horizontal-menu">
<EjsMenu CssClass="dock-menu" Items="@AccountMenuItems" Orientation="@Orientation"></EjsMenu>
</div>
</li>
<li class="right-header list support">Support</li>
<li class="right-header list tour">Tour</li>
</ul>
</div>
<EjsSidebar HtmlAttributes="@htmlAttribute" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" @ref="sidebar">
<ChildContent>
<div class="main-menu">
<p class="main-menu-header">MAIN</p>
<div>
<EjsMenu ModelType="@MenuTemplate" Fields="@MenuFields" Items="@MainMenuItems" Orientation="Orientation.Vertical">
<MenuTemplates>
<Template>
@{
var MenuItems = (context as MenuTemplateModel);
if (MenuItems.Icon != null)
{
<span class="e-menu-icon @MenuItems.Icon" title="@MenuItems.Value"></span>
}
if (!string.IsNullOrEmpty(MenuItems.Link))
{
<a rel='nofollow' href="@MenuItems.Link">@MenuItems.Value</a>
}
else
{
@MenuItems.Value
}
}
</Template>
</MenuTemplates>
</EjsMenu>
</div>
</div>
<div class="action">
<p class="main-menu-header">ACTION</p>
<button class="e-btn action-btn" id="action-button">+ Button</button>
</div>
</ChildContent>
</EjsSidebar>
<div class="main-content" id="maintext">
<div class="content">
<div> Responsive Sidebar with Menu</div>
</div>
</div>
</div>
</div>
@code {
EjsSidebar sidebar;
public Orientation Orientation = Orientation.Horizontal;
public Orientation Verorientation = Orientation.Vertical;
Dictionary<string, object> htmlAttribute = new Dictionary<string, object>()
{
{"class", "sidebar-menu" }
};
public List<MenuItem> AccountMenuItems = new List<MenuItem> {
new MenuItem {
Text = "Account",
Items = new List<MenuItem> {
new MenuItem { Text = "Profile" },
new MenuItem { Text = "Sign out" }
}
}
};
MenuTemplateModel MenuTemplate = new MenuTemplateModel();
private List<MenuTemplateModel>
MainMenuItems = new List<MenuTemplateModel>
{
new MenuTemplateModel { Icon ="icon-bookmark icon", Value = "Meni"},
new MenuTemplateModel { Icon ="icon-bookmark icon", Value = "Pokupi podateke"},
new MenuTemplateModel { Icon ="icon-user icon",Value = "Overview", Options = new List<MenuTemplateModel>{
new MenuTemplateModel { Value= "All Data" },
new MenuTemplateModel { Value= "Category2" },
new MenuTemplateModel { Value= "Category3" }
}
},
};
MenuFieldSettings MenuFields = new MenuFieldSettings()
{
Text = "Value",
Url = "Link",
IconCss = "Icon",
Children = "Options"
};
private class MenuTemplateModel
{
public List<MenuTemplateModel> Options { get; set; }
public string Value { get; set; }
public string Link { get; set; }
public string Icon { get; set; }
}
public void Toggle()
{
this.sidebar.Toggle();
}
}
| 
