make the styling consistent across all pages of the mobile version

src/components/mobile/ListItemSelectionPopup.vue

@@ -5,7 +5,21 @@
                 <f7-nav-left>
                     <f7-link popup-close icon-f7="xmark"></f7-link>
                 </f7-nav-left>
-                <f7-nav-title :title="title" v-if="title"></f7-nav-title>
+
+                <f7-searchbar ref="searchbar" custom-searchs
+                              :value="filterContent"
+                              :placeholder="filterPlaceholder"
+                              :disable-button="false"
+                              @input="filterContent = $event.target.value"
+                              @click:clear="filterContent = ''; showSearchbar = false"
+                              v-if="enableFilter && showSearchbar">
+                </f7-searchbar>
+
+                <f7-nav-title :title="title" v-if="title && !showSearchbar"></f7-nav-title>
+
+                <f7-nav-right v-if="enableFilter && !showSearchbar">
+                    <f7-link icon-f7="search" @click="showSearchbar = true"></f7-link>
+                </f7-nav-right>
             </f7-navbar>
 
             <f7-block class="no-margin no-padding">
@@ -32,16 +46,6 @@
                                   :title="filterNoItemsText"></f7-list-item>
                 </f7-list>
             </f7-block>
-
-            <f7-toolbar bottom>
-                <f7-searchbar ref="searchbar" custom-searchs
-                              :value="filterContent"
-                              :placeholder="filterPlaceholder"
-                              :disable-button="false"
-                              v-if="enableFilter"
-                              @input="filterContent = $event.target.value">
-                </f7-searchbar>
-            </f7-toolbar>
         </f7-page>
     </f7-popup>
 </template>
@@ -86,6 +90,7 @@ const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
 
 const currentValue = ref<unknown>(props.modelValue);
 const filterContent = ref<string>('');
+const showSearchbar = ref<boolean>(false);
 
 const filteredItems = computed<unknown[]>(() => {
     const finalItems: unknown[] = [];
@@ -181,12 +186,13 @@ function onItemClicked(item: unknown, index: number): void {
 
 function onPopupOpen(event: { $el: Framework7Dom }): void {
     currentValue.value = props.modelValue;
-    scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected', true);
+    scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected', false);
 }
 
 function onPopupClosed(): void {
     close();
     filterContent.value = '';
+    showSearchbar.value = false;
     searchbar.value?.clear();
 }
 </script>