Improved: support to display the navigation bottom bar only on specif…

…ic routes

When using router.go, the router does not always go to the route list from details page if the user moves to settings page from the details page, thus removed the tab-bar to be displayed on specific route, so that the routing works always as expected

src/views/BrokeringQuery.vue

@@ -5,7 +5,10 @@
         <div class="menu">
           <ion-item lines="none">
             <ion-label>{{ currentRouting.routingName }}</ion-label>
-            <ion-back-button slot="end" :default-href="`/tabs/brokering/${currentRouting.routingGroupId}/routes`" :text="getRouteIndex()" :icon="chevronUpOutline"></ion-back-button>
+            <ion-chip slot="end" outline @click="router.go(-1)">
+              {{ getRouteIndex() }}
+              <ion-icon :icon="chevronUpOutline" />
+            </ion-chip>
           </ion-item>
           <ion-button class="ion-margin" expand="block" :disabled="!hasUnsavedChanges" @click="saveChanges">{{ translate("Save changes") }}</ion-button>
           <ion-item>
@@ -1087,17 +1090,6 @@ ion-chip > ion-select {
   min-height: unset;
 }
 
-/* Change the position of icon inside back-button to end, as the icon inside back-button is always displayed first */
-ion-back-button::part(icon) {
-  order: 2;
-}
-
-/* As no border is displayed by default to the ion-back-button */
-ion-back-button::part(native) {
-  border: 1px solid;
-  border-radius: 16px;
-}
-
 ion-input.ruleName {
   --background: var(--ion-color-light)
 }

src/views/Tabs.vue

@@ -2,7 +2,7 @@
   <ion-page>
     <ion-tabs>
       <ion-router-outlet></ion-router-outlet>
-      <ion-tab-bar slot="bottom">
+      <ion-tab-bar slot="bottom" v-if="showFooter()">
         <ion-tab-button tab="brokering" href="/tabs/brokering">
           <ion-icon :icon="shuffleOutline" />
           <ion-label>{{ translate("Brokering") }}</ion-label>
@@ -21,6 +21,14 @@
 import { translate } from "@/i18n";
 import { IonIcon, IonLabel, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/vue";
 import { settingsOutline, shuffleOutline } from "ionicons/icons";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+function showFooter() {
+  if (['/tabs/settings', '/tabs/brokering'].includes(router.currentRoute.value.path)) return true
+  return false
+}
 </script>
 
 <style scoped>