Open Closed

Assistance with Right hand side current user menu #178


User avatar
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)
  • User Avatar
    1
    liangshiwei created
    Support Team Fullstack Developer

    What UI are you using?

  • User Avatar
    0
    ThomasA created

    We are using Angular.

  • User Avatar
    0
    Mehmet created

    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.

  • User Avatar
    0
    Mehmet created
    Another and recommended way

    I created a GitHub gist to explain how to replace NavItemsComponent: https://gist.github.com/mehmet-erim/eb6e4c082dde5271778d1c55918298f1

    You should update the packages to v2.8.

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11