Add support for using submenus in submenus

client/src/styles/partials/generic/contextmenu.scss

@@ -18,11 +18,9 @@
     .bd-cm {
         left: 170px;
         max-height: 270px;
-        overflow-y: auto;
         contain: layout;
         flex: 1;
         min-height: 1px;
-        margin-left: 170px;
 
         &::-webkit-scrollbar {
             height: 8px;

client/src/ui/components/BdContextMenu.vue

@@ -20,6 +20,9 @@
     import CMGroup from './contextmenu/Group.vue';
 
     export default {
+        components: {
+            CMGroup
+        },
         data() {
             return {
                 activeMenu: BdContextMenu.activeMenu,
@@ -29,15 +32,14 @@
                 renderLeft: false
             };
         },
-        components: { CMGroup },
         methods: {
             calculatePosition() {
                 if (!this.activeMenu.menu.groups.length) return {};
-                this.mouseX = this.activeMenu.menu.x;
-                this.mouseY = this.activeMenu.menu.y;
+                const mouseX = this.activeMenu.menu.x;
+                const mouseY = this.activeMenu.menu.y;
                 const height = this.activeMenu.menu.groups.reduce((total, group) => total + group.items.length, 0) * 28;
-                this.top = window.innerHeight - this.mouseY - height < 0 ? this.mouseY - height : this.mouseY;
-                this.left = window.innerWidth - this.mouseX - 170 < 0 ? this.mouseX - 170 : this.mouseX;
+                this.top = window.innerHeight - mouseY - height < 0 ? mouseY - height : mouseY;
+                this.left = window.innerWidth - mouseX - 170 < 0 ? mouseX - 170 : mouseX;
                 this.renderLeft = (this.left + 170 * 2) > window.innerWidth;
                 window.addEventListener('mousedown', this.clickHide);
                 return { top: `${this.top}px`, left: `${this.left}px` };

client/src/ui/components/BdSettingsWrapper.vue

@@ -28,13 +28,6 @@
 
     export default {
         data() {
-            const subMenu = {
-                type: 'sub',
-                text: 'Sub menu',
-                items: []
-            };
-            subMenu.items.push(subMenu);
-
             return {
                 loaded: false,
                 updating: false,
@@ -56,8 +49,7 @@
                                     if (this.updating === 2) Updater.update();
                                     else if (this.updating !== 0) Updater.checkForUpdates();
                                 }
-                            },
-                            subMenu
+                            }
                         ]
                     }
                 ]

client/src/ui/components/contextmenu/Group.vue

@@ -11,14 +11,15 @@
 <template>
     <div class="bd-cmGroup">
         <template v-for="(item, index) in items">
-            <CMToggle v-if="item.type === 'toggle'" :item="item" @click="item.checked = item.onChange(!item.checked)" />
-            <div v-else-if="item.type === 'sub'" class="bd-cmItem bd-cmSub" @mouseenter="subMenuMouseEnter($event, index, item)" @mouseleave="subMenuMouseLeave($event, index, item)">
+            <div v-if="item.type === 'sub'" class="bd-cmItem bd-cmSub" @mouseenter="subMenuMouseEnter($event, index, item)" @mouseleave="subMenuMouseLeave($event, index, item)">
                 {{item.text}}
                 <MiChevronDown />
-                <div class="bd-cm" v-if="index === visibleSub" :style="subStyle">
-                    <CMGroup :items="item.items" :top="subTop" :left="left" @close="$emit('close')" />
+                <div v-if="index === visibleSub" :class="['bd-cm', {'bd-cmRenderLeft': subRenderLeft}]" :style="subStyle">
+                    <CMGroup :items="item.items" :top="subTop" :left="subLeft" @close="$emit('close')" />
                 </div>
             </div>
+
+            <CMToggle v-else-if="item.type === 'toggle'" :item="item" @click="item.checked = item.onChange(!item.checked)" />
             <CMButton v-else :item="item" @click="item.onClick ? item.onClick($event) : undefined; item.type === 'button' ? $emit('close') : undefined" />
         </template>
     </div>
@@ -41,7 +42,8 @@
                 visibleSub: -1,
                 subStyle: {},
                 subTop: 0,
-                subLeft: 0
+                subLeft: 0,
+                subRenderLeft: false
             };
         },
         methods: {
@@ -50,7 +52,9 @@
                 this.subTop = this.top + subHeight + e.target.offsetTop > window.innerHeight ?
                     this.top - subHeight + e.target.offsetTop + e.target.offsetHeight :
                     this.top + e.target.offsetTop;
-                this.subStyle = { top: `${this.subTop}px`, left: `${this.left}px` };
+                this.subRenderLeft = (this.left + 170 * 2) > window.innerWidth;
+                this.subLeft = this.left + (!this.subRenderLeft ? e.target.clientWidth : 0);
+                this.subStyle = { top: `${this.subTop - 2}px`, left: `${this.subLeft}px` };
                 this.visibleSub = index;
             },
             subMenuMouseLeave(e, index, sub) {