MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Toggle navbar menu on mouse hover

This commit is contained in:
gpapavgeri 2020-08-24 10:56:49 +03:00
parent 995d5d75ee
commit 889c8b925b
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/ui/navbar/navbar.component.html
View File

@ -8,7 +8,7 @@
<div class="icon-bar3"></div>
</div>
<a class="logo"><img src="../../../assets/splash/assets/img/argos-logo-2.svg"></a>
<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu">
<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()">
<mat-icon class="toggle-icon">view_headline</mat-icon>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
@ -44,7 +44,7 @@
</div>
<mat-menu #toggleMenu="matMenu">
<div *ngIf="!(isAuthenticated() && onInvalidUrl())">
<div *ngIf="!(isAuthenticated() && onInvalidUrl())" (mouseleave)="closeMyMenu()">
<ul class="list m-2">
<li *ngIf="isAuthenticated();else loginoption" class="d-flex justify-content-center avatar">
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()">

13
dmp-frontend/src/app/ui/navbar/navbar.component.ts
View File

@ -1,6 +1,6 @@
import { Location } from '@angular/common';
import { Component, ElementRef, EventEmitter, OnInit, Output } from '@angular/core';
import { MatDialog } from '@angular/material';
import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
import { MatDialog, MatMenuTrigger } from '@angular/material';
import { Router } from '@angular/router';
import { AppRole } from '@app/core/common/enum/app-role';
import { AuthService } from '@app/core/services/auth/auth.service';
@ -37,6 +37,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
selectedLanguage = 'en';
private user: UserListingModel;
@Output() sidebarToggled: EventEmitter<any> = new EventEmitter();
@ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger;
constructor(location: Location,
private element: ElementRef,
@ -83,6 +84,14 @@ export class NavbarComponent extends BaseComponent implements OnInit {
return this.currentRoute === '/language-editor' || this.currentRoute === '/profile';
}
openMyMenu() {
this.trigger.openMenu();
}
closeMyMenu() {
this.trigger.closeMenu();
}
sidebarOpen() {
const toggleButton = this.toggleButton;
const body = document.getElementsByTagName('body')[0];