From: Adam Dullage <redacted>
Date: Sat, 4 May 2024 10:54:47 +0000 (+0100)
Subject: Add search functionality to navbar
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=c5ec4789ab151b5f5e90965132457971b6ba807d;p=flatnotes.git

Add search functionality to navbar
---

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