Create seperate search bar

src/components/NavbarView.vue

@@ -1,5 +1,10 @@
 <script lang="ts">
-export default {}
+import SearchBar from './SearchBar.vue'
+export default {
+  components: {
+    SearchBar
+  }
+}
 </script>
 
 <template>
@@ -9,20 +14,7 @@ export default {}
     </router-link>
 
     <div>
-      <form class="relative hidden md:block">
+      <search-bar></search-bar>
-        <label for="searchBar" class="hidden">Search</label>
-        <v-icon
-          name="io-search-outline"
-          class="text-black absolute my-auto inset-y-0 left-2"
-        ></v-icon>
-        <input
-          type="text"
-          id="searchBar"
-          name="searchBar"
-          placeholder="Search"
-          class="rounded-md p-1 pl-8 text-black"
-        />
-      </form>
     </div>
 
     <ul class="inline-flex space-x-6 font-medium">

src/components/SearchBar.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="relative hidden md:block">
+        <label for="searchBar" class="hidden">Search</label>
+        <v-icon name="io-search-outline" class="text-black absolute my-auto inset-y-0 left-2"></v-icon>
+        <input type="text" placeholder="Search"
+            @keyup.enter="this.$router.push('/search?query=' + this.$refs.searchInput.value)"
+            class="rounded-md p-1 pl-8 text-black" ref="searchInput" />
+    </div>
+</template>