bfg-common 1.5.557 → 1.5.559

package/assets/localization/local_be.json

@@ -295,6 +295,8 @@
     "connectTo": "Падключыцца да",
     "consolePanel": "Кансольная панэль",
     "consolidate": "Кансалідаваць",
+    "consolidateConfirmation": "Пацверджанне аб’яднання",
+    "consolidateConfirmationDesc": "Вы ўпэўнены, што хочаце аб’яднаць усе лішнія журналы redo на вашай віртуальнай машыне?",
     "consumedCpu": "Спажыты працэсар",
     "consumedMemory": "Спажытая памяць",
     "containerVolumes": "Аб'ёмы кантэйнераў",
@@ -2497,7 +2499,10 @@
     "selectValidHostDestinationComputeResource": "Выберыце сапраўдны хост як мэтавы вылічальны рэсурс.",
     "generalSettings": "Агульныя налады",
     "configureBackupStrategyAndBandwidth": "Канфігурацыя старатэгіі і прывядкі",
-    "editTheNotesFor": "Рэдагаваць нататкі для "
+    "editTheNotesFor": "Рэдагаваць нататкі для ",
+    "vmRemoveConfirmationFromInventoryDesc": "Вы ўпэўнены, што хочаце выдаліць віртуальную машыну “{0}” з інвентарызацыі?",
+    "toConfirmTypeFieldBelow": "Каб пацвердзіць, увядзіце «{0}» у поле ніжэй.",
+    "vmRemoveConfirmationFromDiskDesc": "Вы ўпэўнены, што хочаце выдаліць віртуальную машыну «{0}» і яе звязаныя дыскі? Калі іншыя віртуальныя машыны выкарыстоўваюць агульныя дыскі, гэтыя дыскі не будуць выдалены, і ВМ захаваюць да іх доступ."
   },
   "auth": {
     "welcomeTo": "Сардэчна запрашаем у",

package/assets/localization/local_en.json

@@ -294,6 +294,8 @@
     "connectTo": "Connect to",
     "consolePanel": "Console Panel",
     "consolidate": "Consolidate",
+    "consolidateConfirmation": "Consolidate Confirmation",
+    "consolidateConfirmationDesc": "Are you sure you want to consolidate all redundant redo logs on your virtual machine?",
     "consumedCpu": "Consumed CPU",
     "consumedMemory": "Consumed Memory",
     "containerVolumes": "Container Volumes",
@@ -2501,7 +2503,10 @@
     "selectValidHostDestinationComputeResource": "Select a valid host as destination compute resource.",
     "generalSettings": "General Settings",
     "configureBackupStrategyAndBandwidth": "Configure backup strategy and bandwidth limits.",
-    "editTheNotesFor": "Edit the notes for "
+    "editTheNotesFor": "Edit the notes for ",
+    "vmRemoveConfirmationFromInventoryDesc": "Are you sure you want to remove the virtual machine “{0}” from inventory?",
+    "toConfirmTypeFieldBelow": "To confirm, type “{0}” in the field below.",
+    "vmRemoveConfirmationFromDiskDesc": "Are you sure you want to delete the virtual machine “{0}” and its associated disks? If other virtual machines are sharing their disks, the shared disks will not be deleted, and the VMs will continue to have access to them."
   },
   "auth": {
     "welcomeTo": "Welcome to",

package/assets/localization/local_hy.json

@@ -294,6 +294,8 @@
     "connectTo": "Միացեք",
     "consolePanel": "Վահանակի վահանակ",
     "consolidate": "Համախմբել",
+    "consolidateConfirmation": "Հաստատել միավորումը",
+    "consolidateConfirmationDesc": "Վստահ եք, որ ցանկանում եք միավորել ձեր վիրտուալ մեքենայի բոլոր ավելորդ redo մատյանները՞։",
     "consumedCpu": "Սպառված պրոցեսոր",
     "consumedMemory": "Սպառված հիշողություն",
     "containerVolumes": "Կոնտեյների ծավալներ",
@@ -2501,7 +2503,10 @@
     "selectValidHostDestinationComputeResource": "Ընտրեք վավեր հոստ՝ որպես նպատակային հաշվարկային ռեսուրս։",
     "generalSettings": "Ընդհանուր պարամետրեր",
     "configureBackupStrategyAndBandwidth": "Կարգավորել պահուստավորման ռազմավարությունը և թողունակության սահմանաչափերը։",
-    "editTheNotesFor": "Խմբագրել գրառումները "
+    "editTheNotesFor": "Խմբագրել գրառումները ",
+    "vmRemoveConfirmationFromInventoryDesc": "Վստահ եք, որ ցանկանում եք հեռացնել «{0}» վիրտուալ մեքենան հաշվառմանից՞։",
+    "toConfirmTypeFieldBelow": "Հաստատելու համար մուտքագրեք «{0}» ստորև bulunan դաշտում։",
+    "vmRemoveConfirmationFromDiskDesc": "Վստահ եք, որ ցանկանում եք ջնջել «{0}» վիրտուալ մեքենան և դրա հետ կապված սկավառակները՞։ Եթե այլ վիրտուալ մեքենաներ կիսում են իրենց սկավառակները, այդ ընդհանուր սկավառակները չեն ջնջվի, և ՎՄ-ները կշարունակեն մուտք ունենալ դրանց։"
   },
   "auth": {
     "welcomeTo": "Բարի գալուստ",

package/assets/localization/local_kk.json

@@ -294,6 +294,8 @@
     "connectTo": "Қосылу",
     "consolePanel": "Консоль тақтасы",
     "consolidate": "Бас тарту",
+    "consolidateConfirmation": "Біріктіруді растау",
+    "consolidateConfirmationDesc": "Виртуалды машинаңыздағы барлық артық redo журналдарын біріктіргіңіз келетініне сенімдісіз бе?",
     "consumedCpu": "Ұжымдық процессор",
     "consumedMemory": "Жоғалған естелік",
     "containerVolumes": "Контейнер көлемдері",
@@ -2500,7 +2502,10 @@
     "selectValidHostDestinationComputeResource": "Мақсатты есептеу ресурсы ретінде жарамды хостты таңдаңыз.",
     "generalSettings": "Жалпы Параметрлер",
     "configureBackupStrategyAndBandwidth": "Сақтық көшірме жасау стратегиясы мен өткізу қабілеттілігі шектеулерін конфигурациялаңыз.",
-    "editTheNotesFor": "Үшін жазбаларды өңдеңіз "
+    "editTheNotesFor": "Үшін жазбаларды өңдеңіз ",
+    "vmRemoveConfirmationFromInventoryDesc": "«{0}» виртуалды машинасын тізімнен жойғыңыз келетініне сенімдісіз бе?",
+    "toConfirmTypeFieldBelow": "Растау үшін төмендегі өріске «{0}» теріңіз.",
+    "vmRemoveConfirmationFromDiskDesc": "«{0}» виртуалды машинасын және оған байланысты дисктерді жойғыңыз келетініне сенімдісіз бе? Егер басқа виртуалды машиналар сол дисктерді ортақ пайдаланса, ортақ дисктер жойылмайды және ВМ-дар оларға қол жеткізуді жалғастырады."
   },
   "auth": {
     "welcomeTo": "Қош келдіңіз",

package/assets/localization/local_ru.json

@@ -294,6 +294,8 @@
     "connectTo": "Подключиться к",
     "consolePanel": "Консольная панель",
     "consolidate": "Консолидировать",
+    "consolidateConfirmation": "Подтверждение консолидации",
+    "consolidateConfirmationDesc": "Вы уверены, что хотите выполнить консолидацию всех избыточных журналов изменений на этой виртуальной машине?",
     "consumedCpu": "Потребляемый ЦП",
     "consumedMemory": "Потребляемая память",
     "containerVolumes": "Объемы контейнеров",
@@ -2500,7 +2502,10 @@
     "selectValidHostDestinationComputeResource": "Выберите допустимый хост в качестве целевого вычислительного ресурса.",
     "generalSettings": "Общие настройки",
     "configureBackupStrategyAndBandwidth": "Настройте стратегию резервного копирования и ограничения пропускной способности.",
-    "editTheNotesFor": "Редактирование заметки для "
+    "editTheNotesFor": "Редактирование заметки для ",
+    "vmRemoveConfirmationFromInventoryDesc": "Вы уверены, что хотите удалить виртуальную машину “{0}” из инвентаря?",
+    "toConfirmTypeFieldBelow": "Для подтверждения введите “{0}” в поле ниже.",
+    "vmRemoveConfirmationFromDiskDesc": "Вы уверены, что хотите удалить виртуальную машину “{0}” и все связанные с ней диски? Если другие виртуальные машины используют общие диски, эти диски не будут удалены, и виртуальные машины продолжат иметь к ним доступ."
   },
   "auth": {
     "welcomeTo": "Добро пожаловать в",

package/assets/localization/local_zh.json

@@ -294,6 +294,8 @@
     "connectTo": "连接到",
     "consolePanel": "控制台面板",
     "consolidate": "巩固",
+    "consolidateConfirmation": "合并确认",
+    "consolidateConfirmationDesc": "您确定要合并虚拟机上的所有冗余重做日志吗？",
     "consumedCpu": "消耗的CPU",
     "consumedMemory": "消耗内存",
     "containerVolumes": "容器卷",
@@ -2498,7 +2500,10 @@
     "selectValidHostDestinationComputeResource": "请选择一个有效的主机作为目标计算资源。",
     "generalSettings": "常规设置",
     "configureBackupStrategyAndBandwidth": "配置备份策略和带宽限制。",
-    "editTheNotesFor": "编辑笔记 "
+    "editTheNotesFor": "编辑笔记 ",
+    "vmRemoveConfirmationFromInventoryDesc": "您确定要从清单中移除虚拟机“{0}”吗？",
+    "toConfirmTypeFieldBelow": "若要确认，请在下方输入“{0}”。",
+    "vmRemoveConfirmationFromDiskDesc": "您确定要删除虚拟机“{0}”及其关联的磁盘吗？如果其他虚拟机共享这些磁盘，共享磁盘将不会被删除，这些虚拟机仍可访问它们。"
   },
   "auth": {
     "welcomeTo": "欢迎来到",

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>