diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
index 2680ed5..74f83ca 100644
--- a/frontend/src/components/BaseLayout.vue
+++ b/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: {
diff --git a/frontend/src/components/Messages.vue b/frontend/src/components/Messages.vue
index 52be31e..f259b84 100644
--- a/frontend/src/components/Messages.vue
+++ b/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 {
diff --git a/frontend/src/components/SearchBox.vue b/frontend/src/components/SearchBox.vue
new file mode 100644
index 0000000..ab15e36
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index c3ea17c..4b631b5 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/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>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 6459e53..a62284a 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -3,8 +3,11 @@ import Dashboard from '@/views/Dashboard.vue';
import Login from '@/views/Login.vue';
import Register from '@/views/Register.vue';
import store from '@/store';
+import Profile from '@/views/Profile.vue';
+import Settings from '@/views/Settings.vue';
import Friends from '@/views/Friends.vue';
import Inventory from '@/views/Inventory.vue';
+import Search from '@/views/Search.vue';
import InventoryDetail from '@/views/InventoryDetail.vue';
import InventoryNew from '@/views/InventoryNew.vue';
import InventoryEdit from '@/views/InventoryEdit.vue';
@@ -17,6 +20,7 @@ const routes = [
{path: '/inventory/:id/edit', component: InventoryEdit, meta: {requiresAuth: true}, props: true},
{path: '/inventory/new', component: InventoryNew, meta: {requiresAuth: true}},
{path: '/friends', component: Friends, meta: {requiresAuth: true}},
+ {path: '/search/:query', component: Search, meta: {requiresAuth: true}},
{path: '/login', component: Login, meta: {requiresAuth: false}},
{path: '/register', component: Register, meta: {requiresAuth: false}},
{path: '/:pathMatch(.*)*', redirect: '/'}
diff --git a/frontend/src/views/Search.vue b/frontend/src/views/Search.vue
new file mode 100644
index 0000000..7d522db
--- /dev/null
+++ b/frontend/src/views/Search.vue
@@ -0,0 +1,41 @@
+<template>
+ <BaseLayout>
+ <main class="content">
+ <div class="container-fluid p-0">
+ <h1 class="h3 mb-3">Blank Page</h1>
+ <div class="row">
+ <div class="col-12">
+ <div class="card">
+ <div class="card-header">
+ <h5 class="card-title mb-0">Empty card</h5>
+ </div>
+ <div class="card-body">
+ <div class="logo">
+ <img src="/src/assets/icons/toolshed-48x48.png" alt="Toolshed logo">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+ </BaseLayout>
+</template>
+
+<script>
+import {mapGetters, mapMutations} from 'vuex';
+import * as BIcons from "bootstrap-icons-vue";
+import BaseLayout from "@/components/BaseLayout.vue";
+
+export default {
+ name: 'Search',
+ components: {
+ ...BIcons,
+ BaseLayout
+ },
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file