bfg-common 1.5.379 → 1.5.381

package/assets/localization/local_be.json

@@ -2624,13 +2624,13 @@
     "lowest": "Найніжэйшы",
     "medium": "Сярэдні",
     "highest": "Найвышэйшы",
-    "startNextPriorityVms": "Запусціць ВМ наступнага прыярытэту",
+    "startNextPriorityVms": "Запусціць наступныя прыярытэтныя ВМ, калі",
     "resourcesAllocated": "Выдзелены рэсурсы",
     "guestHeartbeatsDetected": "Выяўлены сігналы сэрцабіцця госця",
     "appHeartbeatsDetected": "Выяўлены сігналы сэрцабіцця праграмы",
     "when": "калі",
     "additionalDelay": "Дадатковая затрымка",
-    "vmRestartPriorityCondition": "Умова прыярытэту перазапуску ВМ",
+    "vmRestartPriorityCondition": "Тайм-аут умовы прыярытэту перазапуску ВМ",
     "timeout": "часовы інтэрвал",
     "sphereHaPdlProtectionSettings": "Sphere HA — Налады абароны PDL",
     "failureResponseInfo": "Пастаянная страта прылады або PDL — гэта асаблівы выпадак APD, які ўзнікае пры выдаленні прылады (LUN) з масіва захоўвання.",
@@ -2640,7 +2640,8 @@
     "sphereHaVmMonitoring": "Sphere HA — Маніторынг ВМ",
     "resetVms": "Скід ВМ",
     "updateSomeSettingsSaveOverride": "Абнавіце некаторыя налады, каб захаваць перазапіс.",
-    "selectVm": "Абярыце віртуальную машыну"
+    "selectVm": "Абярыце віртуальную машыну",
+    "editVmOverrideFor": "Рэдагаваць перапісанне ВМ для"
   },
   "datastoreWizard": {
     "accessMode": "Рэжым доступу",

package/assets/localization/local_en.json

@@ -2628,13 +2628,13 @@
     "lowest": "Lowest",
     "medium": "Medium",
     "highest": "Highest",
-    "startNextPriorityVms": "Start next priority VMs",
+    "startNextPriorityVms": "Start next priority VMs when",
     "resourcesAllocated": "Resources allocated",
     "guestHeartbeatsDetected": "Guest Heartbeats detected",
     "appHeartbeatsDetected": "App Heartbeats detected",
     "when": "when",
     "additionalDelay": "Additional delay",
-    "vmRestartPriorityCondition": "VM restart priority condition",
+    "vmRestartPriorityCondition": "VM restart priority condition timeout",
     "timeout": "timeout",
     "sphereHaPdlProtectionSettings": "Sphere HA - PDL Protection Settings",
     "failureResponseInfo": "Permanent Device Loss or PDL is a special case of APD caused by removing a device (LUN) from the storage array.",
@@ -2644,7 +2644,8 @@
     "sphereHaVmMonitoring": "Sphere HA - VM Monitoring",
     "resetVms": "Reset VMs",
     "updateSomeSettingsSaveOverride": "Update some settings to save the override.",
-    "selectVm": "Select a virtual machine"
+    "selectVm": "Select a virtual machine",
+    "editVmOverrideFor": "Edit VM Override for"
   },
   "datastoreWizard": {
     "accessMode": "Access Mode",

package/assets/localization/local_hy.json

@@ -2628,13 +2628,13 @@
     "lowest": "Ամենացածր",
     "medium": "Միջին",
     "highest": "Ամենաբարձր",
-    "startNextPriorityVms": "Սկսել հաջորդ առաջնահերթ վիրտուալ մեքենաները",
+    "startNextPriorityVms": "Գործարկել հաջորդ առաջնահերթ վիրտուալ մեքենաները, երբ",
     "resourcesAllocated": "Բաժինված ռեսուրսներ",
     "guestHeartbeatsDetected": "Պարզվել են հյուրի սրտի տրոփոցները",
     "appHeartbeatsDetected": "Պարզվել են հավելվածի սրտի տրոփոցները",
     "when": "երբ",
     "additionalDelay": "Լրացուցիչ ուշացում",
-    "vmRestartPriorityCondition": "VM-ի վերագործարկման առաջնահերթության պայման",
+    "vmRestartPriorityCondition": "ՎՄ վերագործարկման առաջնահերթության պայմանների ժամանակի ավարտ",
     "timeout": "ժամանակի ավարտ",
     "sphereHaPdlProtectionSettings": "Sphere HA — PDL պաշտպանության կարգավորումներ",
     "failureResponseInfo": "Կայուն սարքի կորուստը կամ PDL-ը APD-ի հատուկ դեպք է, որը առաջանում է սարքի (LUN) պահեստավորման զանգվածից հեռացման հետևանքով։",
@@ -2644,7 +2644,8 @@
     "sphereHaVmMonitoring": "Sphere HA — Վիրտուալ մեքենաների մոնիտորինգ",
     "resetVms": "Վիրտուալ մեքենաների վերականգնում",
     "updateSomeSettingsSaveOverride": "Թարմացրեք որոշ պարամետրեր՝ պահպանելու վերագրումը։",
-    "selectVm": "Ընտրեք վիրտուալ մեքենա"
+    "selectVm": "Ընտրեք վիրտուալ մեքենա",
+    "editVmOverrideFor": "Խմբագրել ՎՄ վերագրման կարգավորումը համար"
   },
   "datastoreWizard": {
     "accessMode": "Մուտքի ռեժիմ",

package/assets/localization/local_kk.json

@@ -2627,13 +2627,13 @@
     "lowest": "Ең төмен",
     "medium": "Орташа",
     "highest": "Ең жоғары",
-    "startNextPriorityVms": "Келесі басымдығы бар ВМ-дерді іске қосу",
+    "startNextPriorityVms": "Келесі басымдықтағы ВМ-дерді іске қосу, қашан",
     "resourcesAllocated": "Бөлінген ресурстар",
     "guestHeartbeatsDetected": "Қонақ жүрек соғу сигналдары анықталды",
     "appHeartbeatsDetected": "Қосымша жүрек соғу сигналдары анықталды",
     "when": "қашан",
     "additionalDelay": "Қосымша кешіктіру",
-    "vmRestartPriorityCondition": "VM қайта іске қосу басымдылығының шарты",
+    "vmRestartPriorityCondition": "ВМ қайта іске қосу басымдығы шартының уақыт бітуі",
     "timeout": "уақытша тоқтату",
     "sphereHaPdlProtectionSettings": "Sphere HA — PDL қорғаныс баптаулары",
     "failureResponseInfo": "Тұрақты құрылғының жоғалуы немесе PDL — сақтау массивінен құрылғыны (LUN) алып тастаудан туындайтын APD-нің ерекше жағдайы.",
@@ -2643,7 +2643,8 @@
     "sphereHaVmMonitoring": "Sphere HA — Виртуалды машиналарды бақылау",
     "resetVms": "ВМ қайта іске қосу",
     "updateSomeSettingsSaveOverride": "Қайта анықтауды сақтау үшін кейбір баптауларды жаңартыңыз.",
-    "selectVm": "Виртуалды машинаны таңдаңыз"
+    "selectVm": "Виртуалды машинаны таңдаңыз",
+    "editVmOverrideFor": "ВМ қайта жазу параметрін өңдеу үшін"
   },
   "datastoreWizard": {
     "accessMode": "Қол жеткізу режимі",

package/assets/localization/local_ru.json

@@ -2627,13 +2627,13 @@
     "lowest": "Наименьший",
     "medium": "Средний",
     "highest": "Наивысший",
-    "startNextPriorityVms": "Запустить ВМ следующего приоритета",
+    "startNextPriorityVms": "Запустить следующие приоритетные ВМ, когда",
     "resourcesAllocated": "Выделенные ресурсы",
     "guestHeartbeatsDetected": "Обнаружены сигналы heartbeat гостевой ОС",
     "appHeartbeatsDetected": "Обнаружены сигналы heartbeat приложения",
     "when": "когда",
     "additionalDelay": "Дополнительная задержка",
-    "vmRestartPriorityCondition": "Условие приоритета перезапуска ВМ",
+    "vmRestartPriorityCondition": "Тайм-аут условия приоритета перезапуска ВМ",
     "timeout": "таймаут",
     "sphereHaPdlProtectionSettings": "Sphere HA — Настройки защиты PDL",
     "failureResponseInfo": "Постоянная потеря устройства или PDL — это особый случай APD, вызванный удалением устройства (LUN) из массива хранения.",
@@ -2643,7 +2643,8 @@
     "sphereHaVmMonitoring": "Sphere HA — Мониторинг ВМ",
     "resetVms": "Сброс ВМ",
     "updateSomeSettingsSaveOverride": "Обновите некоторые настройки, чтобы сохранить переопределение.",
-    "selectVm": "Выберите виртуальную машину"
+    "selectVm": "Выберите виртуальную машину",
+    "editVmOverrideFor": "Изменить переопределение ВМ для"
   },
   "datastoreWizard": {
     "accessMode": "Режим доступа",

package/assets/localization/local_zh.json

@@ -2625,13 +2625,13 @@
     "lowest": "最低",
     "medium": "中等",
     "highest": "最高",
-    "startNextPriorityVms": "启动下一个优先级的虚拟机",
+    "startNextPriorityVms": "当…时启动下一个优先级虚拟机",
     "resourcesAllocated": "分配的资源",
     "guestHeartbeatsDetected": "检测到客户机心跳信号",
     "appHeartbeatsDetected": "检测到应用程序心跳信号",
     "when": "什么时候",
     "additionalDelay": "额外延迟",
-    "vmRestartPriorityCondition": "虚拟机重启优先级条件",
+    "vmRestartPriorityCondition": "虚拟机重启优先级条件超时",
     "timeout": "超时",
     "sphereHaPdlProtectionSettings": "Sphere HA — PDL 保护设置",
     "failureResponseInfo": "永久设备丢失（PDL）是由于从存储阵列中移除设备（LUN）引起的 APD 的一种特殊情况。",
@@ -2641,7 +2641,8 @@
     "sphereHaVmMonitoring": "Sphere HA — 虚拟机监控",
     "resetVms": "重置虚拟机",
     "updateSomeSettingsSaveOverride": "更新一些设置以保存覆盖。",
-    "selectVm": "选择虚拟机"
+    "selectVm": "选择虚拟机",
+    "editVmOverrideFor": "编辑虚拟机覆盖设置用于"
   },
   "datastoreWizard": {
     "accessMode": "访问方式",

package/components/atoms/TheIcon3.vue

@@ -1,50 +1,50 @@
-<template>
-  <template v-if="props.name === 'zabbix'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="80"
-      height="22"
-      viewBox="0 0 80 22"
-      fill="none"
-    >
-      <g clip-path="url(#clip0_2691_29714)">
-        <path d="M0 0.522461H80V21.477H0V0.522461Z" fill="#D40000" />
-        <path
-          d="M3.42089 3.71582H14.9889V5.2187L5.6782 16.625H15.2164V18.2836H3.19336V16.7807L12.504 5.37438H3.42089V3.71582ZM23.0402 5.65779L20.3378 12.9087H25.7526L23.0402 5.65779ZM21.9145 3.71582H24.1738L29.7862 18.2836H27.7145L26.3753 14.5473H19.735L18.3938 18.2836H16.2922L21.9145 3.71582ZM33.9176 11.326V16.663H37.113C38.1848 16.663 38.9791 16.4434 39.496 16.0043C40.013 15.5652 40.2704 14.8926 40.2704 13.9905C40.2704 13.0804 40.013 12.4078 39.496 11.9747C38.9791 11.5436 38.1848 11.326 37.113 11.326H33.9176ZM33.9176 5.33446V9.72535H36.8675C37.8415 9.72535 38.566 9.54373 39.043 9.18447C39.52 8.82322 39.7575 8.27237 39.7575 7.5319C39.7575 6.79743 39.518 6.24657 39.043 5.88332C38.566 5.52008 37.8415 5.33646 36.8675 5.33646H33.9176V5.33446ZM31.9257 3.71582H37.0152C38.534 3.71582 39.7056 4.02717 40.5259 4.65188C41.3482 5.27658 41.7573 6.16474 41.7573 7.31635C41.7573 8.2065 41.5478 8.91703 41.1266 9.44393C40.7055 9.97084 40.0868 10.3002 39.2725 10.4299C40.2525 10.6375 41.0129 11.0706 41.5558 11.7312C42.0986 12.3918 42.3701 13.2161 42.3701 14.2041C42.3701 15.5054 41.923 16.5093 41.0289 17.2198C40.1347 17.9283 38.8614 18.2836 37.2128 18.2836H31.9257V3.71582ZM47.5573 11.326V16.663H50.7547C51.8265 16.663 52.6208 16.4434 53.1357 16.0043C53.6527 15.5652 53.9101 14.8926 53.9101 13.9905C53.9101 13.0804 53.6527 12.4078 53.1357 11.9747C52.6188 11.5436 51.8245 11.326 50.7547 11.326H47.5573ZM47.5573 5.33446V9.72535H50.5072C51.4812 9.72535 52.2057 9.54373 52.6827 9.18447C53.1597 8.82322 53.3972 8.27237 53.3972 7.5319C53.3972 6.79743 53.1597 6.24657 52.6827 5.88332C52.2057 5.52008 51.4812 5.33646 50.5072 5.33646H47.5573V5.33446ZM45.5654 3.71582H50.6549C52.1737 3.71582 53.3453 4.02717 54.1656 4.65188C54.9879 5.27658 55.399 6.16474 55.399 7.31635C55.399 8.2065 55.1895 8.91703 54.7683 9.44393C54.3472 9.97084 53.7285 10.3002 52.9142 10.4299C53.8942 10.6375 54.6546 11.0706 55.1975 11.7312C55.7403 12.3918 56.0118 13.2161 56.0118 14.2041C56.0118 15.5054 55.5647 16.5093 54.6706 17.2198C53.7764 17.9283 52.503 18.2836 50.8545 18.2836H45.5654V3.71582ZM64.9732 3.71582H67.1646L70.6274 8.94697L74.1242 3.71582H76.2418L71.6833 10.5397L76.8086 18.2836H74.6172L70.5835 12.1882L66.51 18.2836H64.3924L69.5297 10.5955L64.9732 3.71582ZM59.2031 3.71582H61.195V18.2836H59.2031V3.71582Z"
-          fill="white"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_2691_29714">
-          <rect
-            width="80"
-            height="20.96"
-            fill="white"
-            transform="translate(0 0.519531)"
-          />
-        </clipPath>
-      </defs>
-    </svg>
-  </template>
-  <template v-else><span></span></template>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    name: string
-    type?: string
-    color?: string
-    width?: string
-    height?: string
-  }>(),
-  {
-    type: '',
-    color: 'currentColor',
-    width: '24',
-    height: '24',
-  }
-)
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <template v-if="props.name === 'zabbix'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="80"
+      height="22"
+      viewBox="0 0 80 22"
+      fill="none"
+    >
+      <g clip-path="url(#clip0_2691_29714)">
+        <path d="M0 0.522461H80V21.477H0V0.522461Z" fill="#D40000" />
+        <path
+          d="M3.42089 3.71582H14.9889V5.2187L5.6782 16.625H15.2164V18.2836H3.19336V16.7807L12.504 5.37438H3.42089V3.71582ZM23.0402 5.65779L20.3378 12.9087H25.7526L23.0402 5.65779ZM21.9145 3.71582H24.1738L29.7862 18.2836H27.7145L26.3753 14.5473H19.735L18.3938 18.2836H16.2922L21.9145 3.71582ZM33.9176 11.326V16.663H37.113C38.1848 16.663 38.9791 16.4434 39.496 16.0043C40.013 15.5652 40.2704 14.8926 40.2704 13.9905C40.2704 13.0804 40.013 12.4078 39.496 11.9747C38.9791 11.5436 38.1848 11.326 37.113 11.326H33.9176ZM33.9176 5.33446V9.72535H36.8675C37.8415 9.72535 38.566 9.54373 39.043 9.18447C39.52 8.82322 39.7575 8.27237 39.7575 7.5319C39.7575 6.79743 39.518 6.24657 39.043 5.88332C38.566 5.52008 37.8415 5.33646 36.8675 5.33646H33.9176V5.33446ZM31.9257 3.71582H37.0152C38.534 3.71582 39.7056 4.02717 40.5259 4.65188C41.3482 5.27658 41.7573 6.16474 41.7573 7.31635C41.7573 8.2065 41.5478 8.91703 41.1266 9.44393C40.7055 9.97084 40.0868 10.3002 39.2725 10.4299C40.2525 10.6375 41.0129 11.0706 41.5558 11.7312C42.0986 12.3918 42.3701 13.2161 42.3701 14.2041C42.3701 15.5054 41.923 16.5093 41.0289 17.2198C40.1347 17.9283 38.8614 18.2836 37.2128 18.2836H31.9257V3.71582ZM47.5573 11.326V16.663H50.7547C51.8265 16.663 52.6208 16.4434 53.1357 16.0043C53.6527 15.5652 53.9101 14.8926 53.9101 13.9905C53.9101 13.0804 53.6527 12.4078 53.1357 11.9747C52.6188 11.5436 51.8245 11.326 50.7547 11.326H47.5573ZM47.5573 5.33446V9.72535H50.5072C51.4812 9.72535 52.2057 9.54373 52.6827 9.18447C53.1597 8.82322 53.3972 8.27237 53.3972 7.5319C53.3972 6.79743 53.1597 6.24657 52.6827 5.88332C52.2057 5.52008 51.4812 5.33646 50.5072 5.33646H47.5573V5.33446ZM45.5654 3.71582H50.6549C52.1737 3.71582 53.3453 4.02717 54.1656 4.65188C54.9879 5.27658 55.399 6.16474 55.399 7.31635C55.399 8.2065 55.1895 8.91703 54.7683 9.44393C54.3472 9.97084 53.7285 10.3002 52.9142 10.4299C53.8942 10.6375 54.6546 11.0706 55.1975 11.7312C55.7403 12.3918 56.0118 13.2161 56.0118 14.2041C56.0118 15.5054 55.5647 16.5093 54.6706 17.2198C53.7764 17.9283 52.503 18.2836 50.8545 18.2836H45.5654V3.71582ZM64.9732 3.71582H67.1646L70.6274 8.94697L74.1242 3.71582H76.2418L71.6833 10.5397L76.8086 18.2836H74.6172L70.5835 12.1882L66.51 18.2836H64.3924L69.5297 10.5955L64.9732 3.71582ZM59.2031 3.71582H61.195V18.2836H59.2031V3.71582Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2691_29714">
+          <rect
+            width="80"
+            height="20.96"
+            fill="white"
+            transform="translate(0 0.519531)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  </template>
+  <template v-else><span></span></template>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    name: string
+    type?: string
+    color?: string
+    width?: string
+    height?: string
+  }>(),
+  {
+    type: '',
+    color: 'currentColor',
+    width: '24',
+    height: '24',
+  }
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/atoms/collapse/CollapseNav.vue

@@ -1,170 +1,170 @@
-<template>
-  <div class="tabs-overflow bottom-right">
-    <button
-      :id="collapsedBtnId"
-      :class="[
-        'btn btn-link nav-link dropdown-toggle',
-        { active: collapsedBtnActive },
-      ]"
-      :data-id="`${props.testId}-toggle-button`"
-      @mouseenter="hover = true"
-      @mouseleave="hover = false"
-      @mousedown="showMenu"
-    >
-      <atoms-the-icon
-        :class="['collapse-icon', { active: open }]"
-        name="ellipsis-horizontal"
-        width="16px"
-        height="16px"
-      />
-    </button>
-
-    <Teleport to="body">
-      <ul
-        v-show="open"
-        :class="['navbar-dropdown-menu', props.popupClass]"
-        :style="dropdownMenuStyles"
-      >
-        <li
-          v-for="(item, key) in props.items"
-          :key="key"
-          v-permission="item.permission"
-          :title="item.title"
-          class="navbar-dropdown-menu-item"
-          @mousedown.stop
-        >
-          <div
-            v-if="item.separate"
-            class="navbar-dropdown-menu-separator"
-          ></div>
-          <atoms-collapse-nav-item
-            v-else
-            :is-link="props.isLink"
-            :item="item"
-            :value="value"
-            btn-class="btn"
-            @change="change"
-            @select-file="onSelectFile($event, key)"
-          />
-        </li>
-      </ul>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    items: UI_I_CollapseNavItem[]
-    isLink?: boolean
-    value?: number | string
-    popupClass?: string
-    closeAfterClick?: boolean
-    testId?: string
-  }>(),
-  {
-    isLink: undefined,
-    value: undefined,
-    popupClass: undefined,
-    closeAfterClick: undefined,
-    testId: '',
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', value: number): void
-  (event: 'select-file', value1: Event, value2: string, value3: number): void
-}>()
-
-const change = (value: number): void => {
-  emits('change', value)
-  props.closeAfterClick && (open.value = false)
-}
-const onSelectFile = (event: Event, type: string, key: number): void => {
-  emits('select-file', event, type, key)
-}
-
-const collapsedBtnId = ref<string>('')
-
-const route = useRoute()
-const collapsedBtnActive = computed<boolean>(() => {
-  if (props.isLink)
-    return props.items.some((item) => route.path.includes(item.path || ''))
-
-  return props.items.some((item) => item.value === props.value)
-})
-
-const open = ref<boolean>(false)
-const hover = ref<boolean>(false)
-const dropdownMenuStyles = ref<any>({})
-const showMenu = (): void => {
-  if (open.value) {
-    hideMenu(true)
-    return
-  }
-
-  open.value = true
-
-  const btn = document.querySelector(`#${collapsedBtnId.value}`)
-  const { top, height, right } = btn!.getBoundingClientRect()
-  dropdownMenuStyles.value = {
-    top: `${top + height}px`,
-    left: `${right}px`,
-  }
-}
-const hideMenu = (force?: boolean): void => {
-  if (hover.value && !force) return
-
-  open.value = false
-}
-
-const windowClick = (): void => {
-  hideMenu()
-}
-const windowResize = (): void => {
-  hideMenu(true)
-}
-onMounted(() => {
-  collapsedBtnId.value = `collapsed-btn${useUniqueId()}`
-  window.addEventListener('mousedown', windowClick)
-  window.addEventListener('resize', windowResize)
-})
-onUnmounted(() => {
-  window.removeEventListener('mousedown', windowClick)
-  window.removeEventListener('resize', windowResize)
-})
-</script>
-
-<style scoped lang="scss">
-.tabs-overflow {
-  position: absolute;
-  top: 0;
-  right: 24px;
-
-  .dropdown-toggle {
-    .collapse-icon {
-      fill: var(--main-color-mode);
-
-      &.active {
-        fill: #0077b8;
-      }
-    }
-  }
-}
-
-.navbar-dropdown-menu {
-  position: fixed;
-  z-index: var(--z-dropdown);
-  transform: translateX(-100%);
-  border: 1px solid var(--global-border-color);
-  border-radius: 3px;
-  margin-top: 2px;
-  background-color: var(--global-bg-color);
-  padding: 12px 0;
-}
-.navbar-dropdown-menu-separator {
-  margin: 6px 0;
-  border-bottom: 0.8px solid #e8e8e8;
-}
-</style>
+<template>
+  <div class="tabs-overflow bottom-right">
+    <button
+      :id="collapsedBtnId"
+      :class="[
+        'btn btn-link nav-link dropdown-toggle',
+        { active: collapsedBtnActive },
+      ]"
+      :data-id="`${props.testId}-toggle-button`"
+      @mouseenter="hover = true"
+      @mouseleave="hover = false"
+      @mousedown="showMenu"
+    >
+      <atoms-the-icon
+        :class="['collapse-icon', { active: open }]"
+        name="ellipsis-horizontal"
+        width="16px"
+        height="16px"
+      />
+    </button>
+
+    <Teleport to="body">
+      <ul
+        v-show="open"
+        :class="['navbar-dropdown-menu', props.popupClass]"
+        :style="dropdownMenuStyles"
+      >
+        <li
+          v-for="(item, key) in props.items"
+          :key="key"
+          v-permission="item.permission"
+          :title="item.title"
+          class="navbar-dropdown-menu-item"
+          @mousedown.stop
+        >
+          <div
+            v-if="item.separate"
+            class="navbar-dropdown-menu-separator"
+          ></div>
+          <atoms-collapse-nav-item
+            v-else
+            :is-link="props.isLink"
+            :item="item"
+            :value="value"
+            btn-class="btn"
+            @change="change"
+            @select-file="onSelectFile($event, key)"
+          />
+        </li>
+      </ul>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    items: UI_I_CollapseNavItem[]
+    isLink?: boolean
+    value?: number | string
+    popupClass?: string
+    closeAfterClick?: boolean
+    testId?: string
+  }>(),
+  {
+    isLink: undefined,
+    value: undefined,
+    popupClass: undefined,
+    closeAfterClick: undefined,
+    testId: '',
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', value: number): void
+  (event: 'select-file', value1: Event, value2: string, value3: number): void
+}>()
+
+const change = (value: number): void => {
+  emits('change', value)
+  props.closeAfterClick && (open.value = false)
+}
+const onSelectFile = (event: Event, type: string, key: number): void => {
+  emits('select-file', event, type, key)
+}
+
+const collapsedBtnId = ref<string>('')
+
+const route = useRoute()
+const collapsedBtnActive = computed<boolean>(() => {
+  if (props.isLink)
+    return props.items.some((item) => route.path.includes(item.path || ''))
+
+  return props.items.some((item) => item.value === props.value)
+})
+
+const open = ref<boolean>(false)
+const hover = ref<boolean>(false)
+const dropdownMenuStyles = ref<any>({})
+const showMenu = (): void => {
+  if (open.value) {
+    hideMenu(true)
+    return
+  }
+
+  open.value = true
+
+  const btn = document.querySelector(`#${collapsedBtnId.value}`)
+  const { top, height, right } = btn!.getBoundingClientRect()
+  dropdownMenuStyles.value = {
+    top: `${top + height}px`,
+    left: `${right}px`,
+  }
+}
+const hideMenu = (force?: boolean): void => {
+  if (hover.value && !force) return
+
+  open.value = false
+}
+
+const windowClick = (): void => {
+  hideMenu()
+}
+const windowResize = (): void => {
+  hideMenu(true)
+}
+onMounted(() => {
+  collapsedBtnId.value = `collapsed-btn${useUniqueId()}`
+  window.addEventListener('mousedown', windowClick)
+  window.addEventListener('resize', windowResize)
+})
+onUnmounted(() => {
+  window.removeEventListener('mousedown', windowClick)
+  window.removeEventListener('resize', windowResize)
+})
+</script>
+
+<style scoped lang="scss">
+.tabs-overflow {
+  position: absolute;
+  top: 0;
+  right: 24px;
+
+  .dropdown-toggle {
+    .collapse-icon {
+      fill: var(--main-color-mode);
+
+      &.active {
+        fill: #0077b8;
+      }
+    }
+  }
+}
+
+.navbar-dropdown-menu {
+  position: fixed;
+  z-index: var(--z-dropdown);
+  transform: translateX(-100%);
+  border: 1px solid var(--global-border-color);
+  border-radius: 3px;
+  margin-top: 2px;
+  background-color: var(--global-bg-color);
+  padding: 12px 0;
+}
+.navbar-dropdown-menu-separator {
+  margin: 6px 0;
+  border-bottom: 0.8px solid #e8e8e8;
+}
+</style>