Change current menu to be based on new dropdown module

modules/portmaster/src/app/shared/menu/index.ts

@@ -1 +1,2 @@
 export { MenuComponent, MenuTriggerComponent, MenuItemComponent, MenuGroupComponent } from './menu';
+export * from './menu.module';

modules/portmaster/src/app/shared/menu/menu-group.scss

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  width: 100%;
+
+  @apply p-1;
+  @apply px-4;
+  @apply text-secondary;
+
+  display: block;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  opacity: .7;
+}

modules/portmaster/src/app/shared/menu/menu-item.scss

@@ -0,0 +1,17 @@
+:host {
+  @apply block w-full;
+
+  cursor: pointer;
+  @apply p-2;
+  @apply px-4 text-primary text-xxs;
+  font-weight: 500;
+
+  &:hover {
+    @apply bg-gray-300;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

modules/portmaster/src/app/shared/menu/menu-trigger.scss

@@ -36,6 +36,6 @@ div {
 }
 
 :host.active {
-  @apply bg-gray-500;
+  @apply bg-gray-400;
   color: white !important;
 }

modules/portmaster/src/app/shared/menu/menu.html

@@ -1,12 +1,5 @@
-<ng-template [ngIf]="!!trigger">
-
-  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger!.origin!" [cdkConnectedOverlayOpen]="isOpen"
-    (detach)="onOverlayClosed()" [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
-    [cdkConnectedOverlayMinWidth]="minWidth" [cdkConnectedOverlayPositions]="positions"
-    (overlayOutsideClick)="onOutsideClick($event)">
-    <div class="item-list" [@fadeIn] [@fadeOut]>
-      <ng-content></ng-content>
-    </div>
-  </ng-template>
-
-</ng-template>
+<sfng-dropdown externalTrigger="true" #dropdown="sfngDropdown" offsetY="0">
+  <div class="flex flex-col flex-grow w-full h-full bg-gray-400 shadow select-none">
+    <ng-content></ng-content>
+  </div>
+</sfng-dropdown>

modules/portmaster/src/app/shared/menu/menu.module.ts

@@ -0,0 +1,26 @@
+import { OverlayModule } from "@angular/cdk/overlay";
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { SfngDropDownModule } from "../dropdown/dropdown.module";
+import { MenuComponent, MenuGroupComponent, MenuItemComponent, MenuTriggerComponent } from "./menu";
+
+@NgModule({
+  imports: [
+    SfngDropDownModule,
+    CommonModule,
+    OverlayModule,
+  ],
+  declarations: [
+    MenuComponent,
+    MenuGroupComponent,
+    MenuTriggerComponent,
+    MenuItemComponent,
+  ],
+  exports: [
+    MenuComponent,
+    MenuGroupComponent,
+    MenuTriggerComponent,
+    MenuItemComponent,
+  ],
+})
+export class SfngMenuModule { }

modules/portmaster/src/app/shared/menu/menu.ts

@@ -2,6 +2,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { CdkOverlayOrigin, ConnectedPosition, ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, QueryList, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
 import { fadeInAnimation, fadeOutAnimation } from '../animations';
+import { SfngDropdown } from '../dropdown/dropdown';
 
 @Component({
   selector: 'app-menu-trigger',
@@ -11,7 +12,7 @@ import { fadeInAnimation, fadeOutAnimation } from '../animations';
 })
 export class MenuTriggerComponent {
   @ViewChild(CdkOverlayOrigin, { static: true })
-  origin: CdkOverlayOrigin | null = null;
+  origin!: CdkOverlayOrigin;
 
   @Input()
   menu: MenuComponent | null = null;
@@ -29,34 +30,25 @@ export class MenuTriggerComponent {
       return false;
     }
 
-    return this.menu.isOpen;
+    return this.menu.dropdown.isOpen;
   }
 
   constructor(
     public changeDetectorRef: ChangeDetectorRef,
-    public elementRef: ElementRef,
   ) { }
 
   toggle(event: MouseEvent) {
     event.preventDefault();
     event.stopPropagation();
 
-    if (!this.menu) {
-      return;
-    }
-
-    if (this.menu.isOpen) {
-      this.menu.close();
-      return;
-    }
-
-    this.menu.show(this);
+    this.menu?.dropdown.toggle(this.origin)
   }
 }
 
 @Component({
   selector: 'app-menu-item',
   template: '<ng-content></ng-content>',
+  styleUrls: ['./menu-item.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenuItemComponent {
@@ -74,7 +66,7 @@ export class MenuItemComponent {
       return;
     }
     this.onActivate.next(event);
-    this.menu.close();
+    this.menu.dropdown.close();
   }
 
   /**
@@ -91,6 +83,7 @@ export class MenuItemComponent {
 @Component({
   selector: 'app-menu-group',
   template: '<ng-content></ng-content>',
+  styleUrls: ['./menu-group.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenuGroupComponent { }
@@ -99,83 +92,12 @@ export class MenuGroupComponent { }
   selector: 'app-menu',
   exportAs: 'appMenu',
   templateUrl: './menu.html',
-  styleUrls: ['./menu.scss'],
-  encapsulation: ViewEncapsulation.None,
-  animations: [
-    fadeInAnimation,
-    fadeOutAnimation,
-  ]
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenuComponent {
   @ContentChildren(MenuItemComponent)
   items: QueryList<MenuItemComponent> | null = null;
 
-  scrollStrategy: ScrollStrategy;
-  minWidth: number = 0;
-
-  positions: ConnectedPosition[] = [
-    {
-      originX: 'end',
-      originY: 'bottom',
-      overlayX: 'end',
-      overlayY: 'top',
-    },
-    {
-      originX: 'end',
-      originY: 'top',
-      overlayX: 'end',
-      overlayY: 'bottom',
-    },
-  ]
-
-  trigger: MenuTriggerComponent | null = null;
-
-  isOpen = false;
-
-  onOverlayClosed() {
-    this.close()
-  }
-
-  onOutsideClick(event: MouseEvent) {
-    if (!!this.trigger) {
-      const triggerEl = this.trigger.origin!.elementRef.nativeElement;
-
-      let node = event.target;
-      while (!!node) {
-        if (node === triggerEl) {
-          return;
-        }
-        node = this.renderer.parentNode(node);
-      }
-    }
-
-    this.close();
-  }
-
-  constructor(
-    scrollOptions: ScrollStrategyOptions,
-    private renderer: Renderer2,
-  ) {
-    this.scrollStrategy = scrollOptions.reposition();
-  }
-
-  close() {
-    this.isOpen = false;
-    if (!!this.trigger) {
-      this.trigger.changeDetectorRef.markForCheck();
-    }
-  }
-
-  show(t: MenuTriggerComponent | null) {
-    if (this.isOpen) {
-      return;
-    }
-
-    if (!!t) {
-      this.trigger = t;
-      const rect = (this.trigger.elementRef.nativeElement as HTMLElement).getBoundingClientRect()
-      this.minWidth = rect ? rect.width : 0;
-    }
-    this.isOpen = true;
-  }
+  @ViewChild(SfngDropdown, { static: true })
+  dropdown!: SfngDropdown;
 }