From 021869800f69f163d3edf619e26781556623ae25 Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Fri, 6 Dec 2024 21:51:11 +0200
Subject: [PATCH] add counter to tabbar

---
 apps/frontend/src/components/layout/TabBar.vue      |  4 +++-
 apps/frontend/src/components/layout/TabMenuItem.vue | 12 +++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/components/layout/TabBar.vue b/apps/frontend/src/components/layout/TabBar.vue
index e7e5e78..8046acb 100644
--- a/apps/frontend/src/components/layout/TabBar.vue
+++ b/apps/frontend/src/components/layout/TabBar.vue
@@ -6,11 +6,12 @@
       class="flex justify-around sm:justify-between sm:gap-8 sm:px-4 sm:flex-row sm:bg-white sm:max-w-prose mx-auto"
     >
       <TabMenuItem
-        v-for="{ route, label, icon } in tabs"
+        v-for="{ route, label, icon, unreadCount } in tabs"
         :key="route"
         :label
         :icon
         :to="{ name: route }"
+        :unreadCount
       />
     </div>
   </div>
@@ -22,6 +23,7 @@ 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' },
diff --git a/apps/frontend/src/components/layout/TabMenuItem.vue b/apps/frontend/src/components/layout/TabMenuItem.vue
index c33abbd..bb3f6da 100644
--- a/apps/frontend/src/components/layout/TabMenuItem.vue
+++ b/apps/frontend/src/components/layout/TabMenuItem.vue
@@ -1,11 +1,10 @@
 <template>
-  <RouterLink :to custom v-slot="{ isActive, href, navigate }">
+  <RouterLink :to="to" custom v-slot="{ isActive, href, navigate }">
     <a
       v-bind="$attrs"
       :href="href"
       @click="navigate"
-      class="flex flex-col items-center w-full sm:flex-row sm:items-center sm:w-auto gap-1"
-      :class="{ 'text-primary-700 font-bold': isActive }"
+      class="flex flex-col items-center w-full sm:flex-row sm:items-center sm:w-auto gap-1 relative"
     >
       <i :class="['pi', `pi-${icon}`, 'text-2xl sm:mr-2', isActive && 'text-primary-700']"></i>
       <span
@@ -14,6 +13,12 @@
       >
         {{ label }}
       </span>
+      <span
+        v-if="unreadCount && unreadCount > 0"
+        class="absolute top-0 -right-2.5 bg-red-500 text-white text-xs rounded-full px-1"
+      >
+        {{ unreadCount }}
+      </span>
     </a>
   </RouterLink>
 </template>
@@ -25,5 +30,6 @@ defineProps<{
   readonly to: RouteLocationRaw | string
   readonly icon: string
   readonly label: string
+  readonly unreadCount?: number
 }>()
 </script>