✨ Expand collapse section from context menu (#660)

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M296 391.1c-6.141 0-12.28 2.344-16.97 7.031L248 430.1v-86.06c0-13.25-10.75-24-24-24s-24 10.75-24 24v86.06l-31.03-31.03C164.3 394.3 158.1 391.1 152 391.1c-12.82 0-24 10.33-24 24c0 6.141 2.344 12.28 7.031 16.97l72 72.01C209.6 507.5 215.5 512 224 512s14.4-4.461 16.97-7.031l72-72.01C317.7 428.3 320 422.1 320 415.1C320 402.3 308.8 391.1 296 391.1zM152 119.1c6.141 0 12.28-2.344 16.97-7.031L200 81.91v86.07c0 13.25 10.75 24 24 24s24-10.75 24-24V81.91l31.03 31.03C283.7 117.6 289.8 119.1 296 119.1c18.79 0 24-17.2 24-23.1c0-6.141-2.344-12.28-7.031-16.97l-72-72.01C234.9 .9766 227.7 0 223.1 0C220.3 0 213.1 .9687 207 7l-72 72.01C130.3 83.7 128 89.84 128 95.98C128 109.7 139.2 119.1 152 119.1zM424 232H24C10.75 232 0 242.7 0 255.1S10.75 280 24 280h400c13.25 0 24-10.76 24-24.01S437.3 232 424 232z"/></svg>

src/assets/locales/en.json

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

src/components/LinkItems/Section.vue

@@ -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/SectionContextMenu.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,6 +30,7 @@
 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',
@@ -33,6 +38,7 @@ export default {
     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');
     },