feat(search menu toggler): show tag count

Rule-34 · Mar 6, 2022 · 56a2297 · 56a2297
1 parent f14dc67
commit 56a2297
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/components/layout/navigation/sidenav/SearchToggler.vue b/components/layout/navigation/sidenav/SearchToggler.vue
@@ -23,7 +23,23 @@
     @click="toggleSearch"
   >
     <!-- Search Icon -->
-    <SearchIcon class="icon" />
+    <SearchIcon class="icon"/>
+
+    <!-- Tag count badge -->
+    <template v-if="tagCount > 0">
+
+      <div class="absolute -top-2 -right-2">
+
+        <p
+          class="text-gray-200 text-sm font-medium bg-darkGray-700 border-[0.15rem] border-accent-500 rounded-full px-1.5">
+          {{ tagCount }}
+
+          <span class="sr-only">
+            tags active
+          </span>
+        </p>
+      </div>
+    </template>
   </button>
 </template>
 
@@ -38,6 +54,13 @@ export default {
     SearchIcon,
   },
 
+  props: {
+    tagCount: {
+      type: Number,
+      required: true
+    }
+  },
+
   methods: {
     ...mapActions('navigation', [
       'sideNavNavigationManager',

diff --git a/pages/index.vue b/pages/index.vue
@@ -3,6 +3,7 @@
     class="flex flex-col max-w-3xl min-h-screen px-4 mx-auto sm:px-6 lg:px-8"
   >
     <portal to="side-nav-area">
+      <SearchToggler :tag-count="getTags.length"/>
     </portal>
 
     <portal to="search">

diff --git a/pages/premium/saved-posts.vue b/pages/premium/saved-posts.vue
@@ -1,7 +1,7 @@
 <template>
   <main class="flex flex-col max-w-3xl min-h-screen p-4 mx-auto sm:p-6 lg:p-8">
     <portal to="side-nav-area">
-      <SearchToggler />
+      <SearchToggler :tag-count="searchActiveTags.length"/>
     </portal>
 
     <portal to="search">
@@ -16,7 +16,7 @@
       </SearchWrapper>
     </portal>
 
-    <ContentSeparator title="Saved posts" />
+    <ContentSeparator title="Saved posts"/>
 
     <nav class="flex flex-row items-center justify-between py-4">
       <DomainSelector