Added menu button

diff --git a/client/components/CustomButton.vue b/client/components/CustomButton.vue
index 4cd025f3c129c93e4a41528c265bfbf808bcf6b1..36dc9de038d57b147e101d054c0c969b1304480d 100644 (file)
--- a/client/components/CustomButton.vue
+++ b/client/components/CustomButton.vue
@@ -1,27 +1,17 @@
 <template>
   <button
-    class="hover:bg-theme-background-tint hover:dark:bg-theme-background-elevated flex items-center rounded px-2 py-1 text-theme-text-muted"
+    class="rounded px-2 py-1 text-theme-text-muted hover:bg-theme-background-tint hover:dark:bg-theme-background-elevated"
   >
-    <SvgIcon
-      v-if="iconPath"
-      type="mdi"
-      :path="iconPath"
-      :size="iconSize"
-      :class="{ 'mr-1': label }"
-    ></SvgIcon>
-    <span v-if="label">{{ label }}</span>
+    <IconLabel :iconPath="iconPath" :iconSize="iconSize" :label="label" />
   </button>
 </template>
 
 <script setup>
-import SvgIcon from "@jamescoyle/vue-icon";
+import IconLabel from "./IconLabel.vue";
 
 defineProps({
   iconPath: String,
-  iconSize: {
-    type: String,
-    default: "1.25em",
-  },
+  iconSize: String,
   label: String,
 });
 </script>

diff --git a/client/components/IconLabel.vue b/client/components/IconLabel.vue
new file mode 100644 (file)
index 0000000..dc5d63e
--- /dev/null
+++ b/client/components/IconLabel.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="flex items-center">
+    <SvgIcon
+      v-if="iconPath"
+      type="mdi"
+      :path="iconPath"
+      :size="iconSize"
+      :class="{ 'mr-1': label }"
+    ></SvgIcon>
+    <span v-if="label">{{ label }}</span>
+  </div>
+</template>
+
+<script setup>
+import SvgIcon from "@jamescoyle/vue-icon";
+
+defineProps({
+  iconPath: String,
+  iconSize: {
+    type: String,
+    default: "1.25em",
+  },
+  label: String,
+});
+</script>

diff --git a/client/components/PrimeMenu.vue b/client/components/PrimeMenu.vue
new file mode 100644 (file)
index 0000000..cff8182
--- /dev/null
+++ b/client/components/PrimeMenu.vue
@@ -0,0 +1,40 @@
+<template>
+  <Menu ref="menu" :pt="style">
+    <template #item="{ item, props }">
+      <IconLabel
+        :iconPath="item.icon"
+        :label="item.label"
+        v-bind="props.action"
+      />
+    </template>
+  </Menu>
+</template>
+<script setup>
+import Menu from "primevue/menu";
+import { ref } from "vue";
+
+import IconLabel from "./IconLabel.vue";
+
+const menu = ref();
+
+const style = {
+  root: "border p-1 rounded border-theme-border",
+  menuitem: ({ context }) => ({
+    class: [
+      "text-theme-text-muted rounded px-2 py-1",
+      "hover:bg-theme-background-tint hover:dark:bg-theme-background-elevated hover:cursor-pointer",
+      {
+        "bg-theme-background-tint dark:bg-theme-background-elevated":
+          context.focused,
+      },
+    ],
+  }),
+  separator: "border-t border-theme-border my-2",
+};
+
+function toggle(event) {
+  menu.value.toggle(event);
+}
+
+defineExpose({ toggle });
+</script>

diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index f7a55154efe3a6d401752e91aedbc0bfc3c032c7..3e922c46aeefb5d5eac0b96af68305bee175bea0 100644 (file)
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -4,30 +4,69 @@
       <Logo></Logo>\r
     </RouterLink>\r
     <div class="flex grow items-start justify-end">\r
+      <!-- New Note -->\r
       <CustomButton\r
         :iconPath="mdilPlusCircle"\r
         label="New Note"\r
-        @click="toggleTheme"\r
+        @click="router.push({ name: 'note' })"\r
       />\r
-      <CustomButton :iconPath="mdilLogout" label="Log Out" @click="logOut" />\r
+      <!-- Menu -->\r
+      <CustomButton :iconPath="mdilMenu" label="Menu" @click="toggleMenu" />\r
+      <PrimeMenu ref="menu" :model="menuItems" :popup="true" />\r
     </div>\r
   </nav>\r
 </template>\r
 \r
 <script setup>\r
-import { mdilLogout, mdilPlusCircle } from "@mdi/light-js";\r
+import {\r
+  mdilLogout,\r
+  mdilPlusCircle,\r
+  mdilMenu,\r
+  mdilMagnify,\r
+  mdilNoteMultiple,\r
+  mdilMonitor,\r
+} from "@mdi/light-js";\r
 import { RouterLink, useRouter } from "vue-router";\r
+import { ref } from "vue";\r
 \r
 import CustomButton from "../components/CustomButton.vue";\r
 import Logo from "../components/Logo.vue";\r
 import { clearStoredToken } from "../tokenStorage.js";\r
+import PrimeMenu from "../components/PrimeMenu.vue";\r
 \r
 const router = useRouter();\r
+const menu = ref();\r
 \r
 defineProps({\r
   hideLogo: Boolean,\r
 });\r
 \r
+const menuItems = [\r
+  {\r
+    label: "Search",\r
+    icon: mdilMagnify,\r
+    // TODO: Implement search modal\r
+  },\r
+  {\r
+    label: "All Notes",\r
+    icon: mdilNoteMultiple,\r
+    command: () => router.push({ name: "search", query: { term: "*" } }),\r
+  },\r
+  {\r
+    label: "Toggle Theme",\r
+    icon: mdilMonitor,\r
+    command: toggleTheme,\r
+  },\r
+  {\r
+    separator: true,\r
+  },\r
+  {\r
+    label: "Log Out",\r
+    icon: mdilLogout,\r
+    command: logOut,\r
+  },\r
+];\r
+\r
 function toggleTheme() {\r
   document.body.classList.toggle("dark");\r
 }\r
@@ -36,4 +75,8 @@ function logOut() {
   clearStoredToken();\r
   router.push({ name: "login" });\r
 }\r
+\r
+function toggleMenu(event) {\r
+  menu.value.toggle(event);\r
+}\r
 </script>\r