Files
hereconnect/apps/frontend/src/components/layout/TabBar.vue
T
ti 33a8d8417a
Deploy app frontend / app frontend (push) Successful in 1m49s
improvement layout
2024-12-09 09:38:16 +02:00

37 lines
1.2 KiB
Vue

<template>
<!-- shadow-md dark:shadow-lg -->
<div
class="sticky bottom-0 bg-white dark:bg-gray-800 sm:border-b dark:sm:border-gray-700 sm:order-first sm:justify-center touch-none px-safe"
>
<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>