Seekra/frontend
3
2
Fork 0
generated from Seekra/repository-template
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Move the search bar in the search results view into the navigation bar #82

Merged
jakob.scheid merged 10 commits from chore/searchbar into main 2026-05-29 18:30:06 +02:00
Conversation 4 Commits 10 Files Changed 2
+25
1 changed files with 25 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 98c954e361 - Show all commits
src/features/nav/components/Navbar.vue
+25
View File
@@ -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';
jakob.scheid marked this conversation as resolved Outdated
jakob.scheid commented 2026-05-29 16:07:21 +02:00
Outdated
Review
Copy Link
Copy Source

Usually, pascal case (PascalCase) is used when naming Vue.js components.

Usually, pascal case (PascalCase) is used when naming Vue.js components.
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>