Merge pull request 'Show search bar below the navbar on the search results view on small screens' (#99) from feature/place-search-bar-below-navbar into main

Reviewed-on: #99
Reviewed-by: Johannes D. Vos

src/features/nav/components/Navbar.vue

@@ -15,25 +15,10 @@ 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';
+import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.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>
@@ -41,12 +26,7 @@ watch(() => route.query.q, q => {
         <RouterLink to="/" class="link button link">
             <img :src="logo" alt="Seekra" class="nav-logo" />
         </RouterLink>
-        <Searchbar
+        <NavbarSearchBarWrapper class="navbar-search-bar-wrapper" />
-            v-if="route.name === 'searchResults'"
-            class="search-bar"
-            v-model="searchQueryModel"
-            auto-submit
-        />
         <ul class="right-links">
             <li>
                 <LanguageSwitchButton />
@@ -56,6 +36,9 @@ watch(() => route.query.q, q => {
             </li>
         </ul>
     </nav>
+    <div class="navbar-search-bar-wrapper-small-screens-wrapper">
+        <NavbarSearchBarWrapper class="navbar-search-bar-wrapper-small-screens" />
+    </div>
 </template>
 
 <style scoped>
@@ -89,7 +72,27 @@ watch(() => route.query.q, q => {
     height: 24px;
     width: auto;
 }
-.search-bar {
+
-    width: 70%;
+.navbar-search-bar-wrapper {
+    width: 100%;
+    padding: 0 30px;
+}
+
+.navbar-search-bar-wrapper-small-screens-wrapper {
+    padding: 0 15px 15px;
+}
+
+.navbar-search-bar-wrapper-small-screens {
+    display: none;
+}
+
+@media (max-width: 48rem) {
+    .navbar-search-bar-wrapper {
+        display: none;
+    }
+
+    .navbar-search-bar-wrapper-small-screens {
+        display: block;
+    }
 }
 </style>

src/features/nav/components/NavbarSearchBarWrapper.vue

@@ -0,0 +1,43 @@
+<!--
+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>
+import Searchbar from '@/features/search/components/Searchbar.vue';
+
+import { watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+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>
+    <Searchbar
+        v-if="route.name === 'searchResults'"
+        v-model="searchQueryModel"
+        auto-submit
+    />
+</template>

src/features/search/components/Searchbar.vue

@@ -39,7 +39,7 @@ const submitSearch = function () {
 
 <template>
     <div>
-        <form @submit.prevent="submitSearch">
+        <form @submit.prevent="submitSearch" class="search-form">
             <div class="search-wrapper">
                 <input
                 v-model="searchQuery"
@@ -108,4 +108,8 @@ const submitSearch = function () {
 .search-button:hover {
     background: var(--primary-color-l-1);
 }
+
+.search-form {
+    width: 100%;
+}
 </style>