issue#2 move the search input to the nav bar

js/src/components/Home/SearchFields.vue

@@ -1,7 +1,7 @@
 <template>
   <form
     id="search-anchor"
-    class="container mx-auto my-3 flex flex-wrap flex-col sm:flex-row items-stretch gap-2 text-center items-center justify-center dark:text-slate-100"
+    class="container mx-auto my-3 flex flex-wrap flex-row items-stretch gap-2 text-center items-center justify-center dark:text-slate-100"
     role="search"
     @submit.prevent="submit"
   >
@@ -10,7 +10,7 @@
     }}</label>
     <o-input
       v-model="search"
-      :placeholder="t('Keyword, event title, group name, etc.')"
+      :placeholder="t('Search')"
       id="search_field_input"
       autofocus
       autocapitalize="off"
@@ -19,8 +19,6 @@
       maxlength="1024"
     />
     <o-button native-type="submit" icon-left="magnify">
-      <template v-if="search">{{ t("Go!") }}</template>
-      <template v-else>{{ t("Explore!") }}</template>
     </o-button>
   </form>
 </template>

js/src/components/NavBar.vue

@@ -13,6 +13,7 @@
       >
         <MobilizonLogo class="w-40" />
       </router-link>
+
       <div class="flex items-center md:order-2 ml-auto" v-if="currentActor?.id">
         <o-dropdown position="bottom-left">
           <template #trigger>
@@ -164,34 +165,40 @@
         <ul
           class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold"
         >
-          <li v-if="currentActor?.id">
+
+        <search-fields v-if="showMobileMenu" class="m-auto w-auto" v-model:search="search" v-model:location="location"/>
+
+          <li class="m-auto" v-if="currentActor?.id">
             <router-link
               :to="{ name: RouteName.MY_EVENTS }"
               class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
               >{{ t("My events") }}</router-link
             >
           </li>
-          <li v-if="currentActor?.id">
+          <li class="m-auto" v-if="currentActor?.id">
             <router-link
               :to="{ name: RouteName.MY_GROUPS }"
               class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
               >{{ t("My groups") }}</router-link
             >
           </li>
-          <li v-if="!currentActor?.id">
+          <li class="m-auto" v-if="!currentActor?.id">
             <router-link
               :to="{ name: RouteName.LOGIN }"
               class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
               >{{ t("Login") }}</router-link
             >
           </li>
-          <li v-if="!currentActor?.id && canRegister">
+          <li class="m-auto" v-if="!currentActor?.id && canRegister">
             <router-link
               :to="{ name: RouteName.REGISTER }"
               class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
               >{{ t("Register") }}</router-link
             >
           </li>
+
+          <search-fields v-if="!showMobileMenu" class="m-auto w-auto" v-model:search="search" v-model:location="location"/>
+
         </ul>
       </div>
     </div>
@@ -218,6 +225,7 @@ import { UPDATE_DEFAULT_ACTOR } from "@/graphql/actor";
 import { changeIdentity } from "@/utils/identity";
 import { useRegistrationConfig } from "@/composition/apollo/config";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
+import SearchFields from "@/components/Home/SearchFields.vue";
 
 const { currentUser } = useCurrentUserClient();
 const { currentActor } = useCurrentActorClient();
@@ -239,6 +247,9 @@ const canRegister = computed(() => {
 
 const { t } = useI18n({ useScope: "global" });
 
+const location = ref(null);
+const search = ref("");
+
 watch(identities, () => {
   // If we don't have any identities, the user has validated their account,
   // is logging for the first time but didn't create an identity somehow

js/src/views/HomeView.vue

@@ -26,7 +26,6 @@
   <!-- Unlogged introduction -->
   <unlogged-introduction :config="config" v-if="config && !isLoggedIn" />
   <!-- Search fields -->
-  <search-fields v-model:search="search" v-model:location="location" />
   <!-- Categories preview
   <categories-preview /> -->
   <!-- Welcome back -->