From fe0d2d5b55701cb4c0f7e090b1843b21155ef438 Mon Sep 17 00:00:00 2001
From: aterox <church.kennetha@gmail.com>
Date: Tue, 8 Mar 2022 05:44:20 -0500
Subject: [PATCH 1/2] Add an icon for the context menu

---
 src/components/LinkItems/Collapsable.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/LinkItems/Collapsable.vue b/src/components/LinkItems/Collapsable.vue
index ec223159..78e95673 100644
--- a/src/components/LinkItems/Collapsable.vue
+++ b/src/components/LinkItems/Collapsable.vue
@@ -17,6 +17,8 @@
       <h3>{{ title }}</h3>
       <EditModeIcon v-if="isEditMode" @click="openEditModal"
         v-tooltip="editTooltip()" class="edit-mode-item" />
+      <OpenIcon @click.prevent.stop="openContextMenu" @contextmenu.prevent
+        class="edit-mode-item" />
     </label>
     <div class="collapsible-content">
       <div class="content-inner">
@@ -31,6 +33,7 @@
 import { localStorageKeys } from '@/utils/defaults';
 import Icon from '@/components/LinkItems/ItemIcon.vue';
 import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
+import OpenIcon from '@/assets/interface-icons/config-open-settings.svg';
 
 export default {
   name: 'CollapsableContainer',
@@ -48,6 +51,7 @@ export default {
   components: {
     Icon,
     EditModeIcon,
+    OpenIcon,
   },
   computed: {
     isEditMode() {
@@ -244,6 +248,8 @@ export default {
     float: right;
     right: 0.5rem;
     top: 0.5rem;
+    margin-left: 0.2rem;
+    margin-right: 0.2rem;
   }
 
   /* Makes sections fill available space */

From 8ee78476489129a9008bdd8c187d096ebbd35594 Mon Sep 17 00:00:00 2001
From: aterox <church.kennetha@gmail.com>
Date: Tue, 8 Mar 2022 05:44:39 -0500
Subject: [PATCH 2/2] Ensure context menu doesn't clip off the screen

---
 src/components/LinkItems/SectionContextMenu.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/LinkItems/SectionContextMenu.vue b/src/components/LinkItems/SectionContextMenu.vue
index 8f9b12c1..7f7d16e7 100644
--- a/src/components/LinkItems/SectionContextMenu.vue
+++ b/src/components/LinkItems/SectionContextMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <transition name="slide">
     <div class="context-menu" v-if="show && !isMenuDisabled"
-      :style="posX && posY ? `top:${posY}px;left:${posX}px;` : ''">
+      :style="posX && posY ? calcPosition() : ''">
       <!-- Open Options -->
       <ul class="menu-section">
         <li @click="openSection()">
@@ -59,6 +59,13 @@ export default {
     removeSection() {
       this.$emit('removeSection');
     },
+    calcPosition() {
+      const bounds = this.$parent.$el.getBoundingClientRect();
+      const left = this.posX < (bounds.right + bounds.left) / 2;
+      const position = `top:${this.posY}px;${left ? 'left' : 'right'}:\
+        ${left ? this.posX : document.documentElement.clientWidth - this.posX}px;`;
+      return position;
+    },
   },
 };
 </script>