chore(search-results): clean up unused search props and imports

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/nav/components/Searchbar-SearchResults.vue';
+
+const route = useRoute();
+const searchQueryModel = ref(route.name === 'searchResults' ? route.query.q || '' : '');
+
+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 />
@@ -66,4 +88,7 @@ import logo from '@/assets/images/logo.svg';
     height: 24px;
     width: auto;
 }
+.search-bar {
+    width: 70%;
+}
 </style>

src/features/nav/components/Searchbar-SearchResults.vue

@@ -0,0 +1,94 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+const searchQuery = defineModel();
+
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const router = useRouter()
+const props = defineProps(['autoSubmit'])
+
+const submitSearch = function () {
+    if (props.autoSubmit !== undefined) {
+        router.push({
+            name: 'searchResults',
+            query: { q: searchQuery.value }
+        });
+    };
+}
+</script>
+
+<template>
+    <div>
+        <form @submit.prevent="submitSearch">
+            <div class="search-wrapper">
+                <input
+                v-model="searchQuery"
+                type="search"
+                :placeholder="t('search.searchBar.placeholder')"
+                required
+                />
+                <button type="submit" class="search-button">{{ t('search.searchBar.submit') }}</button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<style scoped>
+.search-wrapper {
+    --submit-button-padding-y: 8px;
+    --content-height: 32px;
+    --padding: 4px;
+    --padding-left: calc(var(--content-height) + var(--padding));
+    display: flex;
+    align-items: center;
+    border: 1.5px solid var(--border);
+    box-shadow: 0 0px 32px var(--blue-box-shadow);
+    border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
+    padding: var(--padding);
+    padding-left: var(--padding-left);
+    width: calc(100% - var(--padding-left));
+}
+
+.search-wrapper input {
+    border: none;
+    outline: none;
+    width: 100%;
+    font-size: 1rem;
+    background: transparent;
+    height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
+}
+
+.search-button {
+    font-size: 1rem;
+    height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
+    border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y));
+    border: none;
+    padding: var(--submit-button-padding-y) 20px;
+    background: var(--primary-color);
+    color: var(--white);
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.search-button:hover {
+    background: var(--primary-color-l-1);
+}
+</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="main-content-padding">        
         <div class="search-results-error-message-container">
             <div class="search-results-error-message">
                 <p>{{ t('search.error.searchNotAvailable') }}</p>