Add search functionality to navbar

diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index 65d60ed154a276ad30280b9906660ec12ab57327..85c99beafdf67499b3acb1aecef5d0bb02f771a8 100644 (file)
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -1,5 +1,6 @@
 <template>\r
   <nav class="mb-12 flex justify-between align-top">\r
+    <SearchModal ref="searchModal" />\r
     <RouterLink :to="{ name: 'home' }" v-if="!hideLogo">\r
       <Logo responsive></Logo>\r
     </RouterLink>\r
@@ -31,9 +32,11 @@ import CustomButton from "../components/CustomButton.vue";
 import Logo from "../components/Logo.vue";\r
 import { clearStoredToken } from "../tokenStorage.js";\r
 import PrimeMenu from "../components/PrimeMenu.vue";\r
+import SearchModal from "./SearchModal.vue";\r
 \r
-const router = useRouter();\r
 const menu = ref();\r
+const router = useRouter();\r
+const searchModal = ref();\r
 \r
 defineProps({\r
   hideLogo: Boolean,\r
@@ -43,7 +46,7 @@ const menuItems = [
   {\r
     label: "Search",\r
     icon: mdilMagnify,\r
-    // TODO: Implement search modal\r
+    command: () => searchModal.value.toggle(),\r
   },\r
   {\r
     label: "All Notes",\r

diff --git a/client/partials/SearchModal.vue b/client/partials/SearchModal.vue
new file mode 100644 (file)
index 0000000..2d7ea63
--- /dev/null
+++ b/client/partials/SearchModal.vue
@@ -0,0 +1,22 @@
+<template>
+  <Modal ref="modal" class="flex flex-col items-center">
+    <Logo class="mb-4" />
+    <SearchInput @search="toggle" />
+  </Modal>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+import Modal from "../components/Modal.vue";
+import SearchInput from "./SearchInput.vue";
+import Logo from "../components/Logo.vue";
+
+const modal = ref();
+
+function toggle() {
+  modal.value.toggle();
+}
+
+defineExpose({ toggle });
+</script>