✨ Expand collapse section from context menu (#660)

Author: Lissy93

src/assets/interface-icons/section-expand-collapse.svg

@@ -195,6 +195,7 @@
     "section": {
       "open-section": "Open Section",
       "edit-section": "Edit",
+      "expand-collapse": "Expand / Collapse",
       "move-section": "Move To",
       "remove-section": "Remove"
     }

src/assets/locales/en.json

@@ -94,6 +94,7 @@
       v-click-outside="closeContextMenu"
       @openEditSection="openEditSection"
       @navigateToSection="navigateToSection"
+      @expandCollapseSection="expandCollapseSection"
       @removeSection="removeSection"
     />
   </Collapsable>
@@ -250,6 +251,12 @@ export default {
       router.push({ path: `/home/${sectionIdentifier}` });
       this.closeContextMenu();
     },
+    /* Toggle sections collapse state */
+    expandCollapseSection() {
+      const secElem = this.$refs[this.sectionRef];
+      if (secElem) secElem.toggle();
+      this.closeContextMenu();
+    },
     /* Open the Section Edit Menu */
     openEditSection() {
       this.editMenuOpen = true;

src/components/LinkItems/Section.vue

@@ -12,6 +12,10 @@
           <EditIcon />
           <span>{{ $t('context-menus.section.edit-section') }}</span>
         </li>
+        <li @click="expandCollapseSection">
+          <ExpandCollapseIcon />
+          <span>{{ $t('context-menus.section.expand-collapse') }}</span>
+        </li>
         <li v-if="isEditMode" @click="removeSection">
           <BinIcon />
           <span>{{ $t('context-menus.section.remove-section') }}</span>
@@ -26,13 +30,15 @@
 import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
 import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
 import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg';
+import ExpandCollapseIcon from '@/assets/interface-icons/section-expand-collapse.svg';
 
 export default {
   name: 'ContextMenu',
   components: {
     EditIcon,
     BinIcon,
     SameTabOpenIcon,
+    ExpandCollapseIcon,
   },
   props: {
     posX: Number, // The X coordinate for positioning
@@ -56,6 +62,9 @@ export default {
     openEditSectionMenu() {
       this.$emit('openEditSection');
     },
+    expandCollapseSection() {
+      this.$emit('expandCollapseSection');
+    },
     removeSection() {
       this.$emit('removeSection');
     },