Fix: Modified z-index for draggable components, navbar and tabsBar in both expanded and collapsed states of tabsBar

src/components/Navbar/NavbarLinks/NavbarLink/NavbarLink.vue

@@ -7,6 +7,7 @@
             role="button"
             aria-haspopup="true"
             aria-expanded="false"
+            @click="toggleDropdown"
         >
             {{ $t('simulator.nav.' + navbarItem.text + '.heading') }}
             <span></span>
@@ -21,11 +22,65 @@
 </template>
 
 <script lang="ts" setup>
-import DropDown from '@/Dropdown/DropDown.vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import DropDown from '@/Dropdown/DropDown.vue';
 
 const props = defineProps({
-    navbarItem: { type: Object, default: () => {} },
-})
+  navbarItem: { type: Object, default: () => {} },
+});
+
+const isDropdownOpen = ref(false);
+
+const toggleDropdown = () => {
+  isDropdownOpen.value = !isDropdownOpen.value;
+
+  const navbar = document.querySelector('.navbar');
+  const tabsBar = document.getElementById('tabsBar');
+  let isTabsBarExpaned = !tabsBar.classList.contains('maxHeightStyle')
+
+  if (!isDropdownOpen.value && !isTabsBarExpaned) {
+      navbar.style.zIndex = '';
+      tabsBar.style.zIndex = '';
+  } else {
+      navbar.style.zIndex = '103';
+      tabsBar.style.zIndex = '102';
+  }
+};
+
+const handleDocumentClick = (event) => {
+  const dropdownElements = Array.from(document.querySelectorAll('.nav-dropdown a'));
+
+  const tabsBarToggleButton = document.querySelector('.tabsbar-toggle');
+  let istabsBarToggleClicked = tabsBarToggleButton?.contains(event.target);
+
+  const isClickInsideDropdown = dropdownElements.some((dropdownElement) => {
+    return dropdownElement.contains(event.target);
+  });
+
+  if (!isClickInsideDropdown) {
+    isDropdownOpen.value = false;
+
+    if(istabsBarToggleClicked) return;
+
+    const navbar = document.querySelector('.navbar');
+    const tabsBar = document.getElementById('tabsBar');
+    let isTabsBarExpaned = !tabsBar.classList.contains('maxHeightStyle')
+
+    if (!isDropdownOpen.value && !isTabsBarExpaned) {
+        navbar.style.zIndex = '';
+        tabsBar.style.zIndex = '';
+    } 
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('click', handleDocumentClick);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', handleDocumentClick);
+});
+
 </script>
 
 <style scoped>

src/components/TabsBar/TabsBar.vue

@@ -87,6 +87,17 @@ const showMaxHeight = ref(true)
 
 function toggleHeight() {
     showMaxHeight.value = !showMaxHeight.value
+
+    const navbar = document.querySelector('.navbar');
+    const tabsBar = document.getElementById('tabsBar');
+
+    if (showMaxHeight.value) {
+        navbar.style.zIndex = '';
+        tabsBar.style.zIndex = '';
+    } else {
+        navbar.style.zIndex = '103';
+        tabsBar.style.zIndex = '102';
+    }
 }
 
 // const persistentShow: Ref<boolean> = ref(false)
@@ -289,7 +300,7 @@ function isEmbed(): boolean {
     position: relative;
     overflow: hidden;
     padding-bottom: 2.5px;
-    z-index: 100;
+    z-index: 99;
 }
 
 #tabsBar.embed-tabbar {

src/simulator/src/drag.ts

@@ -73,8 +73,8 @@ export function dragging(targetEl: HTMLElement, DragEl: HTMLElement): void {
     })
 
     $(DragEl).on('mousedown', () => {
-        $(`.draggable-panel:not(${DragEl})`).css('z-index', '99')
-        $(DragEl).css('z-index', '99')
+        $(`.draggable-panel:not(${DragEl})`).css('z-index', '100')
+        $(DragEl).css('z-index', '101')
     })
 
     let panelElements = document.querySelectorAll(