added touch navigation for side menu in dashboard

src/app/character/character-picker/character-card/character-card.component.ts

@@ -3,8 +3,6 @@ import {
   Input,
   Output,
   EventEmitter,
-  HostListener,
-  OnInit,
   Renderer2,
   ElementRef,
 } from '@angular/core';
@@ -25,7 +23,6 @@ export class CharacterCardComponent {
   public image: any;
   public races: any;
   public classes: any;
-  private timeout: any;
   private touchStartX: number = 0;
 
   constructor(
@@ -65,18 +62,6 @@ export class CharacterCardComponent {
     }
   }
 
-  // @HostListener('touchstart', ['$event'])
-  // onTouchStart(event: any) {
-  //   this.timeout = setTimeout(() => {
-  //     window.alert('Long press detected');
-  //   }, 1000); // 500 milliseconds
-  // }
-
-  // @HostListener('touchend')
-  // onTouchEnd() {
-  //   clearTimeout(this.timeout);
-  // }
-
   public loadCharacterData(): void {
     console.log(this.characterData);
     this.dataAccessor

src/app/journal/journal-home/journal-home.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2, ElementRef } from '@angular/core';
 import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';
 
 @Component({
@@ -8,7 +8,12 @@ import { NavigationPanelService } from 'src/services/navigationPanel/navigation-
 })
 export class JournalHomeComponent {
   private isNavigationOpen: boolean = false;
-  public constructor(public navigation: NavigationPanelService) {}
+  private touchStartX: number = 0;
+  public constructor(
+    public navigation: NavigationPanelService,
+    private renderer: Renderer2,
+    private el: ElementRef,
+  ) {}
 
   ngOnInit() {
     const width = window.innerWidth;
@@ -27,5 +32,29 @@ export class JournalHomeComponent {
         this.navigation.closeNavigation();
       }
     });
+
+    this.renderer.listen(
+      this.el.nativeElement,
+      'touchstart',
+      this.onTouchStart.bind(this),
+    );
+    this.renderer.listen(
+      this.el.nativeElement,
+      'touchend',
+      this.onTouchEnd.bind(this),
+    );
+  }
+
+  onTouchStart(event: any) {
+    this.touchStartX = event.touches[0].clientX;
+  }
+
+  onTouchEnd(event: any) {
+    const touchEndX = event.changedTouches[0].clientX;
+    if (touchEndX > this.touchStartX + 100) {
+      this.navigation.openNavigation();
+    } else if (touchEndX < this.touchStartX - 100) {
+      this.navigation.closeNavigation();
+    }
   }
 }

src/app/journal/journal-home/navigation-panel/navigation-panel.component.html

@@ -6,7 +6,7 @@
       <div
         class="navigation-entry"
         [ngClass]="active === 1 ? 'active' : ''"
-        (click)="setActiveProperty(1); closeAll()"
+        (click)="setActiveProperty(1); closeAll(); closePanel()"
         [routerLink]="'./stats'"
       >
         {{ "navigation.dashboard" | translate }}
@@ -16,7 +16,7 @@
       <div
         class="navigation-entry"
         [ngClass]="active === 2 ? 'active' : ''"
-        (click)="setActiveProperty(2); closeAll()"
+        (click)="setActiveProperty(2); closeAll(); closePanel()"
         [routerLink]="'./character'"
       >
         {{ "navigation.character" | translate }}
@@ -26,7 +26,7 @@
       <div
         class="navigation-entry"
         [class]="active === 3 ? 'active' : ''"
-        (click)="setActiveProperty(3); closeAll()"
+        (click)="setActiveProperty(3); closeAll(); closePanel()"
         [routerLink]="'./inventory'"
       >
         {{ "navigation.inventory" | translate }}
@@ -36,7 +36,7 @@
       <div
         class="navigation-entry"
         [class]="active === 4 ? 'active' : ''"
-        (click)="setActiveProperty(4); closeAll()"
+        (click)="setActiveProperty(4); closeAll(); closePanel()"
         [routerLink]="'./spellcards'"
       >
         {{ "navigation.spells" | translate }}
@@ -46,7 +46,7 @@
       <div
         class="navigation-entry"
         [class]="active === 5 ? 'active' : ''"
-        (click)="setActiveProperty(5); closeAll()"
+        (click)="setActiveProperty(5); closeAll(); closePanel()"
         [routerLink]="'./notes'"
       >
         {{ "navigation.notes" | translate }}
@@ -56,7 +56,7 @@
       <div
         class="navigation-entry"
         [class]="active === 6 ? 'active' : ''"
-        (click)="setActiveProperty(6); closeAll()"
+        (click)="setActiveProperty(6); closeAll(); closePanel()"
         [routerLink]="'./spellbook'"
       >
         {{ "navigation.spellbook" | translate }}
@@ -66,7 +66,7 @@
       <div
         class="navigation-entry"
         [class]="active === 7 ? 'active' : ''"
-        (click)="setActiveProperty(7); closeAll()"
+        (click)="setActiveProperty(7); closeAll(); closePanel()"
         [routerLink]="'./quests'"
       >
         {{ "navigation.quests" | translate }}
@@ -76,7 +76,7 @@
       <div
         class="navigation-entry"
         [class]="active === 8 ? 'active' : ''"
-        (click)="setActiveProperty(8); closeAll()"
+        (click)="setActiveProperty(8); closeAll(); closePanel()"
         [routerLink]="'./npcs'"
       >
         {{ "navigation.npcs" | translate }}
@@ -86,7 +86,7 @@
       <div
         class="navigation-entry"
         [class]="active === 9 ? 'active' : ''"
-        (click)="setActiveProperty(9); closeAll()"
+        (click)="setActiveProperty(9); closeAll(); closePanel()"
         [routerLink]="'./places'"
       >
         {{ "navigation.places" | translate }}
@@ -96,7 +96,7 @@
       <div
         class="navigation-entry"
         [class]="active === 10 ? 'active' : ''"
-        (click)="setActiveProperty(10); closeAll()"
+        (click)="setActiveProperty(10); closeAll(); closePanel()"
         [routerLink]="'./maps'"
       >
         {{ "navigation.maps" | translate }}
@@ -107,7 +107,7 @@
       <div
         class="navigation-entry"
         [class]="active === 11 ? 'active' : ''"
-        (click)="setActiveProperty(11); closeAll()"
+        (click)="setActiveProperty(11); closeAll(); closePanel()"
         [routerLink]="'./ruleset'"
       >
         {{ "navigation.rules" | translate }}