stash

frontend/src/components/BaseLayout.vue

@@ -6,14 +6,7 @@
                 <a class="sidebar-toggle d-flex" @click="toggleSidebar">
                     <i class="hamburger align-self-center"></i>
                 </a>
-                <form class="d-none d-sm-inline-block">
-                    <div class="input-group input-group-navbar">
-                        <input type="text" class="form-control" placeholder="Search…" aria-label="Search">
-                        <button class="btn" type="button">
-                            <b-icon-search class="bi-valign-middle"></b-icon-search>
-                        </button>
-                    </div>
-                </form>
+                <SearchBox/>
                 <div class="navbar-collapse collapse">
                     <ul class="navbar-nav navbar-align">
                         <Notifications :notifications="notifications"/>
@@ -38,16 +31,17 @@ import Messages from "@/components/Messages.vue";
 import Footer from "@/components/Footer.vue";
 import Sidebar from "@/components/Sidebar.vue";
 import UserDropdown from "@/components/UserDropdown.vue";
+import SearchBox from "@/components/SearchBox.vue";
 
 export default {
     name: 'BaseLayout',
     components: {
+        SearchBox,
         UserDropdown,
         Sidebar,
         Footer,
         Messages,
-        Notifications,
-        ...BIcons
+        Notifications
     },
     props: {
         hideSearch: {

frontend/src/components/Messages.vue

@@ -82,7 +82,6 @@
 </template>
 
 <script>
-import {mapGetters, mapMutations} from 'vuex';
 import * as BIcons from "bootstrap-icons-vue";
 
 export default {

frontend/src/components/SearchBox.vue

@@ -0,0 +1,44 @@
+<template>
+    <form class="d-none d-sm-inline-block">
+        <div class="input-group input-group-navbar">
+            <input type="text" class="form-control" placeholder="Search…" aria-label="Search" v-model="query" id="searchText">
+            <button class="btn" type="button" @click.prevent="search">
+                <b-icon-search class="bi-valign-middle"></b-icon-search>
+            </button>
+        </div>
+    </form>
+</template>
+
+<script>
+
+import * as BIcons from "bootstrap-icons-vue";
+
+export default {
+    name: "SearchBox",
+    components: {
+        ...BIcons
+    },
+    data() {
+        return {
+            query: ""
+        }
+    },
+    methods: {
+        search() {
+            if(this.query.length > 0)
+                this.$router.push("/search/" + encodeURIComponent(this.query));
+            else
+                document.getElementById("searchText").focus();
+        }
+    },
+    mounted() {
+        console.log(this.$route)
+        console.log(this.$route.params.query)
+        this.query = decodeURIComponent(this.$route.params.query || encodeURIComponent(""));
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/UserDropdown.vue

@@ -6,6 +6,8 @@
         </a>
 
         <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" @click="toggleDropdown">
+            <img src="/assets/img/avatars/avatar.png" class="avatar img-fluid rounded mr-1"
+                 alt="Charles Hall"/>
             <span class="text-dark">
                 {{ username }}
             </span>