Improve navigation sub-menu and tabs effects (#2971)

* Improve nav border and colors on active and non-active

* Remove margin-top effect on active nav

* Use opacity / bold instead of color change on nav

* Remove dropdown items label in sub-menu and add a class active

* Position sub-menu to fixed

* Autoclose dropdown sub-menu only on outside click

* Remove open dropdown on hover in sub-menu

* Show reusable h1 for dropdown item in sub-menu

* Put reusable sub-menu h1 styles to mixins

* Add icons to sub-menu dropdown-item h1

* Make all the sub-menu accessible with focus

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

3 files changed, 15 insertions, 30 deletions

diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
index aeaceb662..c737b40c7 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
@@ -4,26 +4,28 @@
     <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
 
     <div *ngIf="!menuEntry.routerLink" ngbDropdown class="parent-entry"
-      #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
+      #dropdown="ngbDropdown" autoClose="outside">
       <span
         *ngIf="isInSmallView"
+        tabindex=0
         [ngClass]="{ active: !!suffixLabels[menuEntry.label] }"
-        (click)="openModal(id)" role="button" class="title-page title-page-settings">
+        (click)="openModal(id)" (keydown.enter)="openModal(id)"
+        role="button" class="title-page title-page-settings">
         <ng-container i18n>{{ menuEntry.label }}</ng-container>
-        <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
       </span>
 
       <span
         *ngIf="!isInSmallView"
-        (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
-        (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page title-page-settings"
+        tabindex=0
+        [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
+        (click)="dropdownAnchorClicked(dropdown)" (keydown.enter)="dropdownAnchorClicked(dropdown)"
+        role="button" class="title-page title-page-settings"
       >
         <ng-container i18n>{{ menuEntry.label }}</ng-container>
-        <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
       </span>
 
       <div ngbDropdownMenu>
-        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink">
+        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons, active: suffixLabels[menuEntry.label] === menuChild.label }" [routerLink]="menuChild.routerLink">
           <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
 
           {{ menuChild.label }}
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
index 84dd7dce3..655c38489 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
@@ -1,6 +1,12 @@
 @import '_variables';
 @import '_mixins';
 
+:host {
+  display: block;
+  height: $sub-menu-height;
+  margin-bottom: $sub-menu-margin-bottom;
+}
+
 .parent-entry {
   span[role=button] {
     cursor: pointer;
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
index 5909db0b5..66f8f7e55 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
@@ -33,7 +33,6 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
   isModalOpened = false
   currentMenuEntryIndex: number
 
-  private openedOnHover = false
   private routeSub: Subscription
 
   constructor (
@@ -68,32 +67,10 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     if (this.routeSub) this.routeSub.unsubscribe()
   }
 
-  openDropdownOnHover (dropdown: NgbDropdown) {
-    this.openedOnHover = true
-    dropdown.open()
-
-    // Menu was closed
-    dropdown.openChange
-            .pipe(take(1))
-            .subscribe(() => this.openedOnHover = false)
-  }
-
   dropdownAnchorClicked (dropdown: NgbDropdown) {
-    if (this.openedOnHover) {
-      this.openedOnHover = false
-      return
-    }
-
     return dropdown.toggle()
   }
 
-  closeDropdownIfHovered (dropdown: NgbDropdown) {
-    if (this.openedOnHover === false) return
-
-    dropdown.close()
-    this.openedOnHover = false
-  }
-
   openModal (index: number) {
     this.currentMenuEntryIndex = index
     this.isModalOpened = true