connect search box with result page

src/components/PostListItem.vue

@@ -70,6 +70,9 @@ export default {
       default: true,
     },
   },
+  mounted() {
+    // console.log(this.record)
+  },
 };
 </script>
 

src/layouts/partials/Navbar.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="fixed inset-0 h-16 bg-black">
-    <header class="container sm:flex sm:items-center sm:px-4 sm:py-3 mx-auto">
+    <header
+      class="flex items-center justify-between flex-wrap container mx-auto px-4 sm:px-0 py-4 transition-all transition-500"
+      v-bind:class="{
+        'opacity-100': !disableScroll && scrollPosition > headerHeight,
+        'opacity-0': !disableScroll && scrollPosition < headerHeight,
+      }"
+    >
       <div class="flex items-center justify-between px-4 py-3 sm:p-0">
         <div class="inline-flex items-center flex-shrink-0 text-white mr-6">
           <a href="/" class="flex">
@@ -94,16 +100,18 @@
             }}</g-link>
           </li>
         </ul>
-        <div class="md:hidden inline-flex rounded-full border-grey-light border w-1/2">
-          <button>
+        <div
+          class="md:hidden inline-flex rounded-full border-grey-light border w-1/2"
+        >
           <span class="w-auto flex justify-end items-center text-grey p-2">
             <font-awesome :icon="['fas', 'search']" />
           </span>
-          </button>
           <input
             class="w-full rounded mr-4 bg-black"
             type="text"
             placeholder="Search..."
+            v-model="search"
+            @keyup.enter="result"
           />
         </div>
       </nav>
@@ -111,15 +119,15 @@
         class="hidden text-gray-400 md:ml-auto md:inline-block md:order-last"
       >
         <div class="inline-flex rounded-full border-grey-light border w-1/2">
-          <button>
           <span class="w-auto flex justify-end items-center text-grey p-2">
             <font-awesome :icon="['fas', 'search']" />
           </span>
-          </button>
           <input
             class="w-full rounded mr-4 bg-black"
             type="text"
             placeholder="Search..."
+            v-model="search"
+            @keyup.enter="result"
           />
         </div>
         <ul class="list-none inline-flex justify-center md:justify-end">
@@ -176,6 +184,7 @@ export default {
       scrollPosition: null,
       headerHeight: 0,
       isOpen: false,
+      search: "",
     };
   },
 
@@ -186,6 +195,9 @@ export default {
     setHeaderHeight(height) {
       this.headerHeight = height;
     },
+    result() {
+      window.location.href = `/search?query=${this.search}`;
+    },
   },
 
   mounted() {
@@ -216,7 +228,8 @@ query {
 </static-query>
 
 <style scoped>
-input:focus {
+input:focus,
+button:focus {
   outline: 0;
 }
 </style>

src/pages/Search.vue

@@ -2,7 +2,11 @@
   <Layout>
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
       <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
-        <PostListItem v-for="edge in searchResults" :key="edge.node.id" :record="edge.node" />
+        <PostListItem
+          v-for="edge in searchResults"
+          :key="edge.node.id"
+          :record="edge.node"
+        />
       </div>
     </div>
     <!-- <div class="pagination flex justify-center mb-8">
@@ -14,32 +18,34 @@
           v-if="searchResults.pageInfo.totalPages > 1"
         />
       </div> -->
-      {{searchResults}}
+    {{ searchResults }}
   </Layout>
 </template>
 
 <script>
-import PostListItem from '~/components/PostListItem.vue';
+import PostListItem from "~/components/PostListItem.vue";
 import Pagination from "~/components/Pagination.vue";
 
 export default {
   metaInfo: {
-    title: "Search"
+    title: "Search",
   },
   data: () => ({
-    q: 'the'
+    q: "the",
   }),
   computed: {
-    searchResults () {
-      const searchTerm = this.q
-      if (searchTerm.length < 3) return []
-      return this.$search.search({ query: searchTerm, limit: 5 })
-    }
+    searchResults() {
+      const searchTerm = this.q;
+      if (searchTerm.length < 3) return [];
+      return this.$search.search({ query: searchTerm, limit: 5 });
+    },
+  },
+  mounted() {
+    this.q = new URL(location.href).searchParams.get("query");
   },
   components: {
     PostListItem,
-    Pagination
+    Pagination,
   },
-
-}
+};
 </script>