0
ThomasA created
Good day,
I require some assistance in overriding/extending the RHS user menu
I would like add in addtional menu items pertaining to the current user.
Instead of showing
- Manage your profile
- Log out
I would like to have
- Manage your profile
- [new menu item]
- Log out
Your assitance will be greatly appreciated
4 Answer(s)
-
1
What UI are you using?
-
0
We are using Angular.
-
0
Hi @ThomasA
After v2.8 is released, you can update the
app.component.ts
file to replace user nav element as shown below:import { ABP, // imported ApplicationConfiguration, // imported AuthService, // imported ConfigState, // imported LazyLoadService, LOADING_STRATEGY, SessionState, // imported } from '@abp/ng.core'; import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; // imported TemplateRef and ViewChild import { Router } from '@angular/router'; // added this line import { Select, Store } from '@ngxs/store'; // added this line import { forkJoin, Observable } from 'rxjs'; // imported Observable import { AddNavigationElement, eNavigationElementNames } from '@volo/abp.ng.theme.lepton'; // added this line @Component({ selector: 'app-root', template: ` <abp-loader-bar></abp-loader-bar> <router-outlet></router-outlet> <!-- Added below template --> <ng-template #currentUser> <li class="nav-item" *ngIf="currentUser$ | async as user"> <ng-template #loginBtn> <a role="button" routerLink="/account/login" class="btn ">{{ 'AbpAccount::Login' | abpLocalization }}</a> </ng-template> <div *ngIf="user.isAuthenticated; else loginBtn" class="dropdown btn-group" ngbDropdown> <a ngbDropdownToggle class="btn pointer"> <abp-current-user-image [currentUser]="user" classes="user-avatar" ></abp-current-user-image> <span class="d-lg-none ml-1"> <small *ngIf="(selectedTenant$ | async)?.name as tenantName" ><i>{{ tenantName }}</i></small > <span>{{ user.userName }}</span> </span> </a> <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right"> <div class="p-2 row"> <div class="pr-0 col col-auto"> <abp-current-user-image [currentUser]="user" classes="user-avatar-big" ></abp-current-user-image> </div> <div class="pl-2 col"> <span>{{ 'AbpAccount::Welcome' | abpLocalization }}</span ><br /> <small *ngIf="(selectedTenant$ | async)?.name as tenantName" ><i>{{ tenantName }}</i></small > <strong>{{ user.userName }}</strong> </div> </div> <div class="dropdown-divider"></div> <a class="dropdown-item pointer" routerLink="/account/manage-profile">{{ 'AbpAccount::ManageYourProfile' | abpLocalization }}</a> <a class="dropdown-item pointer"> New menu item</a> <a class="dropdown-item pointer" id="logout" (click)="logout()">{{ 'AbpUi::Logout' | abpLocalization }}</a> </div> </div> </li> </ng-template> `, }) export class AppComponent implements OnInit { // added @Select(ConfigState.getOne('currentUser')) currentUser$: Observable<ApplicationConfiguration.CurrentUser>; // added @Select(SessionState.getTenant) selectedTenant$: Observable<ABP.BasicItem>; // added @ViewChild('currentUser', { static: false }) currentUserTemplate: TemplateRef<any>; constructor( private lazyLoadService: LazyLoadService, private router: Router, // injected private authService: AuthService, // injected private store: Store, // injected ) {} ngOnInit() { forkJoin([ this.lazyLoadService.load(LOADING_STRATEGY.PrependAnonymousStyleToHead('flag-icon.min.css')), this.lazyLoadService.load( LOADING_STRATEGY.PrependAnonymousStyleToHead('fontawesome-v4-shims.min.css'), ), this.lazyLoadService.load( LOADING_STRATEGY.PrependAnonymousStyleToHead('fontawesome-all.min.css'), ), ]).subscribe(); } // added ngAfterViewInit() { this.store.dispatch( new AddNavigationElement({ element: this.currentUserTemplate, name: eNavigationElementNames.User, order: 5, }), ); } // added logout() { this.authService.logout().subscribe(() => { this.router.navigate(['/'], { state: { redirectUrl: this.router.url } }); }); } }
We will work to replace the menu elements easily. Probably this document will be updated and covered the new way for replacement in v2.9.
-
0