refactor: header defaults and functions

packages/data-models/appConfig.ts

@@ -89,44 +89,27 @@ export type IHeaderVariantOptions = "default" | "compact";
 
 interface IAppConfigHeader {
   back_button: {
-    hidden: boolean;
+    hidden?: boolean;
   };
   collapse: boolean;
   colour: IHeaderFooterBackgroundOptions;
-  hidden: boolean;
+  hidden?: boolean;
   menu_button: {
-    hidden: boolean;
+    hidden?: boolean;
   };
   template: string | null;
   title: string;
   variant: IHeaderVariantOptions;
-  should_show_menu_button: (location: Location) => boolean;
-  should_show_back_button: (location: Location) => boolean;
-  should_minimize_app_on_back: (location: Location) => boolean;
 }
 
 const APP_HEADER_DEFAULTS: IAppConfigHeader = {
-  back_button: {
-    hidden: false,
-  },
+  back_button: {},
   collapse: false,
   colour: "primary",
-  hidden: false,
-  menu_button: {
-    hidden: false,
-  },
+  menu_button: {},
   template: null,
   title: "App",
   variant: "default",
-  // default only show menu button on home screen
-  should_show_menu_button: (location: Location) =>
-    activeRoute(location) === APP_ROUTE_DEFAULTS.home_route,
-  // default show back button on all screens except home screen
-  should_show_back_button: (location: Location) =>
-    activeRoute(location) !== APP_ROUTE_DEFAULTS.home_route,
-  // on device minimize app when back button pressed from home screen
-  should_minimize_app_on_back: (location: Location) =>
-    activeRoute(location) === APP_ROUTE_DEFAULTS.home_route,
 };
 
 /**

src/app/shared/components/header/header.component.ts

@@ -2,14 +2,15 @@ import { Location } from "@angular/common";
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
 import { computed, effect, signal } from "@angular/core";
 import { toSignal } from "@angular/core/rxjs-interop";
-import { NavigationEnd, NavigationStart, Router } from "@angular/router";
+import { NavigationStart, Router } from "@angular/router";
 import { App } from "@capacitor/app";
 import { Capacitor, PluginListenerHandle } from "@capacitor/core";
 import { Subscription, fromEvent, map } from "rxjs";
 import type { IHeaderVariantOptions } from "data-models/appConfig";
 import { AppConfigService } from "../../services/app-config/app-config.service";
 import { IonHeader, ScrollBaseCustomEvent, ScrollDetail } from "@ionic/angular";
 import { _wait } from "packages/shared/src/utils/async-utils";
+import { activeRoute } from "../../utils/angular.utils";
 
 interface ScrollCustomEvent extends ScrollBaseCustomEvent {
   detail: ScrollDetail;
@@ -51,6 +52,9 @@ export class headerComponent implements OnInit, OnDestroy {
   /** Track scroll events when using header collapse mode */
   private scrollEvents$: Subscription;
 
+  /** Track whether on home route for back button and menu button side-effects */
+  private isHomeRoute = true;
+
   constructor(
     private router: Router,
     private location: Location,
@@ -101,22 +105,24 @@ export class headerComponent implements OnInit, OnDestroy {
 
   /** Determine whether to show back and menu buttons based on location */
   private handleRouteChange() {
-    const { back_button, menu_button, should_show_back_button, should_show_menu_button } =
-      this.headerConfig();
+    // update whether home route or not
+    const { APP_ROUTE_DEFAULTS } = this.appConfigService.appConfig();
+    this.isHomeRoute = activeRoute(location) === APP_ROUTE_DEFAULTS.home_route;
+
+    const { back_button, menu_button } = this.headerConfig();
 
     // The explicit `hidden` property should override the function of location
     // TODO: move functions to component code and out of app config, no use case for overriding them
-    const showBackButton = !back_button.hidden && should_show_back_button(location);
-    const showMenuButton = !menu_button.hidden && should_show_menu_button(location);
+    const showBackButton = !back_button.hidden && !this.isHomeRoute;
+    const showMenuButton = !menu_button.hidden && this.isHomeRoute;
     this.showBackButton.set(showBackButton);
     this.showMenuButton.set(showMenuButton);
     this.marginTop.set(0);
   }
 
   /** When device back button evaluate conditions to handle app minimise */
   private handleHardwareBackPress() {
-    const { should_minimize_app_on_back } = this.headerConfig();
-    if (should_minimize_app_on_back(location)) {
+    if (this.isHomeRoute) {
       App.minimizeApp();
     }
   }

src/app/shared/services/skin/skin.service.spec.ts

@@ -32,14 +32,12 @@ const MOCK_SKIN_2: IAppSkin = {
 
 const MOCK_APP_CONFIG: Partial<IAppConfig> = {
   APP_HEADER_DEFAULTS: {
+    back_button: {},
+    menu_button: {},
     template: null,
-    show: true,
     title: "default",
     collapse: false,
     colour: "none",
-    should_minimize_app_on_back: () => true,
-    should_show_back_button: () => true,
-    should_show_menu_button: () => true,
     variant: "default",
   },
   APP_SKINS: {

src/app/shared/utils/angular.utils.ts

@@ -35,3 +35,13 @@ export function ngRouterMergedSnapshot$(router: Router) {
     startWith(mergeRouterSnapshots(router))
   );
 }
+
+/**
+ * Utility function to return the active pathname without any sidebar routing e.g. /home(sidebar:alt)
+ * or basename when deployed to subfolder path, e.g. /my-repo/template/home (provided by <base href='' /> in head)
+ * */
+export const activeRoute = (location: Location) => {
+  const baseHref = document.querySelector("base")?.getAttribute("href");
+  const path = location.pathname.replace(baseHref, "/").replace(/\(.+\)/, "");
+  return path;
+};