adata-ui 2.1.41-beta.23 → 2.1.41-beta.24

package/components/navigation/footer/AFooter.vue

@@ -21,31 +21,37 @@ const socialMedia = [
     icon: LinkedinIcon,
     link: 'https://www.linkedin.com/company/adata-kz/?viewAsMember=true',
     name: 'Linkedin',
+    dataTestId: 'footer-linkedin-link',
   },
   {
     icon: YouTubeIcon,
     link: 'https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured',
     name: 'YouTube',
+    dataTestId: 'footer-youtube-link',
   },
   {
     icon: InstagramIcon,
     link: 'https://www.instagram.com/adata.kz/?igshid=253i4qxg3els',
     name: 'Instagram',
+    dataTestId: 'footer-instagram-link',
   },
   {
     icon: TelegramIcon,
     link: 'https://t.me/adatakz_official',
     name: 'Telegram',
+    dataTestId: 'footer-telegram-link',
   },
   {
     icon: FaceBookIcon,
     link: 'https://www.facebook.com/adata.kz',
     name: 'Facebook',
+    dataTestId: 'footer-facebook-link',
   },
   {
     icon: TikTokIcon,
     link: 'https://www.tiktok.com/@adata.kz?lang=ru-RU',
     name: 'Tiktok',
+    dataTestId: 'footer-tiktok-link',
   },
 ]
 
@@ -53,28 +59,34 @@ const mainLinks = computed(() => ({
   services: {
     title: t('footer.productsAndSolutions'),
     link: buildLocalizedUrl(locale.value, urls.landing, PAGES.allServices),
+    dataTestId: 'footer-products-solutions-link',
     items: [
       [
         {
           title: t('footer.counterparties.title'),
           link: buildLocalizedUrl(locale.value, urls.pk, ''),
+          dataTestId: 'footer-counterparties-link',
         },
         {
           title: t('footer.fines.title'),
-          link: buildLocalizedUrl(locale.value, urls.avto, PAGES.fines.main),
+          link: buildLocalizedUrl(locale.value, urls.avto, PAGES.fines.fines),
+          dataTestId: 'footer-fines-link',
         },
         {
           title: t('footer.work.title'),
           link: urls.work + PAGES.work.vacancy,
+          dataTestId: 'footer-work-link',
         },
         {
           title: t('footer.analytics.title'),
           link: buildLocalizedUrl(locale.value, urls.analytics, PAGES.analytics.main),
+          dataTestId: 'footer-analytics-link',
         },
         {
           title: t('footer.zakupki.title'),
           link: urls.zakupki + PAGES.tender.main,
           isNew: true,
+          dataTestId: 'footer-purchases-link',
         },
       ],
       [
@@ -82,16 +94,19 @@ const mainLinks = computed(() => ({
           title: t('footer.compliance.title'),
           link: buildLocalizedUrl(locale.value, urls.compliance, PAGES.compliance.l),
           isNew: true,
+          dataTestId: 'footer-compliance-link',
         },
         {
           title: t('header.products.edo.label'),
           link: urls.edo_docs,
           isNew: true,
+          dataTestId: 'footer-edo-link',
         },
         {
           title: t('footer.fea.title'),
           link: buildLocalizedUrl(locale.value, urls.tnved, PAGES.fea.main),
           isNew: true,
+          dataTestId: 'footer-tnved-link',
         },
       ],
     ],
@@ -99,31 +114,38 @@ const mainLinks = computed(() => ({
   useful: {
     title: t('footer.useful'),
     link: buildLocalizedUrl(locale.value, urls.landing, PAGES.usefulMain),
+    dataTestId: 'footer-useful-link',
     items: [
       [
         {
           title: t('footer.info.api'),
           link: buildLocalizedUrl(locale.value, urls.landing, PAGES.apiDescription),
+          dataTestId: 'footer-api-description-link',
         },
         {
           title: t('footer.info.userAgreement'),
           link: buildLocalizedUrl(locale.value, urls.landing, PAGES.userAgreement),
+          dataTestId: 'footer-user-agreement-link',
         },
         {
           title: t('footer.info.privacyPolicy'),
           link: buildLocalizedUrl(locale.value, urls.landing, PAGES.privacy),
+          dataTestId: 'footer-privacy-policy-link',
         },
         {
           title: t('footer.info.vacancy'),
           link: buildLocalizedUrl(locale.value, urls.landing, PAGES.vacancy),
+          dataTestId: 'footer-vacancies-link',
         },
         {
           title: t('footer.info.counterparty'),
           link: buildLocalizedUrl(locale.value, urls.pk, PAGES.pk.counterparty),
+          dataTestId: 'footer-company-catalog-link',
         },
         {
           title: t('footer.info.onlineServices'),
           link: buildLocalizedUrl(locale.value, urls.pk, `${PAGES.services}/taxpayer`),
+          dataTestId: 'footer-online-services-link',
         },
       ],
     ],
@@ -133,24 +155,28 @@ const mainLinks = computed(() => ({
 const contactLinks = computed(() => ({
   title: t('footer.contacts.title'),
   link: buildLocalizedUrl(locale.value, urls.landing, PAGES.contacts),
+  dataTestId: 'footer-contacts-link',
   items: [
     {
       title: t('footer.contacts.address'),
       link: 'https://go.2gis.com/30j2f',
       startIcon: AIconLocation,
       endIcon: null,
+      dataTestId: 'footer-address-link',
     },
     {
       title: '+7 (747) 120 34 67',
       link: 'tel:+77471203467',
       startIcon: AIconPhone,
       endIcon: null,
+      dataTestId: 'footer-phone-link',
     },
     {
       title: 'info@adata.kz',
       link: 'mailto:info@adata.kz',
       startIcon: AIconMail,
       endIcon: null,
+      dataTestId: 'footer-email-link',
     },
     {
       title: t('footer.contacts.goToChat'),
@@ -158,6 +184,7 @@ const contactLinks = computed(() => ({
       startIcon: null,
       endIcon: AIconExpandWindow,
       class: 'font-bold',
+      dataTestId: 'footer-support-chat-link',
     },
   ],
 }))
@@ -166,6 +193,7 @@ const contactLinks = computed(() => ({
 <template>
   <footer
     id="footer"
+    data-test-id="footer-container"
     class="rounded-t-[32px] bg-secondary-500 py-4 lg:py-5 dark:bg-black"
   >
     <div class="a-container mobile-padding flex flex-col justify-between gap-8 py-5 text-white lg:flex-row">
@@ -188,6 +216,7 @@ const contactLinks = computed(() => ({
               target="_blank"
               :to="social.link"
               :aria-label="social.name"
+              :data-test-id="social.dataTestId"
             >
               <span class="visually-hidden"> {{ social.name }}</span>
               <component
@@ -215,6 +244,7 @@ const contactLinks = computed(() => ({
               :label="item.title"
               :link="item?.link?.replace(/\/$/, '')"
               :content="item.items"
+              :data-test-id="item.dataTestId"
             />
           </div>
         </div>
@@ -223,6 +253,7 @@ const contactLinks = computed(() => ({
           <nuxt-link
             class="cursor-pointer border-b-[0.5px] border-current pr-4 pb-3 text-body-md-strong"
             :to="contactLinks.link?.replace(/\/$/, '')"
+            :data-test-id="contactLinks.dataTestId"
           >
             {{ contactLinks.title }}
           </nuxt-link>
@@ -237,6 +268,7 @@ const contactLinks = computed(() => ({
                 class="flex cursor-pointer items-center gap-2 text-body-sm-medium"
                 :class="link.class"
                 :to="link.link?.replace(/\/$/, '')"
+                :data-test-id="link.dataTestId"
               >
                 <component
                   :is="link.startIcon"
@@ -265,6 +297,7 @@ const contactLinks = computed(() => ({
           target="_blank"
           :to="social.link"
           :aria-label="social.name"
+          :data-test-id="social.dataTestId"
         >
           <component
             :is="social.icon"

package/components/navigation/header/AAppHeader.vue

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import type { ProjectKeys } from '#adata-ui/components/navigation/header/types'
+import HeaderAccount from '#adata-ui/components/navigation/header/HeaderAccount.vue'
+import { useCurrentModule } from '#adata-ui/composables/projectState'
+import DoubleChevronRight from '#adata-ui/icons/chevron/double-chevron-right.vue'
+import Logo from '#adata-ui/icons/logo.vue'
+import { twMerge } from '#adata-ui/utils/twMerge'
+import { useElementBounding } from '@vueuse/core'
+import HeaderLink from './HeaderLink.vue'
+
+/**
+ * Шапка оболочки с боковым меню: ВЭД `layouts/app.vue`, Комплаенс
+ * `pages/main.vue`.
+ *
+ * Отдельный компонент, а не режим `a-header`: с шапкой лендинга у неё общая
+ * только правая группа (`header-account`), которая и вынесена. Левые зоны
+ * разные целиком — здесь кнопка сворачивания сайдбара, там логотип с мега-меню
+ * и поиском; пропы и события тоже не пересекаются.
+ *
+ * Системного баннера (`system-notification`) здесь нет намеренно: это баннер
+ * публичных страниц, за оболочкой он никогда не показывался. Понадобится —
+ * ставится потребителем над шапкой.
+ *
+ * Проектные различия — слотами: `actions` (иконки перед профилем — настройки,
+ * уведомления Комплаенса) и `profile-menu` (своё меню).
+ */
+defineOptions({ name: 'AAppHeader' })
+
+const props = withDefaults(defineProps<Props>(), {
+  limitRemaining: 0,
+  daysRemaining: 0,
+  maxLimit: 0,
+  balance: 0,
+  rate: 'Базовый',
+  module: 'pk',
+  collapsed: false,
+  peeking: false,
+  mobileLogo: false,
+  showDays: true,
+  showProfileOnMobile: false,
+  headerClass: undefined,
+})
+
+/* `toggleCollapsed` в camelCase по правилу eslint; в шаблонах потребителей —
+   `@toggle-collapsed`, Vue нормализует. */
+const emit = defineEmits(['logout', 'toggleCollapsed'])
+
+defineSlots<{
+  /** Иконки-действия между переключателями и меню профиля (настройки, уведомления). */
+  'actions'?: () => any
+  /** Своё содержимое дропдауна профиля. `close` закрывает дропдаун. */
+  'profile-menu'?: (props: { close: () => void }) => any
+}>()
+
+interface Props {
+  email: string | undefined
+  isAuthenticated: boolean
+  rate?: string
+  replenish?: string
+  daysRemaining?: number
+  limitRemaining?: number
+  maxLimit?: number
+  balance?: number
+  module?: ProjectKeys
+  oldVersion?: string
+  /** Состояние бокового меню: свёрнуто ли. */
+  collapsed?: boolean
+  /** Свёрнутое меню выехало поверх контента — кнопка означает «закрепить». */
+  peeking?: boolean
+  /** Компактный знак логотипа ниже `lg` — когда сайдбара на телефоне нет. */
+  mobileLogo?: boolean
+  /** Блок «остаток дней» в счётчике лимита. */
+  showDays?: boolean
+  /** Кнопка профиля ниже `lg`. По умолчанию скрыта: профиль живёт в нижней панели. */
+  showProfileOnMobile?: boolean
+  /**
+   * Классы поверх `<header>`, мержатся через twMerge. Высота задана по
+   * брейкпоинтам (`h-[62px] lg:h-[66px]`), поэтому свою задавать тоже с
+   * брейкпоинтом: `header-class="h-18 lg:h-18"`.
+   */
+  headerClass?: string
+}
+
+const { t } = useI18n()
+
+useCurrentModule().value = props.module
+
+const headerRef = ref<HTMLElement | null>(null)
+const { bottom: headerBottom } = useElementBounding(headerRef)
+
+/* На телефоне шапка оболочки ниже: 62px против 66 — четыре пикселя заметны,
+   когда весь экран 812. На широком экране 66 — с ней совпадает строка логотипа
+   бокового меню, и линия под ними идёт одной. */
+const headerClasses = computed(() => twMerge(
+  'relative h-[62px] shrink-0 border-b border-default bg-main/10 backdrop-blur-lg backdrop-saturate-140 lg:h-[66px]',
+  props.headerClass,
+))
+
+/*
+  Подпись кнопки сворачивания. Пока меню выехало поверх контента, оно всё ещё
+  считается свёрнутым, поэтому кнопка означает «закрепить», а не «развернуть».
+*/
+const collapseLabel = computed(() => {
+  if (!props.collapsed) return t('header.shell.collapse')
+  return props.peeking ? t('header.shell.pin') : t('header.shell.expand')
+})
+</script>
+
+<template>
+  <header
+    ref="headerRef"
+    :class="headerClasses"
+    data-variant="app"
+  >
+    <div class="flex size-full items-center justify-between gap-2 px-3 sm:px-4">
+      <nav class="flex min-w-0 grow items-center gap-2">
+        <!-- Ниже lg бокового меню может не быть — тогда логотип переезжает в
+             шапку знаком, чтобы не пропасть совсем. Полное начертание съедало
+             бы треть строки, а место нужно кнопкам. -->
+        <nuxt-link-locale
+          v-if="mobileLogo"
+          to="/"
+          data-test-id="header-logo-compact"
+          :title="t('header.shell.home')"
+          :aria-label="t('header.shell.home')"
+          class="mr-1 flex shrink-0 items-center text-primary transition-opacity hover:opacity-80 lg:hidden"
+        >
+          <logo />
+        </nuxt-link-locale>
+
+        <!-- Кнопка сворачивания живёт в шапке, а не в самом меню: она не должна
+             уезжать вместе с панелью, которой управляет. Ниже lg панели нет —
+             и кнопки тоже. -->
+        <button
+          type="button"
+          data-test-id="collapse-toggle"
+          :aria-label="collapseLabel"
+          :aria-expanded="!collapsed"
+          :title="collapseLabel"
+          class="hidden size-9 shrink-0 cursor-pointer items-center justify-center rounded-md text-icon-default transition-colors hover:bg-action-secondary-hover hover:text-icon-strong lg:flex"
+          @click="emit('toggleCollapsed')"
+        >
+          <!-- Двойной шеврон смотрит в сторону, куда уедет панель. -->
+          <double-chevron-right
+            class="size-5 transition-transform"
+            :class="{ 'rotate-180': !collapsed }"
+          />
+        </button>
+
+        <!-- Верхняя навигация — только с xl: на планшете ей не хватает места
+             рядом со счётчиками. -->
+        <div class="hidden xl:block">
+          <header-link :menu-top="headerBottom || 66" />
+        </div>
+      </nav>
+
+      <header-account
+        divider
+        :is-authenticated="isAuthenticated"
+        :email="email"
+        :rate="rate"
+        :replenish="replenish"
+        :balance="balance"
+        :days-remaining="daysRemaining"
+        :limit-remaining="limitRemaining"
+        :max-limit="maxLimit"
+        :show-days="showDays"
+        :show-profile-on-mobile="showProfileOnMobile"
+        :old-version="oldVersion"
+        @logout="emit('logout')"
+      >
+        <template #actions>
+          <slot name="actions" />
+        </template>
+        <template
+          v-if="$slots['profile-menu']"
+          #profile-menu="{ close }"
+        >
+          <slot
+            name="profile-menu"
+            :close="close"
+          />
+        </template>
+      </header-account>
+    </div>
+  </header>
+</template>

package/components/navigation/header/HeaderAccount.vue

@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import AColorMode from '#adata-ui/components/features/color-mode/AColorMode.client.vue'
+import ADropdownV2 from '#adata-ui/components/features/dropdown/ADropdownV2.vue'
+import LangSwitcher from '#adata-ui/components/features/lang-switcher/lang-switcher.vue'
+import AChangeVersion from '#adata-ui/components/features/сhange-version/AChangeVersion.vue'
+import HeaderUsage from '#adata-ui/components/navigation/header/HeaderUsage.vue'
+import ProfileMenu from '#adata-ui/components/navigation/header/ProfileMenu.vue'
+
+/**
+ * Правая группа шапки: счётчики тарифа, переключатели темы и языка, действия
+ * проекта и меню профиля.
+ *
+ * Отдельный компонент, потому что это единственное, что у шапки лендинга
+ * (`a-header`) и шапки оболочки (`a-app-header`) совпадает — и одновременно
+ * самое живое место: тарифы, лимиты, авторизация. Левые зоны у них общего не
+ * имеют вовсе, поэтому делить шапку флагом `variant` смысла не было.
+ */
+defineOptions({ name: 'HeaderAccount' })
+
+withDefaults(defineProps<Props>(), {
+  limitRemaining: 0,
+  daysRemaining: 0,
+  maxLimit: 0,
+  balance: 0,
+  rate: 'Базовый',
+  showDays: true,
+  showLang: true,
+  showLogIn: false,
+  showProfileOnMobile: false,
+  divider: false,
+})
+
+const emit = defineEmits(['logout', 'login'])
+
+defineSlots<{
+  /** Иконки-действия между переключателями и меню профиля (настройки, уведомления). */
+  'actions'?: () => any
+  /** Своё содержимое дропдауна профиля. `close` закрывает дропдаун. */
+  'profile-menu'?: (props: { close: () => void }) => any
+}>()
+
+interface Props {
+  isAuthenticated: boolean
+  email: string | undefined
+  rate?: string
+  replenish?: string
+  daysRemaining?: number
+  limitRemaining?: number
+  maxLimit?: number
+  balance?: number
+  /** Блок «остаток дней» в счётчике лимита. */
+  showDays?: boolean
+  /** Переключатель языка. */
+  showLang?: boolean
+  /** Кнопка входа в конце группы — там, где страницы открыты неавторизованным. */
+  showLogIn?: boolean
+  /** Кнопка профиля ниже `lg`. По умолчанию скрыта: профиль живёт в нижней панели. */
+  showProfileOnMobile?: boolean
+  /** Вертикальная черта между счётчиками и переключателями. */
+  divider?: boolean
+  /** Ссылка на старую версию проекта — кнопка `a-change-version`. */
+  oldVersion?: string
+}
+</script>
+
+<template>
+  <!-- Адаптив — классами на элементах, а не двумя копиями группы: слот
+       `actions` должен монтироваться один раз (в нём у потребителей живёт
+       polling уведомлений). -->
+  <div class="flex shrink-0 items-center gap-1 text-primary lg:gap-4">
+    <template v-if="isAuthenticated">
+      <div class="hidden md:flex">
+        <header-usage
+          :limit-remaining="limitRemaining"
+          :max-limit="maxLimit"
+          :days-remaining="daysRemaining"
+          :show-days="showDays"
+        />
+      </div>
+      <!-- Разделитель отделяет счётчики от переключателей: без него ряд
+           читается одной длинной строкой. -->
+      <span
+        v-if="divider"
+        class="hidden h-4 w-px shrink-0 bg-(--border-color-default) md:block"
+        aria-hidden="true"
+      />
+    </template>
+
+    <div class="flex items-center gap-1 lg:gap-2">
+      <!-- Обёртка, а не класс на компоненте: у его корня свой `flex`,
+           и `hidden` с ним конфликтовал бы по порядку в CSS. -->
+      <div
+        v-if="oldVersion"
+        class="hidden lg:block"
+      >
+        <a-change-version :url="oldVersion" />
+      </div>
+      <a-color-mode />
+      <template v-if="showLang">
+        <lang-switcher
+          class="lg:hidden"
+          is-mobile
+        />
+        <lang-switcher class="hidden lg:block" />
+      </template>
+    </div>
+
+    <slot name="actions" />
+
+    <a-dropdown-v2
+      v-show="isAuthenticated"
+      placement="bottom-end"
+    >
+      <template #default="{ toggle, isOpen }">
+        <button
+          type="button"
+          class="h-8 cursor-pointer items-center gap-1.5 rounded-full px-3 text-body-md-medium transition-colors duration-150 hover:bg-action-secondary-hover focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:ring-offset-1 focus-visible:outline-hidden"
+          :class="[
+            showProfileOnMobile ? 'inline-flex' : 'hidden lg:inline-flex',
+            isOpen ? 'bg-action-secondary-hover text-primary' : 'text-primary',
+          ]"
+          data-test-id="header-email-text"
+          aria-haspopup="menu"
+          :aria-expanded="isOpen"
+          :aria-label="email"
+          @click.stop="toggle"
+        >
+          <span class="max-w-35 truncate lg:max-w-none">{{ email }}</span>
+          <a-icon-chevron-down
+            class="shrink-0 transition-transform duration-200"
+            :class="{ 'rotate-180': isOpen }"
+          />
+        </button>
+      </template>
+      <template #content="{ close }">
+        <slot
+          name="profile-menu"
+          :close="close"
+        >
+          <profile-menu
+            :email="email"
+            :balance="balance"
+            :days-remaining="daysRemaining"
+            :limit-remaining="limitRemaining"
+            :rate="rate"
+            :replenish="replenish"
+            @logout="emit('logout')"
+          />
+        </slot>
+      </template>
+    </a-dropdown-v2>
+
+    <!-- Кнопка сама скрыта ниже lg. -->
+    <a-button-login
+      v-show="showLogIn && !isAuthenticated"
+      @click="emit('login')"
+    />
+  </div>
+</template>

package/components/navigation/header/HeaderUsage.vue

@@ -8,12 +8,19 @@ const props = withDefaults(defineProps<Props>(), {
   limitRemaining: 0,
   maxLimit: 300,
   daysRemaining: 0,
+  showDays: true,
 })
 
 interface Props {
   limitRemaining?: number
   maxLimit?: number
   daysRemaining?: number
+  /**
+   * Блок «остаток дней тарифа». По умолчанию виден (лендинги); выключается в
+   * оболочке Комплаенса, где дни не показывают. Аддитивно — default сохраняет
+   * прежнее поведение `a-header`.
+   */
+  showDays?: boolean
 }
 
 const percent = computed(() => {
@@ -99,29 +106,31 @@ const valueColorClass = computed(() => {
         </template>
       </a-tooltip-v2>
 
-      <span class="h-4 w-px shrink-0 bg-(--border-color-default)" />
+      <template v-if="showDays">
+        <span class="h-4 w-px shrink-0 bg-(--border-color-default)" />
 
-      <a-tooltip-v2
-        class="shrink-0"
-        placement="bottom"
-        arrow
-        :z-index="10001"
-        content-class="py-0.5"
-      >
-        <div
-          class="flex shrink-0 items-center gap-1.5"
-          data-test-id="header-usage-days"
+        <a-tooltip-v2
+          class="shrink-0"
+          placement="bottom"
+          arrow
+          :z-index="10001"
+          content-class="py-0.5"
         >
-          <calendar class="size-4 shrink-0 text-quaternary" />
-          <span class="text-body-md font-bold tabular-nums text-primary">{{ daysRemaining }}</span>
-        </div>
-
-        <template #content>
-          <span class="whitespace-nowrap text-body-sm leading-none text-primary">
-            Остаток дней: {{ daysRemaining }}
-          </span>
-        </template>
-      </a-tooltip-v2>
+          <div
+            class="flex shrink-0 items-center gap-1.5"
+            data-test-id="header-usage-days"
+          >
+            <calendar class="size-4 shrink-0 text-quaternary" />
+            <span class="text-body-md font-bold tabular-nums text-primary">{{ daysRemaining }}</span>
+          </div>
+
+          <template #content>
+            <span class="whitespace-nowrap text-body-sm leading-none text-primary">
+              Остаток дней: {{ daysRemaining }}
+            </span>
+          </template>
+        </a-tooltip-v2>
+      </template>
     </div>
   </client-only>
 </template>

package/components/navigation/sidebar/AAppSidebar.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import AdataLogo from '#adata-ui/icons/adata-logo.vue'
+import Logo from '#adata-ui/icons/logo.vue'
+import { twMerge } from '#adata-ui/utils/twMerge'
+
+/**
+ * Каркас-оболочка бокового меню оболочек с сайдбаром (ВЭД `layouts/app.vue`,
+ * Комплаенс `pages/main.vue`).
+ *
+ * Намеренно тонкий: общего у сайдбаров ВЭД и Комплаенса — только хром (рамка
+ * `<aside>`, строка логотипа, поворот знак/начертание по свёрнутости). Данные,
+ * источник схлопывания (cookie у Комплаенса, проп у ВЭД), способ разворота
+ * (resize у Комплаенса, выезд-peek у ВЭД) и рендер пунктов у каждого свои и
+ * живут в проекте — сюда они приезжают содержимым слота по умолчанию.
+ *
+ * На корне НЕТ `overflow`, `transform`, `filter`, `contain`: сайдбар ВЭД в
+ * свёрнутом виде выезжает вложенным `<nav>` за пределы 80px, и любой из этих
+ * стилей на предке обрезал бы панель. Ширину, высоту, переход и `display`
+ * (у ВЭД корень `hidden lg:flex`) задаёт потребитель пропом `sidebar-class` —
+ * он мержится через twMerge, поэтому его `hidden` корректно перебивает базовый
+ * `flex`. `style` и `data-*` долетают до корня обычным наследованием атрибутов.
+ */
+defineOptions({ name: 'AAppSidebar' })
+
+const props = withDefaults(defineProps<Props>(), {
+  collapsed: false,
+  logoTo: '/',
+  logoLocalized: false,
+  border: 'full',
+  sidebarClass: undefined,
+  logoRowClass: undefined,
+  logoLinkClass: undefined,
+  logoTitle: undefined,
+})
+
+defineSlots<{
+  /** Знак в строке логотипа. По умолчанию — `logo` (свёрнуто) / `adata-logo`. */
+  'logo'?: (props: { collapsed: boolean }) => any
+  /** Полная замена строки логотипа, если проектная разметка не укладывается в пропы. */
+  'logo-row'?: () => any
+  /** Содержимое меню: `<nav>` со своими пунктами (у ВЭД — с выездом, у AC — с resize). */
+  'default'?: () => any
+}>()
+
+interface Props {
+  /** Свёрнут ли сайдбар — управляет знаком логотипа (знак/начертание). */
+  collapsed?: boolean
+  /** Куда ведёт логотип. */
+  logoTo?: string
+  /** Локализованная ссылка (`nuxt-link-locale`) вместо обычной (`nuxt-link`). */
+  logoLocalized?: boolean
+  /** Рамка: `full` — по кругу (Комплаенс), `right` — только справа (ВЭД). */
+  border?: 'full' | 'right'
+  /** Классы корня (ширина, высота, `display`, переход) — мержатся через twMerge. */
+  sidebarClass?: string | (string | false | null | undefined)[]
+  /** Классы строки логотипа: высота, видимость, паддинги, выравнивание. */
+  logoRowClass?: string
+  /** Классы ссылки-логотипа (например, `m-5` у Комплаенса). */
+  logoLinkClass?: string
+  /** `title`/`aria-label` ссылки-логотипа; при наличии добавляет `data-home-link`. */
+  logoTitle?: string
+}
+
+const asideClass = computed(() => twMerge(
+  'relative flex flex-col bg-main',
+  props.border === 'right' ? 'border-r border-default' : 'border border-default',
+  props.sidebarClass,
+))
+
+const logoRowClasses = computed(() => twMerge(
+  'shrink-0 overflow-hidden border-b border-default',
+  props.logoRowClass,
+))
+</script>
+
+<template>
+  <aside :class="asideClass">
+    <slot name="logo-row">
+      <div :class="logoRowClasses">
+        <nuxt-link-locale
+          v-if="logoLocalized"
+          :to="logoTo"
+          :class="logoLinkClass"
+          :data-home-link="logoTitle ? '' : undefined"
+          :title="logoTitle"
+          :aria-label="logoTitle"
+        >
+          <slot name="logo" :collapsed="collapsed">
+            <logo v-if="collapsed" />
+            <adata-logo v-else />
+          </slot>
+        </nuxt-link-locale>
+        <nuxt-link
+          v-else
+          :to="logoTo"
+          :class="logoLinkClass"
+          :title="logoTitle"
+          :aria-label="logoTitle"
+        >
+          <slot name="logo" :collapsed="collapsed">
+            <logo v-if="collapsed" />
+            <adata-logo v-else />
+          </slot>
+        </nuxt-link>
+      </div>
+    </slot>
+
+    <slot />
+  </aside>
+</template>

package/composables/useHeaderNavigationLinks.ts

@@ -120,7 +120,7 @@ export function useHeaderNavigationLinks() {
       {
         key: 'fines',
         name: t('header.products.fines.label'),
-        link: buildLocalizedUrl(locale, urls.avto, PAGES.fines.main),
+        link: buildLocalizedUrl(locale, urls.avto, PAGES.fines.fines),
         icon: AIconCarSide,
         data_attribute: 'navigation-menu-fines-block',
         items: [
@@ -128,13 +128,13 @@ export function useHeaderNavigationLinks() {
             title: t('header.products.fines.items.fines.title'),
             subtitle: t('header.products.fines.items.fines.subtitle'),
             icon: IconCheckCircle,
-            to: buildLocalizedUrl(locale, urls.avto, PAGES.fines.main),
+            to: buildLocalizedUrl(locale, urls.avto, PAGES.fines.fines),
           },
           {
             title: t('header.products.fines.items.auto.title'),
             subtitle: t('header.products.fines.items.auto.subtitle'),
             icon: IconCar,
-            to: buildLocalizedUrl(locale, urls.avto, PAGES.fines.avto),
+            to: buildLocalizedUrl(locale, urls.avto, PAGES.fines.main),
           },
           // {
           //   title: t('header.products.fines.items.wholesaleAuto.title'),

package/lang/en.ts

@@ -28,6 +28,12 @@ const EnLocale: RuLocale = {
       requestLimit: 'Daily request limit',
       daysLeft: 'Days left',
     },
+    shell: {
+      collapse: 'Collapse menu',
+      expand: 'Expand menu',
+      pin: 'Pin menu',
+      home: 'Home',
+    },
     usage: {
       requests: 'Requests',
       days: 'days',

package/lang/kk.ts

@@ -28,6 +28,12 @@ const KkLocale: RuLocale = {
       requestLimit: 'Күнделікті сұраныс лимиті',
       daysLeft: 'Қалған күндер',
     },
+    shell: {
+      collapse: 'Мәзірді жию',
+      expand: 'Мәзірді жаю',
+      pin: 'Мәзірді бекіту',
+      home: 'Басты бетке',
+    },
     usage: {
       requests: 'Сұраныстар',
       days: 'күн',

package/lang/ru.ts

@@ -24,6 +24,12 @@ const RuLocale = {
       requestLimit: 'Cуточный лимит запросов',
       daysLeft: 'Остаток дней',
     },
+    shell: {
+      collapse: 'Свернуть меню',
+      expand: 'Развернуть меню',
+      pin: 'Закрепить меню',
+      home: 'На главную',
+    },
     usage: {
       requests: 'Запросы',
       days: 'дн.',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.1.41-beta.23",
+  "version": "2.1.41-beta.24",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/shared/constans/pages.ts

@@ -21,7 +21,7 @@ export const PAGES = {
     reports: '/profile/reports',
     browsingHistory: '/profile/view-history',
     myGroups: '/profile/my-groups',
-    notes: '/profile/notes'
+    notes: '/profile/notes',
   },
   pk: {
     main: '/',
@@ -32,12 +32,12 @@ export const PAGES = {
     sanctions: '/sanctions',
     employees: '/employees-check',
     counterparty: '/counterparty',
-    unload: '/unload'
+    unload: '/unload',
   },
   work: {
     main: '/',
     summary: '/summary',
-    vacancy: '/vacancy'
+    vacancy: '/vacancy',
   },
   tender: {
     customers: '/main/analytics/customers',
@@ -49,12 +49,13 @@ export const PAGES = {
     akimat: '/main/eoz',
     main: '/',
     contracts: '/main/contracts',
-    plans: '/main/plans'
+    plans: '/main/plans',
   },
   fines: {
-    main: '/?check_fines=true',
+    main: '/',
     avto: '/check-car',
-    bulk: '/mass-check'
+    fines: '/fines',
+    bulk: '/mass-check',
   },
   analytics: {
     main: '/',
@@ -81,7 +82,7 @@ export const PAGES = {
     hotline: '/hotline',
     sanctions: '/sanctions',
     suppliers: '/dossier/suppliers',
-    sb: '/sb'
+    sb: '/sb',
   },
   edo: {
     l: '/',
@@ -90,5 +91,5 @@ export const PAGES = {
     docRisk: '/create?step=2&source=import&postImportAction=risks',
     docCompare: '/create?step=2&source=import',
     docAi: '/create?step=3&source=blank',
-  }
+  },
 }