feat(menu): highlight active page (#25)

DHBW-VS · Nov 2, 2022 · 1aa20f0 · 1aa20f0
1 parent b6a6981
commit 1aa20f0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 31 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -7,25 +7,25 @@
     </ion-header>
     <ion-content>
       <ion-list lines="none">
-        <ion-item button="true" (click)="openPage('/login')">
+        <ion-item button="true" [routerLink]="['/login']" [routerLinkActive]="['active']" (click)="closeMenu()">
           <ion-avatar>
             <ion-icon name="log-in"></ion-icon>
           </ion-avatar>
           <ion-label>Login</ion-label>
         </ion-item>
-        <ion-item button="true" (click)="openPage('/canteen')">
+        <ion-item button="true" [routerLink]="['/canteen']" [routerLinkActive]="['active']" (click)="closeMenu()">
           <ion-avatar>
             <ion-icon name="restaurant"></ion-icon>
           </ion-avatar>
           <ion-label>Mensa</ion-label>
         </ion-item>
-        <ion-item button="true" (click)="openPage('/parking')">
+        <ion-item button="true" [routerLink]="['/parking']" [routerLinkActive]="['active']" (click)="closeMenu()">
           <ion-avatar>
             <ion-icon name="car"></ion-icon>
           </ion-avatar>
           <ion-label>Parkplätze</ion-label>
         </ion-item>
-        <ion-item button="true" (click)="openPage('/apartments')">
+        <ion-item button="true" [routerLink]="['/apartments']" [routerLinkActive]="['active']" (click)="closeMenu()">
           <ion-avatar>
             <ion-icon name="home"></ion-icon>
           </ion-avatar>
@@ -34,7 +34,13 @@
         <ion-item button="true" (click)="openWindow('mailto:[email protected]')" class="sub-item">
           <ion-label>Problem melden</ion-label>
         </ion-item>
-        <ion-item button="true" (click)="openPage('/imprint')" class="sub-item">
+        <ion-item
+          button="true"
+          [routerLink]="['/imprint']"
+          [routerLinkActive]="['active']"
+          (click)="closeMenu()"
+          class="sub-item"
+        >
           <ion-label>Impressum</ion-label>
         </ion-item>
       </ion-list>
@@ -46,57 +52,57 @@
       <ion-toolbar>
         <ion-title>DHBW VS</ion-title>
         <ion-buttons slot="end">
-          <ion-button (click)="openPage('/settings')">
+          <ion-button [routerLink]="['/settings']" (click)="closeMenu()">
             <ion-icon slot="icon-only" name="settings"></ion-icon>
           </ion-button>
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
     <ion-content>
       <ion-list lines="none">
-        <ion-item button="true" (click)="openPage('/dashboard')">
+        <ion-item button="true" [routerLink]="['/dashboard']" [routerLinkActive]="['active']" (click)="closeMenu()">
           <ion-avatar>
             <ion-icon name="apps"></ion-icon>
           </ion-avatar>
           <ion-label>Dashboard</ion-label>
         </ion-item>
-        <ion-item button="true" (click)="openPage('/plan')">
+        <ion-item button="true" [routerLink]="['/plan']" [routerLinkActive]="['active']" (click)="closeMenu()">
           <ion-avatar>
             <ion-icon name="document"></ion-icon>
           </ion-avatar>
           <ion-label>Pläne</ion-label>
         </ion-item>
-        <ion-item button="true" (click)="openPage('/canteen')">
+        <ion-item button="true" [routerLink]="['/canteen']" [routerLinkActive]="['active']" (click)="closeMenu()">
           <ion-avatar>
             <ion-icon name="restaurant"></ion-icon>
           </ion-avatar>
           <ion-label>Mensa</ion-label>
         </ion-item>
-        <ion-item button="true" (click)="openPage('/parking')">
+        <ion-item button="true" [routerLink]="['/parking']" [routerLinkActive]="['active']" (click)="closeMenu()">
           <ion-avatar>
             <ion-icon name="car"></ion-icon>
           </ion-avatar>
           <ion-label>Parkplätze</ion-label>
         </ion-item>
-        <ion-item button="true" (click)="openPage('/apartments')">
+        <ion-item button="true" [routerLink]="['/apartments']" [routerLinkActive]="['active']" (click)="closeMenu()">
           <ion-avatar>
             <ion-icon name="home"></ion-icon>
           </ion-avatar>
           <ion-label>Wohnungsmarkt</ion-label>
         </ion-item>
-        <ion-item button="true" (click)="openPage('/dualis')">
+        <ion-item button="true" [routerLink]="['/dualis']" [routerLinkActive]="['active']" (click)="closeMenu()">
           <ion-avatar>
             <ion-icon name="school"></ion-icon>
           </ion-avatar>
           <ion-label>Dualis</ion-label>
         </ion-item>
-        <ion-item button="true" (click)="openPage('/contact')">
+        <ion-item button="true" [routerLink]="['/contact']" [routerLinkActive]="['active']" (click)="closeMenu()">
           <ion-avatar>
             <ion-icon name="person-circle"></ion-icon>
           </ion-avatar>
           <ion-label>Kontakte</ion-label>
         </ion-item>
-        <ion-item button="true" (click)="openPage('/sos')">
+        <ion-item button="true" [routerLink]="['/sos']" [routerLinkActive]="['active']" (click)="closeMenu()">
           <ion-avatar>
             <ion-icon name="call"></ion-icon>
           </ion-avatar>
@@ -105,7 +111,13 @@
         <ion-item button="true" (click)="openWindow('mailto:[email protected]')" class="sub-item">
           <ion-label>Problem melden</ion-label>
         </ion-item>
-        <ion-item button="true" (click)="openPage('/imprint')" class="sub-item">
+        <ion-item
+          button="true"
+          [routerLink]="['/imprint']"
+          [routerLinkActive]="['active']"
+          (click)="closeMenu()"
+          class="sub-item"
+        >
           <ion-label>Impressum</ion-label>
         </ion-item>
       </ion-list>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -0,0 +1,3 @@
+ion-item.active {
+  --color: var(--ion-color-primary);
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
 import { SplashScreen } from '@capacitor/splash-screen';
 import { StatusBar, Style } from '@capacitor/status-bar';
 import { MenuController, Platform } from '@ionic/angular';
@@ -8,18 +7,26 @@ import { CapacitorAppService } from './core';
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss'],
 })
 export class AppComponent {
   constructor(
     private readonly platform: Platform,
     private readonly menuController: MenuController,
-    private readonly router: Router,
     // Do NOT remove the following services:
     private readonly capacitorAppService: CapacitorAppService,
   ) {
     void this.initializeApp();
   }
 
+  public async closeMenu(): Promise<void> {
+    await this.menuController.close();
+  }
+
+  public openWindow(url: string): any {
+    return window.open(url, '_self');
+  }
+
   private async initializeApp(): Promise<void> {
     await this.platform.ready();
     const isCapacitor = this.platform.is('capacitor');
@@ -44,18 +51,4 @@ export class AppComponent {
   private hideSplashScreen(): Promise<void> {
     return SplashScreen.hide();
   }
-
-  public async openPage(page: string): Promise<boolean> {
-    void this.menuController.close();
-    return this.router.navigateByUrl(page);
-  }
-
-  public async pushPage(page: string): Promise<boolean> {
-    void this.menuController.close();
-    return this.router.navigateByUrl(page, { skipLocationChange: true });
-  }
-
-  public openWindow(url: string): any {
-    return window.open(url, '_self');
-  }
 }