feat: apply new layout overhaul

src/app/modules/hebis/list/hebis-search-page.html

@@ -1,19 +1,19 @@
-<stapps-context contentId="data-list"></stapps-context>
 <ion-header>
-  <ion-toolbar color="primary">
+  <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-      <ion-menu-button></ion-menu-button>
-    </ion-buttons>
-    <ion-buttons slot="end">
-      <ion-menu-button menu="context" auto-hide="false">
-        <ion-icon name="options"></ion-icon>
-      </ion-menu-button>
+      <ion-back-button
+        [defaultHref]="'..'"
+        [text]="'back' | translate | titlecase"
+      ></ion-back-button>
     </ion-buttons>
+    <ion-title>{{ 'hebisSearch.title' | translate }}</ion-title>
+  </ion-toolbar>
+  <ion-toolbar color="primary" mode="ios">
     <ion-searchbar
       (ngModelChange)="searchStringChanged($event)"
       (keyup.enter)="hideKeyboard()"
       [(ngModel)]="queryText"
+      mode="md"
       placeholder="{{ 'hebisSearch.search_bar.placeholder' | translate }}"
       showClearButton="always"
       type="search"
@@ -21,6 +21,19 @@
     >
     </ion-searchbar>
   </ion-toolbar>
+  <ion-toolbar color="primary" class="category-tab" mode="ios">
+    <ion-buttons class="ion-justify-content-between">
+      <ion-button
+        [routerLink]="['/search/' + (queryText || '')]"
+        fill="outline"
+        size="large"
+        >{{ 'search.type' | translate }}
+      </ion-button>
+      <ion-button class="button-active" size="large">{{
+        'hebisSearch.type' | translate
+      }}</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
 </ion-header>
 
 <ion-content>