feat: Ionic v6 breadcrumbs in catalog module

src/app/modules/data/detail/data-path.html

@@ -0,0 +1,54 @@
+<!--
+  ~ Copyright (C) 2022 StApps
+  ~  This program is free software: you can redistribute it and/or modify it
+  ~  under the terms of the GNU General Public License as published by the Free
+  ~  Software Foundation, version 3.
+  ~
+  ~  This program is distributed in the hope that it will be useful, but WITHOUT
+  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~  more details.
+  ~
+  ~  You should have received a copy of the GNU General Public License along with
+  ~  this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<ng-container *ngIf="path | async as stack">
+  <ion-breadcrumbs
+    [itemsBeforeCollapse]="1"
+    [itemsAfterCollapse]="($width | async) >= 768 ? 1 : 0"
+    [maxItems]="2"
+    (ionCollapsedClick)="popover.present($event)"
+  >
+    <ion-breadcrumb *ngFor="let fragment of stack">
+      <ion-label
+        [routerLink]="['/data-detail', fragment.uid]"
+        [routerDirection]="'back'"
+        [style.max-width]="
+          stack.length === 1
+            ? '100%'
+            : stack.length === 2
+            ? '40vw'
+            : ($width | async) >= 768
+            ? '30vw'
+            : 'calc(100vw - 120px)'
+        "
+        class="crumb-label"
+        >{{ 'name' | thingTranslate: $any(fragment) }}</ion-label
+      >
+    </ion-breadcrumb>
+  </ion-breadcrumbs>
+  <ion-popover #popover>
+    <ng-template>
+      <ion-list>
+        <ion-item
+          *ngFor="let fragment of stack"
+          (click)="popover.dismiss()"
+          [routerLink]="['/data-detail', fragment.uid]"
+          [routerDirection]="'back'"
+          >{{ 'name' | thingTranslate: $any(fragment) }}</ion-item
+        >
+      </ion-list>
+    </ng-template>
+  </ion-popover>
+</ng-container>