Added global admin role to username if applicable

Author: fcv-iteratorIt

src/app/navbar/navbar.component.html

@@ -1,7 +1,7 @@
 <nav
-  class="navbar-container navbar navbar-expand-md navbar-light d-md-flex align-items-md-start flex-md-column p-3 no-shadow"
-  aria-expanded="false"
   [class.nav-visible]="isVisible"
+  aria-expanded="false"
+  class="navbar-container navbar navbar-expand-md navbar-light d-md-flex align-items-md-start flex-md-column p-3 no-shadow"
 >
   <img [src]="imagePath" alt="OS2IoT-logo" class="img-logo"/>
 
@@ -129,6 +129,6 @@
   </ng-template>
 </nav>
 
-<div [class.nav-visible-button]="isVisible" class="toggle-button" (click)="toggleNavbar()">
+<div (click)="toggleNavbar()" [class.nav-visible-button]="isVisible" class="toggle-button">
   <mat-icon class="icon-arrow-nav rotate" svgIcon="nav-arrow"></mat-icon>
 </div>

src/app/navbar/navbar.component.scss

@@ -119,7 +119,7 @@ button:focus,
 
 .no-shadow {
   box-shadow: none;
-  z-index: 10000;
+  z-index: 100;
 }
 
 ::ng-deep .mdc-notched-outline__leading {
@@ -147,6 +147,7 @@ button:focus,
   padding: 0 2px 0 0;
   border-radius: 0 5px 5px 0;
   transition: left 0.3s ease-in-out, border-radius 0.3s ease-in-out;
+  z-index: 101;
 
   &:hover {
     background-color: $color-link-active-bg;
@@ -160,6 +161,7 @@ button:focus,
     border-radius: 5px 0 0 5px;
     left: 248px;
     padding: 0 0 0 2px;
+
     .icon-arrow-nav {
       transform: rotate(0deg);
     }

src/app/shared/components/top-bar/top-bar.component.html

@@ -28,7 +28,9 @@
     <div class="user-information-container">
       <div class="name-and-title-container">
         <div class="name-container">{{ getUsername() }}</div>
-        <!-- <div class="title-container">Global Admin</div> -->
+        <div *ngIf="meService.hasGlobalAdmin()"
+             class="title-container">{{ 'PERMISSION-TYPE.GlobalAdmin' | translate }}
+        </div>
       </div>
       <div>
         <mat-icon class="angle-down-icon" svgIcon="angle-down"></mat-icon>

src/app/shared/components/top-bar/top-bar.component.ts

@@ -22,6 +22,7 @@ import { QuickActionButton } from "@shared/models/quick-action-button.model";
 import { Sort } from "@shared/models/sort.model";
 import { LoggedInService } from "@shared/services/loggedin.service";
 import { SharedVariableService } from "@shared/shared-variable/shared-variable.service";
+import { MeService } from "@shared/services/me.service";
 
 @Component({
   selector: "app-top-bar",
@@ -79,7 +80,8 @@ export class TopBarComponent implements OnInit {
     private authService: AuthService,
     private loggedInService: LoggedInService,
     private matIconRegistry: MatIconRegistry,
-    private domSanitizer: DomSanitizer
+    private domSanitizer: DomSanitizer,
+    public meService: MeService
   ) {
     translate.use("da");
 
@@ -100,8 +102,6 @@ export class TopBarComponent implements OnInit {
       this.domSanitizer.bypassSecurityTrustResourceUrl("../../../../assets/images/search.svg"),
       {}
     );
-
-    this.sharedVariableService.getUserInfo;
   }
 
   ngOnInit(): void {