adata-ui 2.1.40-beta.17 → 2.1.40-beta.19

package/components/navigation/header/NotificationsMenu.vue

@@ -1,50 +1,50 @@
-<script lang="ts" setup>
-import iconUser from '#adata-ui/icons/user.vue'
-
-export interface Notification {
-  id: number
-  message: string
-  date: string
-  email: string
-  status: string
-}
-
-defineProps<{
-  notifications: Notification[]
-}>()
-</script>
-<template>
-  <div class="flex w-[423px] flex-col gap-4 rounded-md bg-white p-4 dark:bg-gray-900">
-    <div class="flex items-center justify-between">
-      <h4 class="heading-04">Уведомления</h4>
-      <ADigitBadge :value="`${notifications?.length} новых`" size="lg" />
-    </div>
-    <hr class="border-deepblue-900/5 dark:border-gray-200/5" />
-
-    <ul v-if="notifications?.length" class="flex flex-col gap-2">
-      <li
-        v-for="(notification, idx) in notifications"
-        :key="idx"
-        class="flex items-center justify-between gap-2.5 rounded-sm bg-gray-50 px-4 py-2 dark:bg-gray-950"
-      >
-        <div class="rounded-full bg-blue-500 p-2">
-          <icon-user />
-        </div>
-        <div class="flex flex-col items-start gap-1 break-all">
-          <p class="body-s-400">
-            {{ notification.message + ' ' }}
-            <a class="link-s-400" href="#">{{ notification.email }}</a>
-          </p>
-          <p class="text-[12px] leading-4 dark:text-gray-300">{{ notification.date }}</p>
-        </div>
-      </li>
-    </ul>
-
-    <div v-else class="flex flex-col items-center gap-4 py-8">
-      <p class="body-400">Новых уведомлений нет</p>
-    </div>
-
-    <hr class="border-deepblue-900/5 dark:border-gray-200/5" />
-    <AButton block>Посмотреть все уведомления</AButton>
-  </div>
-</template>
+<script lang="ts" setup>
+import iconUser from '#adata-ui/icons/user.vue'
+
+export interface Notification {
+  id: number
+  message: string
+  date: string
+  email: string
+  status: string
+}
+
+defineProps<{
+  notifications: Notification[]
+}>()
+</script>
+<template>
+  <div class="flex w-[423px] flex-col gap-4 rounded-md bg-white p-4 dark:bg-gray-900">
+    <div class="flex items-center justify-between">
+      <h4 class="heading-04">Уведомления</h4>
+      <ADigitBadge :value="`${notifications?.length} новых`" size="lg" />
+    </div>
+    <hr class="border-deepblue-900/5 dark:border-gray-200/5" />
+
+    <ul v-if="notifications?.length" class="flex flex-col gap-2">
+      <li
+        v-for="(notification, idx) in notifications"
+        :key="idx"
+        class="flex items-center justify-between gap-2.5 rounded-sm bg-gray-50 px-4 py-2 dark:bg-gray-950"
+      >
+        <div class="rounded-full bg-blue-500 p-2">
+          <icon-user />
+        </div>
+        <div class="flex flex-col items-start gap-1 break-all">
+          <p class="body-s-400">
+            {{ notification.message + ' ' }}
+            <a class="link-s-400" href="#">{{ notification.email }}</a>
+          </p>
+          <p class="text-[12px] leading-4 dark:text-gray-300">{{ notification.date }}</p>
+        </div>
+      </li>
+    </ul>
+
+    <div v-else class="flex flex-col items-center gap-4 py-8">
+      <p class="body-400">Новых уведомлений нет</p>
+    </div>
+
+    <hr class="border-deepblue-900/5 dark:border-gray-200/5" />
+    <AButton block>Посмотреть все уведомления</AButton>
+  </div>
+</template>

package/components/navigation/header/ProductMenu.vue

@@ -1,100 +1,100 @@
-<script setup lang="ts">
-import NavList from '#adata-ui/components/navigation/header/NavList.vue'
-import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
-import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
-import { useUrls } from '#adata-ui/composables/useUrls'
-import AIconArrowRight from '#adata-ui/icons/arrow/arrow-right.vue'
-import AIconDownloadRounded from '#adata-ui/icons/download-rounded.vue'
-import { PAGES } from '#adata-ui/shared/constans/pages'
-
-defineProps<{ url?: string }>()
-defineEmits(['outerClick', 'mouseOver'])
-
-const urls = useUrls()
-const { t, locale } = useI18n()
-const modules = useHeaderNavigationLinks()
-const { isActiveModule } = useActiveNavigation()
-
-const COLUMN_KEYS = [['edo'], ['pk'], ['compliance', 'fines'], ['tenders', 'analytics'], ['fea', 'work']]
-const catalogColumns = computed(() =>
-  COLUMN_KEYS.map(keys =>
-    keys
-      .map(key => modules.value.find(module => module.key === key))
-      .filter((module): module is NonNullable<typeof module> => module !== undefined),
-  ),
-)
-
-function handleExportClick() {
-  navigateToLocalizedPage({
-    locale: locale.value,
-    projectUrl: urls.pk,
-    path: PAGES.pk.unload,
-  })
-}
-</script>
-
-<template>
-  <div class="capitalize">
-    <div class="relative bg-white dark:bg-gray-950">
-      <div class="a-container max-h-[calc(100dvh-4rem)] overflow-y-auto overscroll-contain py-8">
-        <div class="flex justify-between gap-5">
-          <div class="grid min-w-0 flex-1 grid-cols-5 gap-3">
-            <div
-              v-for="(column, index) in catalogColumns"
-              :key="index"
-              class="flex flex-col gap-[22px]"
-              :class="index > 0 ? 'border-l border-gray-100 pl-3 dark:border-gray-800' : ''"
-            >
-              <nav-list
-                v-for="module in column"
-                :id="module.key"
-                :key="module.key"
-                :current-module="isActiveModule(module)"
-                :title="module.name"
-                :link="module.link"
-                :nav-list="module.items"
-                :to="module.to"
-                :icon="module.icon"
-                :badge="module.is_new"
-                :data-test-id="module.data_attribute"
-              >
-                <template
-                  v-if="module.key === 'edo'"
-                  #bottom
-                >
-                  <div class="mt-4 flex flex-col gap-4 rounded-lg bg-blue-700 p-4 normal-case text-white dark:bg-blue-500">
-                    <div class="flex items-center gap-3">
-                      <span class="rounded-[10px] bg-white p-[10px] dark:bg-gray-950">
-                        <a-icon-download-rounded class="size-5 text-blue-700 dark:text-blue-500" />
-                      </span>
-                      <span class="font-semibold text-white dark:text-gray-950">
-                        {{ t('header.products.exportCard.title') }}
-                      </span>
-                    </div>
-
-                    <div class="text-xs text-white dark:text-gray-950">
-                      {{ t('header.products.exportCard.subTitle') }}
-                    </div>
-
-                    <a-button-v2
-                      view="soft"
-                      class="!h-9 w-fit !bg-white text-blue-700 dark:!bg-gray-950 dark:text-blue-500"
-                      size="sm"
-                      :icon="AIconArrowRight"
-                      icon-right
-                      @click="handleExportClick"
-                    >
-                      <span class="text-sm">
-                        {{ t('header.products.exportCard.receive') }}
-                      </span>
-                    </a-button-v2>
-                  </div>
-                </template>
-              </nav-list>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import NavList from '#adata-ui/components/navigation/header/NavList.vue'
+import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
+import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
+import { useUrls } from '#adata-ui/composables/useUrls'
+import AIconArrowRight from '#adata-ui/icons/arrow/arrow-right.vue'
+import AIconDownloadRounded from '#adata-ui/icons/download-rounded.vue'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+
+defineProps<{ url?: string }>()
+defineEmits(['outerClick', 'mouseOver'])
+
+const urls = useUrls()
+const { t, locale } = useI18n()
+const modules = useHeaderNavigationLinks()
+const { isActiveModule } = useActiveNavigation()
+
+const COLUMN_KEYS = [['edo'], ['pk'], ['compliance', 'fines'], ['tenders', 'analytics'], ['fea', 'work']]
+const catalogColumns = computed(() =>
+  COLUMN_KEYS.map(keys =>
+    keys
+      .map(key => modules.value.find(module => module.key === key))
+      .filter((module): module is NonNullable<typeof module> => module !== undefined),
+  ),
+)
+
+function handleExportClick() {
+  navigateToLocalizedPage({
+    locale: locale.value,
+    projectUrl: urls.pk,
+    path: PAGES.pk.unload,
+  })
+}
+</script>
+
+<template>
+  <div class="capitalize">
+    <div class="relative bg-white dark:bg-gray-950">
+      <div class="a-container max-h-[calc(100dvh-4rem)] overflow-y-auto overscroll-contain py-8">
+        <div class="flex justify-between gap-5">
+          <div class="grid min-w-0 flex-1 grid-cols-5 gap-3">
+            <div
+              v-for="(column, index) in catalogColumns"
+              :key="index"
+              class="flex flex-col gap-[22px]"
+              :class="index > 0 ? 'border-l border-gray-100 pl-3 dark:border-gray-800' : ''"
+            >
+              <nav-list
+                v-for="module in column"
+                :id="module.key"
+                :key="module.key"
+                :current-module="isActiveModule(module)"
+                :title="module.name"
+                :link="module.link"
+                :nav-list="module.items"
+                :to="module.to"
+                :icon="module.icon"
+                :badge="module.is_new"
+                :data-test-id="module.data_attribute"
+              >
+                <template
+                  v-if="module.key === 'edo'"
+                  #bottom
+                >
+                  <div class="mt-4 flex flex-col gap-4 rounded-lg bg-blue-700 p-4 normal-case text-white dark:bg-blue-500">
+                    <div class="flex items-center gap-3">
+                      <span class="rounded-[10px] bg-white p-[10px] dark:bg-gray-950">
+                        <a-icon-download-rounded class="size-5 text-blue-700 dark:text-blue-500" />
+                      </span>
+                      <span class="font-semibold text-white dark:text-gray-950">
+                        {{ t('header.products.exportCard.title') }}
+                      </span>
+                    </div>
+
+                    <div class="text-xs text-white dark:text-gray-950">
+                      {{ t('header.products.exportCard.subTitle') }}
+                    </div>
+
+                    <a-button-v2
+                      view="soft"
+                      class="!h-9 w-fit !bg-white text-blue-700 dark:!bg-gray-950 dark:text-blue-500"
+                      size="sm"
+                      :icon="AIconArrowRight"
+                      icon-right
+                      @click="handleExportClick"
+                    >
+                      <span class="text-sm">
+                        {{ t('header.products.exportCard.receive') }}
+                      </span>
+                    </a-button-v2>
+                  </div>
+                </template>
+              </nav-list>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/navigation/header/ProfileMenu.vue

@@ -1,167 +1,167 @@
-<script setup lang="ts">
-import { useHeaderMenuLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
-import Calendar from '#adata-ui/icons/calendar.vue'
-import Gauge from '#adata-ui/icons/gauge.vue'
-import IconLogout from '#adata-ui/icons/logout.vue'
-import { useMediaQuery } from '@vueuse/core'
-
-const props = withDefaults(defineProps<Props>(), {
-  daysRemaining: 0,
-  limitRemaining: 0,
-})
-
-defineEmits(['logout'])
-
-const isLargeScreen = useMediaQuery('(min-width: 1024px)')
-
-interface Props {
-  rate: string
-  daysRemaining?: number
-  limitRemaining?: number
-  balance: number
-  email?: string
-  replenish?: string
-  oldVersion?: string
-}
-
-const formattedBalance = computed(() => props.balance.toLocaleString('ru-RU'))
-
-const { t } = useI18n()
-
-const items = useHeaderMenuLinks()
-
-const { topUpSidePanel, rateId } = usePayment()
-
-function onReplenish() {
-  rateId.value = ''
-  topUpSidePanel.value = true
-}
-</script>
-
-<template>
-  <div class="w-full overflow-hidden bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 lg:w-[320px] lg:rounded-lg lg:border lg:border-gray-200 lg:dark:border-gray-800">
-    <div class="p-2">
-      <div class="relative overflow-hidden rounded-lg bg-gradient-to-br from-blue-700/95 to-blue-500/85 p-3 text-white">
-        <div class="pointer-events-none absolute -right-8 -top-10 size-28 rounded-full bg-white/20 blur-2xl" aria-hidden="true" />
-
-        <div class="relative">
-          <p class="text-overline-medium uppercase text-white/70">
-            {{ t('header.profile.tariff') }}
-          </p>
-          <div class="mt-0.5 flex items-center justify-between gap-2">
-            <p class="truncate text-h4">
-              {{ rate }}
-            </p>
-            <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-body-sm-medium text-white ring-1 ring-inset ring-white/20">
-              <span class="relative flex size-1.5 items-center justify-center">
-                <span class="absolute inline-flex size-full animate-ping rounded-full bg-green-400/80" />
-                <span class="relative inline-flex size-1.5 rounded-full bg-green-400" />
-              </span>
-              {{ t('header.profile.connected') }}
-            </span>
-          </div>
-
-          <p
-            v-if="email"
-            class="mt-1 truncate text-body-sm text-white/75 lg:hidden"
-            data-test-id="profile-menu-email"
-          >
-            {{ email }}
-          </p>
-
-          <div class="my-2 h-px bg-white/15" />
-
-          <div class="flex items-center justify-between gap-2">
-            <span class="text-body-sm text-white/80">{{ t('header.profile.currentBalance') }}</span>
-            <span class="text-body-lg font-bold tabular-nums">{{ formattedBalance }} ₸</span>
-          </div>
-
-          <div class="mt-2 grid grid-cols-2 gap-2 lg:hidden">
-            <div class="flex items-center gap-2 rounded-md px-2 py-1.5 ring-1 ring-inset ring-white/15">
-              <gauge class="size-4 shrink-0 text-white/80" />
-              <div class="min-w-0">
-                <p class="truncate text-body-sm uppercase leading-none text-white/70">
-                  {{ t('header.profile.requests') }}
-                </p>
-                <p class="mt-1 text-body-md font-bold tabular-nums leading-none">
-                  {{ limitRemaining }}
-                </p>
-              </div>
-            </div>
-            <div class="flex items-center gap-2 rounded-md px-2 py-1.5 ring-1 ring-inset ring-white/15">
-              <calendar class="size-4 shrink-0 text-white/80" />
-              <div class="min-w-0">
-                <p class="truncate text-body-sm uppercase leading-none text-white/70">
-                  {{ t('header.profile.daysLeft') }}
-                </p>
-                <p class="mt-1 text-body-md font-bold tabular-nums leading-none">
-                  {{ daysRemaining }}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <button
-            type="button"
-            class="mt-2.5 inline-flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-full bg-white px-3 text-body-md-strong text-blue-700 shadow-sm transition-all duration-150 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-600 active:scale-[0.98]"
-            @click="onReplenish"
-          >
-            <a-icon-plus-circle class="size-4" />
-            <span class="bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent">
-              {{ t('header.profile.addBalance') }}
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <nav class="flex flex-col px-2 pb-2">
-      <nuxt-link-locale
-        v-for="item in items"
-        :key="item.title"
-        class="group flex items-center gap-3 rounded-md px-2.5 py-2 text-body-md transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60"
-        :to="item.to"
-        :data-test-id="item?.dataTestId"
-        target="_blank"
-      >
-        <!--        <span -->
-        <!--          class="flex size-8 shrink-0 items-center justify-center rounded-md border border-blue-100 bg-blue-50 text-blue-700 dark:border-blue-900/40 dark:bg-blue-900/30 dark:text-blue-400" -->
-        <!--        > -->
-        <!--          <component -->
-        <!--            :is="item.icon" -->
-        <!--            class="size-4" -->
-        <!--          /> -->
-        <!--        </span> -->
-        <span class="truncate text-deepblue-900 group-hover:text-blue-700 dark:text-gray-200 dark:group-hover:text-blue-400">
-          {{ item.title }}
-        </span>
-      </nuxt-link-locale>
-    </nav>
-
-    <div class="border-t border-gray-100 p-2 dark:border-gray-800">
-      <a-change-version
-        v-if="oldVersion"
-        :url="oldVersion"
-        class="mb-2"
-      />
-
-      <div
-        v-if="!isLargeScreen"
-        class="flex items-center justify-between rounded-md px-2.5 py-2 text-body-md text-deepblue-900 dark:text-gray-200"
-      >
-        <span>{{ t('header.profile.colorScheme') }}</span>
-        <a-color-mode />
-      </div>
-
-      <button
-        type="button"
-        class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2.5 py-2 text-body-md-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
-        data-test-id="logout-button"
-        @click="$emit('logout')"
-      >
-        <icon-logout class="size-4 shrink-0" />
-        <span>{{ t('header.profile.logout') }}</span>
-      </button>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { useHeaderMenuLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
+import Calendar from '#adata-ui/icons/calendar.vue'
+import Gauge from '#adata-ui/icons/gauge.vue'
+import IconLogout from '#adata-ui/icons/logout.vue'
+import { useMediaQuery } from '@vueuse/core'
+
+const props = withDefaults(defineProps<Props>(), {
+  daysRemaining: 0,
+  limitRemaining: 0,
+})
+
+defineEmits(['logout'])
+
+const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+
+interface Props {
+  rate: string
+  daysRemaining?: number
+  limitRemaining?: number
+  balance: number
+  email?: string
+  replenish?: string
+  oldVersion?: string
+}
+
+const formattedBalance = computed(() => props.balance.toLocaleString('ru-RU'))
+
+const { t } = useI18n()
+
+const items = useHeaderMenuLinks()
+
+const { topUpSidePanel, rateId } = usePayment()
+
+function onReplenish() {
+  rateId.value = ''
+  topUpSidePanel.value = true
+}
+</script>
+
+<template>
+  <div class="w-full overflow-hidden bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 lg:w-[320px] lg:rounded-lg lg:border lg:border-gray-200 lg:dark:border-gray-800">
+    <div class="p-2">
+      <div class="relative overflow-hidden rounded-lg bg-gradient-to-br from-blue-700/95 to-blue-500/85 p-3 text-white">
+        <div class="pointer-events-none absolute -right-8 -top-10 size-28 rounded-full bg-white/20 blur-2xl" aria-hidden="true" />
+
+        <div class="relative">
+          <p class="text-overline-medium uppercase text-white/70">
+            {{ t('header.profile.tariff') }}
+          </p>
+          <div class="mt-0.5 flex items-center justify-between gap-2">
+            <p class="truncate text-h4">
+              {{ rate }}
+            </p>
+            <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-body-sm-medium text-white ring-1 ring-inset ring-white/20">
+              <span class="relative flex size-1.5 items-center justify-center">
+                <span class="absolute inline-flex size-full animate-ping rounded-full bg-green-400/80" />
+                <span class="relative inline-flex size-1.5 rounded-full bg-green-400" />
+              </span>
+              {{ t('header.profile.connected') }}
+            </span>
+          </div>
+
+          <p
+            v-if="email"
+            class="mt-1 truncate text-body-sm text-white/75 lg:hidden"
+            data-test-id="profile-menu-email"
+          >
+            {{ email }}
+          </p>
+
+          <div class="my-2 h-px bg-white/15" />
+
+          <div class="flex items-center justify-between gap-2">
+            <span class="text-body-sm text-white/80">{{ t('header.profile.currentBalance') }}</span>
+            <span class="text-body-lg font-bold tabular-nums">{{ formattedBalance }} ₸</span>
+          </div>
+
+          <div class="mt-2 grid grid-cols-2 gap-2 lg:hidden">
+            <div class="flex items-center gap-2 rounded-md px-2 py-1.5 ring-1 ring-inset ring-white/15">
+              <gauge class="size-4 shrink-0 text-white/80" />
+              <div class="min-w-0">
+                <p class="truncate text-body-sm uppercase leading-none text-white/70">
+                  {{ t('header.profile.requests') }}
+                </p>
+                <p class="mt-1 text-body-md font-bold tabular-nums leading-none">
+                  {{ limitRemaining }}
+                </p>
+              </div>
+            </div>
+            <div class="flex items-center gap-2 rounded-md px-2 py-1.5 ring-1 ring-inset ring-white/15">
+              <calendar class="size-4 shrink-0 text-white/80" />
+              <div class="min-w-0">
+                <p class="truncate text-body-sm uppercase leading-none text-white/70">
+                  {{ t('header.profile.daysLeft') }}
+                </p>
+                <p class="mt-1 text-body-md font-bold tabular-nums leading-none">
+                  {{ daysRemaining }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <button
+            type="button"
+            class="mt-2.5 inline-flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-full bg-white px-3 text-body-md-strong text-blue-700 shadow-sm transition-all duration-150 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-600 active:scale-[0.98]"
+            @click="onReplenish"
+          >
+            <a-icon-plus-circle class="size-4" />
+            <span class="bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent">
+              {{ t('header.profile.addBalance') }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <nav class="flex flex-col px-2 pb-2">
+      <nuxt-link-locale
+        v-for="item in items"
+        :key="item.title"
+        class="group flex items-center gap-3 rounded-md px-2.5 py-2 text-body-md transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60"
+        :to="item.to"
+        :data-test-id="item?.dataTestId"
+        target="_blank"
+      >
+        <!--        <span -->
+        <!--          class="flex size-8 shrink-0 items-center justify-center rounded-md border border-blue-100 bg-blue-50 text-blue-700 dark:border-blue-900/40 dark:bg-blue-900/30 dark:text-blue-400" -->
+        <!--        > -->
+        <!--          <component -->
+        <!--            :is="item.icon" -->
+        <!--            class="size-4" -->
+        <!--          /> -->
+        <!--        </span> -->
+        <span class="truncate text-deepblue-900 group-hover:text-blue-700 dark:text-gray-200 dark:group-hover:text-blue-400">
+          {{ item.title }}
+        </span>
+      </nuxt-link-locale>
+    </nav>
+
+    <div class="border-t border-gray-100 p-2 dark:border-gray-800">
+      <a-change-version
+        v-if="oldVersion"
+        :url="oldVersion"
+        class="mb-2"
+      />
+
+      <div
+        v-if="!isLargeScreen"
+        class="flex items-center justify-between rounded-md px-2.5 py-2 text-body-md text-deepblue-900 dark:text-gray-200"
+      >
+        <span>{{ t('header.profile.colorScheme') }}</span>
+        <a-color-mode />
+      </div>
+
+      <button
+        type="button"
+        class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2.5 py-2 text-body-md-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+        data-test-id="logout-button"
+        @click="$emit('logout')"
+      >
+        <icon-logout class="size-4 shrink-0" />
+        <span>{{ t('header.profile.logout') }}</span>
+      </button>
+    </div>
+  </div>
+</template>