add edit mode button

src/components/TheRightMenu.vue

@@ -10,13 +10,64 @@
       text-color="blue",
       size="xl"
     )
+    q-btn(
+      v-if="!editMode",
+      style="width: 48px; height: 48px",
+      id="edit",
+      rounded,
+      padding="0px",
+      icon="edit",
+      text-color="blue",
+      size="xl",
+      @click="toggleEditMode",
+    )
+    q-btn(
+      v-if="editMode",
+      style="width: 48px; height: 48px",
+      id="edit",
+      rounded,
+      padding="0px",
+      icon="check",
+      text-color="blue",
+      size="xl"
+      @click="save",
+    )
+    q-btn(
+      v-if="editMode",
+      style="width: 48px; height: 48px",
+      id="edit",
+      rounded,
+      padding="0px",
+      icon="cancel",
+      text-color="blue",
+      size="xl",
+      @click="cancel",
+    )
 </template>
 
 <script>
-import BaseButtonSidebar from "@/components/base/BaseSidebarButton";
 export default {
   name: "TheRightMenu",
-  components: { BaseButtonSidebar },
+  emits: ["save", "cancel", "update:editMode"],
+  data() {
+    return {
+      editMode: false,
+    };
+  },
+  methods: {
+    toggleEditMode() {
+      this.editMode = !this.editMode;
+      this.$emit("update:editMode", this.editMode);
+    },
+    save() {
+      this.toggleEditMode();
+      this.$emit("save");
+    },
+    cancel() {
+      this.toggleEditMode();
+      this.$emit("cancel");
+    },
+  },
 };
 </script>