hereconnect/apps/frontend/src/components/layout/TabBar.vue

<template>
  <div
    class="sticky bottom-0 bg-white dark:bg-gray-800 shadow-md dark:shadow-lg py-safe-or-4 sm:border-b dark:sm:border-gray-700 sm:order-first sm:justify-center touch-none"
  >
    <div
      class="flex justify-around sm:justify-between sm:gap-8 sm:px-4 sm:flex-row sm:bg-white dark:sm:bg-gray-800 sm:max-w-prose mx-auto"
    >
      <TabMenuItem
        v-for="{ route, label, icon, unreadCount } in tabs"
        :key="route"
        :label
        :icon
        :to="{ name: route }"
        :unreadCount
        class="dark:text-gray-300 dark:hover:text-gray-100"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ROUTE_NAMES } from '@/constants/routes'
type Tab = {
  route: (typeof ROUTE_NAMES)[keyof typeof ROUTE_NAMES]
  label: string
  icon: string
  unreadCount?: number
}
const tabs: Tab[] = [
  { route: ROUTE_NAMES.CREATE, label: 'Создать QR-код', icon: 'plus' },
  { route: ROUTE_NAMES.MANAGE_DASHBOARD_QR, label: 'Мои QR-коды', icon: 'qrcode' },
  { route: ROUTE_NAMES.MANAGE_DASHBOARD_CHATS, label: 'Чаты', icon: 'comments' },
  // { to: ROUTE_NAMES., label: 'Профиль', icon: 'user' },
]
</script>