Skip to content

Commit 51bfbed

Browse files
hikalkanhikalkan
committed
Multi level menu implementation.
1 parent 4664593 commit 51bfbed

File tree

6 files changed

+85
-55
lines changed

6 files changed

+85
-55
lines changed

‎angular/src/app/layout/sidebar-nav.component.html‎

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,59 @@
22
<ul class="list">
33
<ng-template ngFor let-menuItem [ngForOf]="menuItems" let-mainMenuItemIndex="index">
44
<li *ngIf="showMenuItem(menuItem)" routerLinkActive="active">
5-
<a [routerLink]="[menuItem.route]">
6-
<i class="material-icons">{{menuItem.icon}}</i>
7-
<span>{{l(menuItem.name)}}</span>
5+
<!-- route name -->
6+
<a [routerLink]="[menuItem.route]" *ngIf="!menuItem.items && menuItem.route.indexOf('http') != 0">
7+
<i *ngIf="menuItem.icon" class="material-icons">{{menuItem.icon}}</i>
8+
<span>{{menuItem.name}}</span>
89
</a>
10+
<!-- Static link (starts with 'http') -->
11+
<a href="{{menuItem.route}}" target="_blank" *ngIf="!menuItem.items && menuItem.route.indexOf('http') == 0">
12+
<i *ngIf="menuItem.icon" class="material-icons">{{menuItem.icon}}</i>
13+
<span>{{menuItem.name}}</span>
14+
</a>
15+
<!-- Has child menu items (so, this is a parent menu) -->
16+
<a href="javascript:void(0);" class="menu-toggle" *ngIf="menuItem.items">
17+
<i *ngIf="menuItem.icon" class="material-icons">{{menuItem.icon}}</i>
18+
<span>{{menuItem.name}}</span>
19+
</a>
20+
<ul class="ml-menu" *ngIf="menuItem.items">
21+
<ng-template ngFor let-subMenuItem [ngForOf]="menuItem.items" let-mainMenuItemIndex="index">
22+
<li *ngIf="showMenuItem(subMenuItem)" routerLinkActive="active">
23+
<!-- route name -->
24+
<a [routerLink]="[subMenuItem.route]" *ngIf="!subMenuItem.items && subSubMenuItem.route.indexOf('http') != 0">
25+
<i *ngIf="subMenuItem.icon" class="material-icons">{{subMenuItem.icon}}</i>
26+
<span>{{subMenuItem.name}}</span>
27+
</a>
28+
<!-- Static link (starts with 'http') -->
29+
<a href="{{subMenuItem.route}}" target="_blank" *ngIf="!subMenuItem.items && subSubMenuItem.route.indexOf('http') == 0">
30+
<i *ngIf="subMenuItem.icon" class="material-icons">{{subMenuItem.icon}}</i>
31+
<span>{{subMenuItem.name}}</span>
32+
</a>
33+
<!-- Has child menu items (so, this is a parent menu) -->
34+
<a href="javascript:void(0);" class="menu-toggle" *ngIf="subMenuItem.items">
35+
<i *ngIf="subMenuItem.icon" class="material-icons">{{subMenuItem.icon}}</i>
36+
<span>{{subMenuItem.name}}</span>
37+
</a>
38+
<ul class="ml-menu" *ngIf="subMenuItem.items">
39+
<ng-template ngFor let-subSubMenuItem [ngForOf]="subMenuItem.items" let-mainMenuItemIndex="index">
40+
<li *ngIf="showMenuItem(subSubMenuItem)" routerLinkActive="active">
41+
<!-- route name -->
42+
<a [routerLink]="[subSubMenuItem.route]" *ngIf="subSubMenuItem.route.indexOf('http') != 0">
43+
<i *ngIf="subSubMenuItem.icon" class="material-icons">{{subSubMenuItem.icon}}</i>
44+
<span>{{subSubMenuItem.name}}</span>
45+
</a>
46+
<!-- Static link (starts with 'http') -->
47+
<a href="{{subSubMenuItem.route}}" target="_blank" *ngIf="subSubMenuItem.route.indexOf('http') == 0">
48+
<i *ngIf="subSubMenuItem.icon" class="material-icons">{{subSubMenuItem.icon}}</i>
49+
<span>{{subSubMenuItem.name}}</span>
50+
</a>
51+
</li>
52+
</ng-template>
53+
</ul>
54+
</li>
55+
</ng-template>
56+
</ul>
957
</li>
1058
</ng-template>
1159
</ul>
12-
</div>
60+
</div>

‎angular/src/app/layout/sidebar-nav.component.ts‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,28 @@ import { MenuItem } from '@shared/layout/menu-item';
1010
export class SideBarNavComponent extends AppComponentBase {
1111

1212
menuItems: MenuItem[] = [
13-
new MenuItem("HomePage", "", "home", "/app/home", true),
14-
new MenuItem("Tenants", "Pages.Tenants", "business", "/app/tenants", true),
15-
new MenuItem("Users", "Pages.Users", "people", "/app/users", true),
16-
new MenuItem("About", "", "info", "/app/about", true)
13+
new MenuItem(this.l("HomePage"), "", "home", "/app/home"),
14+
new MenuItem(this.l("Tenants"), "Pages.Tenants", "business", "/app/tenants"),
15+
new MenuItem(this.l("Users"), "Pages.Users", "people", "/app/users"),
16+
new MenuItem(this.l("About"), "", "info", "/app/about"),
17+
new MenuItem(this.l("MultiLevelMenu"), "", "menu", "", [
18+
new MenuItem("ASP.NET Boilerplate", "", "", "", [
19+
new MenuItem("Home", "", "", "https://aspnetboilerplate.com"),
20+
new MenuItem("Templates", "", "", "https://aspnetboilerplate.com/Templates"),
21+
new MenuItem("Samples", "", "", "https://aspnetboilerplate.com/Samples"),
22+
new MenuItem("Documents", "", "", "https://aspnetboilerplate.com/Pages/Documents"),
23+
new MenuItem("Forum", "", "", "https://forum.aspnetboilerplate.com/"),
24+
new MenuItem("About", "", "", "https://aspnetboilerplate.com/About")
25+
]),
26+
new MenuItem("ASP.NET Zero", "", "", "", [
27+
new MenuItem("Home", "", "", "https://aspnetzero.com?ref=abptmpl"),
28+
new MenuItem("Description", "", "", "https://aspnetzero.com/?ref=abptmpl#description"),
29+
new MenuItem("Features", "", "", "https://aspnetzero.com/?ref=abptmpl#features"),
30+
new MenuItem("Pricing", "", "", "https://aspnetzero.com/?ref=abptmpl#pricing"),
31+
new MenuItem("Faq", "", "", "https://aspnetzero.com/Faq?ref=abptmpl"),
32+
new MenuItem("Documents", "", "", "https://aspnetzero.com/Documents?ref=abptmpl")
33+
])
34+
])
1735
];
1836

1937
constructor(
@@ -23,15 +41,10 @@ export class SideBarNavComponent extends AppComponentBase {
2341
}
2442

2543
showMenuItem(menuItem): boolean {
26-
2744
if (menuItem.permissionName) {
2845
return this.permission.isGranted(menuItem.permissionName);
2946
}
3047

31-
if (!menuItem.requiresAuthentication) {
32-
return true;
33-
}
34-
35-
return this.appSession.userId > 0;
48+
return true;
3649
}
3750
}

‎angular/src/app/layout/topbar-languageswitch.component.ts‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import { Component, OnInit, Injector, ViewEncapsulation, ViewChild } from '@angular/core';
1+
import { Component, OnInit, Injector, ViewEncapsulation } from '@angular/core';
22
import { Router } from '@angular/router';
33
import { AbpSessionService } from '@abp/session/abp-session.service';
44
import { AppComponentBase } from '@shared/app-component-base';
55
import { AppAuthService } from '@shared/auth/app-auth.service';
66

7-
import { MenuItem } from '@shared/layout/menu-item';
8-
97
@Component({
108
templateUrl: './topbar-languageswitch.component.html',
119
selector: 'topbar-languageswitch',
@@ -25,31 +23,11 @@ export class TopBarLanguageSwitchComponent extends AppComponentBase implements O
2523
super(injector);
2624
}
2725

28-
menuItems: MenuItem[] = [
29-
new MenuItem("Home", "", "fa fa-home", "/app/home", true),
30-
new MenuItem("Tenants", "Pages.Tenants", "fa fa-globe", "/app/tenants", true),
31-
new MenuItem("Users", "Pages.Users", "fa fa-users", "/app/users", true),
32-
new MenuItem("About", "", "fa fa-info", "/app/about", false)
33-
];
34-
3526
ngOnInit() {
3627
this.languages = this.localization.languages;
3728
this.currentLanguage = this.localization.currentLanguage;
3829
}
3930

40-
showMenuItem(menuItem): boolean {
41-
42-
if (menuItem.permissionName) {
43-
return this.permission.isGranted(menuItem.permissionName);
44-
}
45-
46-
if (!menuItem.requiresAuthentication) {
47-
return true;
48-
}
49-
50-
return this._sessionService.userId > 0;
51-
}
52-
5331
changeLanguage(languageName: string): void {
5432
abp.utils.setCookieValue(
5533
"Abp.Localization.CultureName",

‎angular/src/shared/layout/menu-item.ts‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
export class MenuItem {
22
name: string = '';
33
permissionName: string = '';
4-
requiresAuthentication: boolean = false;
54
icon: string = '';
65
route: string = '';
76
items: MenuItem[];
87

9-
constructor(name: string, permissionName: string, icon: string, route: string, requiresAuthentication: boolean) {
8+
constructor(name: string, permissionName: string, icon: string, route: string, childItems: MenuItem[] = null) {
109
this.name = name;
1110
this.permissionName = permissionName;
1211
this.icon = icon;
1312
this.route = route;
14-
15-
if (permissionName) {
16-
this.requiresAuthentication = true;
17-
} else {
18-
this.requiresAuthentication = requiresAuthentication;
19-
}
13+
this.items = childItems;
2014
}
2115
}

‎angular/src/shared/layout/topbar.component.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,7 @@ export class TopBarComponent extends AppComponentBase implements OnInit {
3131
}
3232

3333
menuItems: MenuItem[] = [
34-
new MenuItem("Home", "", "fa fa-home", "/app/home", true),
35-
new MenuItem("Tenants", "Pages.Tenants", "fa fa-globe", "/app/tenants", true),
36-
new MenuItem("Users", "Pages.Users", "fa fa-users", "/app/users", true),
37-
new MenuItem("About", "", "fa fa-info", "/app/about", false)
34+
3835
];
3936

4037
ngOnInit() {

‎aspnet-core/src/AbpCompanyName.AbpProjectName.Web.Mvc/Startup/AbpProjectNameNavigationProvider.cs‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ public override void SetNavigation(INavigationProviderContext context)
7474
new MenuItemDefinition(
7575
"AspNetBoilerplateDocuments",
7676
new FixedLocalizableString("Documents"),
77-
url: "https://aspnetboilerplate.com/Documents"
77+
url: "https://aspnetboilerplate.com/Pages/Documents"
7878
)
7979
).AddItem(
8080
new MenuItemDefinition(
@@ -103,31 +103,31 @@ public override void SetNavigation(INavigationProviderContext context)
103103
new MenuItemDefinition(
104104
"AspNetZeroDescription",
105105
new FixedLocalizableString("Description"),
106-
url: "https://aspnetzero.com/#description"
106+
url: "https://aspnetzero.com/?ref=abptmpl#description"
107107
)
108108
).AddItem(
109109
new MenuItemDefinition(
110110
"AspNetZeroFeatures",
111111
new FixedLocalizableString("Features"),
112-
url: "https://aspnetzero.com/#features"
112+
url: "https://aspnetzero.com/?ref=abptmpl#features"
113113
)
114114
).AddItem(
115115
new MenuItemDefinition(
116116
"AspNetZeroPricing",
117117
new FixedLocalizableString("Pricing"),
118-
url: "https://aspnetzero.com/#pricing"
118+
url: "https://aspnetzero.com/?ref=abptmpl#pricing"
119119
)
120120
).AddItem(
121121
new MenuItemDefinition(
122122
"AspNetZeroFaq",
123123
new FixedLocalizableString("Faq"),
124-
url: "https://aspnetzero.com/Faq"
124+
url: "https://aspnetzero.com/Faq?ref=abptmpl"
125125
)
126126
).AddItem(
127127
new MenuItemDefinition(
128128
"AspNetZeroDocuments",
129129
new FixedLocalizableString("Documents"),
130-
url: "https://aspnetzero.com/Documents"
130+
url: "https://aspnetzero.com/Documents?ref=abptmpl"
131131
)
132132
)
133133
)

0 commit comments

Comments
 (0)