Fix: Modified few things for expected behaviour

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,57 @@
 </template>
 
 <script lang="ts" setup>
-import DropDown from '@/Dropdown/DropDown.vue'
+import { ref, watchEffect } 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';
+  }
+};
+
+document.addEventListener('click', (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 = '';
+    } 
+  }
+});
+
 </script>
 
 <style scoped>

src/components/TabsBar/TabsBar.vue

@@ -95,7 +95,7 @@ function toggleHeight() {
         navbar.style.zIndex = '';
         tabsBar.style.zIndex = '';
     } else {
-        navbar.style.zIndex = '102';
+        navbar.style.zIndex = '103';
         tabsBar.style.zIndex = '102';
     }
 }
@@ -300,7 +300,7 @@ function isEmbed(): boolean {
     position: relative;
     overflow: hidden;
     padding-bottom: 2.5px;
-    z-index: 100;
+    z-index: 99;
 }
 
 #tabsBar.embed-tabbar {