From: Adam Dullage <redacted>
Date: Wed, 1 May 2024 07:16:33 +0000 (+0100)
Subject: Added menu button
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=a1a9c83617c121d639c5c6ac0d2a16bd4dcc0d24;p=flatnotes.git

Added menu button
---

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