Merge pull request #6484 from Countly/validating-sidebar-menu

fix: Add z-index to sidebar menu container

Author: pnrgenc

frontend/express/public/javascripts/countly/vue/components/sidebar.js

@@ -616,7 +616,6 @@
                 countlyVue.container.dataMixin({
                     "externalMainMenuOptions": "/sidebar/menu/main",
                     "otherMenuOptions": "/sidebar/menu/other",
-                    "customSidebarComponents": "/sidebar/custom",
                 })
             ],
             components: {

frontend/express/public/javascripts/countly/vue/core.js

@@ -894,17 +894,23 @@
             self.vm = new Vue({
                 el: el,
                 store: _vuex.getGlobalStore(),
+                mixins: [
+                    countlyVue.container.dataMixin({
+                        "customOverlayComponents": "/overlay/custom",
+                    })
+                ],
                 components: {
                     DummyCompAPI: DummyCompAPI,
                     MainView: self.component,
                     GenericPopups: GenericPopupsView,
-                    QuickstartPopover: QuickstartPopoverView,
+                    QuickstartPopover: QuickstartPopoverView
                 },
                 template: '<div>\
                                 <MainView></MainView>\
                                 <GenericPopups></GenericPopups>\
                                 <DummyCompAPI></DummyCompAPI>\
                                 <QuickstartPopover></QuickstartPopover>\
+                                <component v-if="customOverlayComponents" v-for="customComponent in customOverlayComponents" :key="customComponent.name" :is="customComponent.component" />\
                             </div>',
                 beforeCreate: function() {
                     this.$route.params = self.params;

frontend/express/public/javascripts/countly/vue/templates/sidebar/sidebar.html

@@ -67,10 +67,4 @@
             </a>
         </div>
     </transition>
-
-    <component
-        v-if="customSidebarComponents"
-        v-for="customComponent in customSidebarComponents"
-        :key="customComponent.name"
-        :is="customComponent.component" />
 </div>

frontend/express/public/stylesheets/styles/blocks/_sidebar.scss

@@ -8,6 +8,7 @@ $bg-color: #24292e;
     left: 0;
     height: 100%;
     user-select: none;
+    z-index: 2000;
     color: map.get(c.$colors, "warm-gray-40");
 }
 
@@ -141,6 +142,7 @@ $bg-color: #24292e;
         box-sizing: border-box;
         height: 100%;
         overflow: hidden;
+        z-index: 2004;
         position: relative;
 
         /* .cly-vue-sidebar__menu--with-banner */