[DURACOM-195] Improve dropdown behaviour on mouse events

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html

@@ -3,10 +3,10 @@
     *ngVar="(active | async) as isActive"
     (keyup.enter)="isActive ? deactivateSection($event) : activateSection($event)"
     (keyup.space)="isActive ? deactivateSection($event) : activateSection($event)"
-    (click)="!isActive && activateSection($event)"
+    (click)="toggleSection($event)"
     (keydown.space)="$event.preventDefault()"
-    (mouseenter)="activateSection($event)"
-    (mouseleave)="deactivateSection($event)">
+    (mouseenter)="onMouseEnter($event, isActive)"
+    (mouseleave)="onMouseLeave($event, isActive)">
     <a href="javascript:void(0);" routerLinkActive="active"
        role="menuitem"
        aria-haspopup="menu"

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts

@@ -1,10 +1,11 @@
-import { Component, Inject, Injector, OnInit } from '@angular/core';
+import { Component, HostListener, Inject, Injector, OnInit } from '@angular/core';
 import { NavbarSectionComponent } from '../navbar-section/navbar-section.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { slide } from '../../shared/animations/slide';
 import { first } from 'rxjs/operators';
 import { HostWindowService } from '../../shared/host-window.service';
 import { MenuID } from '../../shared/menu/menu-id.model';
+import { Observable } from 'rxjs';
 
 /**
  * Represents an expandable section in the navbar
@@ -21,25 +22,68 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
    */
   menuID = MenuID.PUBLIC;
 
+  /**
+   * True if mouse has entered the menu section toggler
+   */
+  mouseEntered = false;
+
+  /**
+   * True if screen size was small before a resize event
+   */
+  wasMobile = undefined;
+
+  /**
+   * Observable that emits true if the screen is small, false otherwise
+   */
+  isMobile$: Observable<boolean>;
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.isMobile$.pipe(
+      first()
+    ).subscribe((isMobile) => {
+      if (isMobile && !this.wasMobile) {
+        this.wasMobile = true;
+        this.menuService.deactivateSection(this.menuID, this.section.id);
+        this.mouseEntered = false;
+      }
+    });
+  }
+
   constructor(@Inject('sectionDataProvider') menuSection,
               protected menuService: MenuService,
               protected injector: Injector,
               private windowService: HostWindowService
   ) {
     super(menuSection, menuService, injector);
+    this.isMobile$ = this.windowService.isMobile();
   }
 
   ngOnInit() {
     super.ngOnInit();
   }
 
+  onMouseEnter($event: Event, isActive: boolean) {
+    if (!isActive && !this.mouseEntered) {
+       this.activateSection($event);
+    }
+    this.mouseEntered = true;
+  }
+
+  onMouseLeave($event: Event, isActive: boolean) {
+    if (isActive && this.mouseEntered) {
+      this.deactivateSection($event);
+    }
+    this.mouseEntered = false;
+  }
+
   /**
    * Overrides the super function that activates this section (triggered on hover)
    * Has an extra check to make sure the section can only be activated on non-mobile devices
    * @param {Event} event The user event that triggered this function
    */
   activateSection(event): void {
-    this.windowService.isXsOrSm().pipe(
+    this.isMobile$.pipe(
       first()
     ).subscribe((isMobile) => {
       if (!isMobile) {
@@ -54,7 +98,7 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
    * @param {Event} event The user event that triggered this function
    */
   deactivateSection(event): void {
-    this.windowService.isXsOrSm().pipe(
+    this.isMobile$.pipe(
       first()
     ).subscribe((isMobile) => {
       if (!isMobile) {