WIP: added empty search bar and search component

front/src/AppNavBar.vue

@@ -1,5 +1,6 @@
 <script setup>
   import { RouterLink } from 'vue-router'
+  import NavBarSearch from './NavBarSearch.vue'
   import { useAuthStore } from './auth.store.js'
   import { useRouter } from 'vue-router'
 
@@ -15,15 +16,13 @@
 <template>
   <nav class="navbar">
     <div class="navbar-brand">
-      <div class="navbar-item">
+        <RouterLink to="/" class="navbar-item" activeClass="is-active">
         PLM
-      </div>
+        </RouterLink>
     </div>
     <div class="navbar-menu">
       <div class="navbar-start">
-        <RouterLink to="/" class="navbar-item" activeClass="is-active">
-        {{ $t('navbar.home')}}
-        </RouterLink>
+        <NavBarSearch/>
         <RouterLink v-if="authStore.user" to="/books" class="navbar-item" activeClass="is-active">
           {{ $t('navbar.mybooks')}}
         </RouterLink>

front/src/NavBarSearch.vue

@@ -0,0 +1,28 @@
+<script setup>
+  import { ref } from 'vue'
+  import { useRouter } from 'vue-router'
+
+  const searchterm = ref("");
+  const router = useRouter();
+
+  function onSearchClick() {
+    router.push('/search/' + searchterm.value);
+  }
+</script>
+
+<template>
+  <div class="navbar-item">
+    <div class="field has-addons">
+      <div class="control">
+        <input v-model="searchterm" class="input" type="text" />
+      </div>
+      <div class="control">
+        <button @click="onSearchClick()" class="button">
+          <span class="icon icon-search" title="Search"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

front/src/SearchBook.vue

@@ -0,0 +1,12 @@
+<script setup>
+  const props = defineProps({
+    searchterm: String
+  })
+</script>
+
+<template>
+  <div> You are searching for {{ searchterm }} </div>
+</template>
+
+<style scoped></style>
+

front/src/locales/en.json

@@ -4,7 +4,6 @@
     "welcome": "Welcome to PersonalLibraryManager. Please login ou sign in to continue."
   },
   "navbar": {
-    "home": "Home",
     "mybooks": "My Books",
     "addbook": "Add Book",
     "logout": "Log out",

front/src/locales/fr.json

@@ -4,7 +4,6 @@
     "welcome": "Bienvenue sur PersonalLibraryManager. Merci de se connecter ou de s'inscrire pour continuer."
   },
   "navbar": {
-    "home": "Accueil",
     "mybooks": "Mes Livres",
     "addbook": "Ajouter Un Livre",
     "logout": "Se déconnecter",

front/src/router.js

@@ -5,11 +5,13 @@ import AddBook from './AddBook.vue'
 import SignUp from './SignUp.vue'
 import LogIn from './LogIn.vue'
 import Home from './Home.vue'
+import SearchBook from './SearchBook.vue'
 import { useAuthStore } from './auth.store'
 
 const routes = [
   { path: '/', component: Home },
   { path: '/books', component: BooksBrowser },
+  { path: '/search/:searchterm', component: SearchBook, props: true },
   { path: '/add', component: AddBook },
   { path: '/signup', component: SignUp },
   { path: '/login', component: LogIn },