Add search for mobile view

front/src/NavBarSearch.vue

@@ -6,10 +6,22 @@
   const searchterm = ref("");
   const router = useRouter();
 
+  const props = defineProps({
+    sizeClass: String,
+    isMobile: Boolean
+  });
+
+  const emit = defineEmits('searchDone')
+
+  const vMobileFocus = {
+    mounted: (el, binding) => el.focus();
+  }
+
   function onSearchClick() {
     if (typeof searchterm.value === "undefined" || searchterm.value === "") {
       return
     }
+    emit('searchDone')
     router.push('/search/' + searchterm.value);
   }
 </script>
@@ -18,16 +30,16 @@
   <div class="navbar-item">
     <div class="field has-addons">
       <div class="control">
-        <input v-model="searchterm" @keyup.enter="onSearchClick()" class="input" type="text" />
+        <input v-mobile-focus="isMobile ? true : null" v-model="searchterm" @keyup.enter="onSearchClick()" class="input" :class="sizeClass" type="text" />
       </div>
       <div class="control">
-        <button @click="onSearchClick()" class="button">
+        <button @click="onSearchClick()" class="button" :class="sizeClass">
           <span class="icon" title="Search">
             <b-icon-search />
           </span>
         </button>
       </div>
-      <Modal/>
+      <Modal v-if="!isMobile"/>
     </div>
   </div>
 </template>