src/features/nav/components/Navbar.vue

@@ -15,9 +15,25 @@ limitations under the License.
 -->
 
 <script setup>
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import ColorSchemeButton from '@/features/colorScheme/components/ColorSchemeButton.vue';
 import LanguageSwitchButton from '@/features/i18n/components/LanguageSwitchButton.vue';
 import logo from '@/assets/images/logo.svg';
+import Searchbar from '@/features/search/components/Searchbar.vue';
+
+const route = useRoute();
+const searchQueryModel = defineModel();
+
+watch(() => route.name, name => {
+    searchQueryModel.value = name === 'searchResults' ? route.query.q || '' : '';
+});
+
+watch(() => route.query.q, q => {
+    if (route.name === 'searchResults') {
+        searchQueryModel.value = q || '';
+    }
+});
 </script>
 
 <template>
@@ -25,6 +41,12 @@ import logo from '@/assets/images/logo.svg';
         <RouterLink to="/" class="link button link">
             <img :src="logo" alt="Seekra" class="nav-logo" />
         </RouterLink>
+        <Searchbar
+            v-if="route.name === 'searchResults'"
+            class="search-bar"
+            v-model="searchQueryModel"
+            auto-submit
+        />
         <ul class="right-links">
             <li>
                 <LanguageSwitchButton />
@@ -41,7 +63,8 @@ import logo from '@/assets/images/logo.svg';
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 40px;
+    padding: 18px 40px;
+    height: 42px;
 }
 
 .global-nav .right-links {
@@ -66,4 +89,7 @@ import logo from '@/assets/images/logo.svg';
     height: 24px;
     width: auto;
 }
-</style>
+.search-bar {
+    width: 70%;
+}
+</style>

src/features/search/views/SearchResultsView.vue

@@ -15,22 +15,13 @@ limitations under the License.
 -->
 
 <script setup>
-import Searchbar from '@/features/search/components/Searchbar.vue';
-
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-
-const props = defineProps(['searchQuery']);
-
-const searchQueryModel = defineModel();
-searchQueryModel.value = props.searchQuery;
 </script>
 
 <template>
     <div class="main-content-padding">
-        <Searchbar class="search-bar" v-model="searchQueryModel" auto-submit />
-        
         <div class="search-results-error-message-container">
             <div class="search-results-error-message">
                 <p>{{ t('search.error.searchNotAvailable') }}</p>