refactor: update search bar visibility and layout for better responsiveness

src/features/nav/components/Navbar.vue

@@ -89,7 +89,14 @@ watch(() => route.query.q, q => {
     height: 24px;
     width: auto;
 }
+
 .search-bar {
     width: 70%;
 }
+
+@media (max-width: 1000px) {
+    .search-bar {
+        display: none;
+    }
+}
 </style>

src/features/search/views/SearchResultsView.vue

@@ -16,26 +16,59 @@ limitations under the License.
 
 <script setup>
 import { useI18n } from 'vue-i18n';
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import Searchbar from '../components/Searchbar.vue';
 
 const { t } = useI18n();
+const route = useRoute();
+const searchQuery = ref(route.query.q || '');
+
+watch(() => route.query.q, (newQuery) => {
+    searchQuery.value = newQuery || '';
+});
 </script>
 
 <template>
-    <div class="main-content-padding">
+    <div class="search-results-view">
-        <div class="search-results-error-message-container">
+        <div class="search-bar-container main-content-padding">
-            <div class="search-results-error-message">
+            <Searchbar v-model="searchQuery" class="search-bar" auto-submit />
-                <p>{{ t('search.error.searchNotAvailable') }}</p>
-                <p>{{ t('error.tryAgainToAnotherTime') }}</p>
-            </div>
         </div>
-        <div class="search-results-container">
+        <div class="main-content-padding">
+            <div class="search-results-error-message-container">
+                <div class="search-results-error-message">
+                    <p>{{ t('search.error.searchNotAvailable') }}</p>
+                    <p>{{ t('error.tryAgainToAnotherTime') }}</p>
+                </div>
+            </div>
+            <div class="search-results-container">
+            </div>
         </div>
     </div>
 </template>
 
 <style scoped>
+.search-results-view {
+    width: 100%;
+}
+
+.search-bar-container {
+    display: none;
+    justify-content: center;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    border-bottom: 1px solid var(--border);
+}
+
+@media (max-width: 1000px) {
+    .search-bar-container {
+        display: flex;
+    }
+}
+
 .search-bar {
     width: 50%;
+    max-width: 624px;
 }
 
 @media (max-width: 67.5rem) {