[POC] OKTA-845062 | [BETA IA] POC for counting the number of documents within a category

packages/@okta/vuepress-theme-prose/assets/css/components/_sidebar.scss

@@ -62,6 +62,7 @@
 .tree-nav > .sections > li > .sections > li > .sections > li,
 .tree-nav > .sections > li > .sections > li > .sections > li > .sections > li {
   margin-top: 8px;
+  padding-left: 6px;
 }
 
 .tree-nav > .sections > .link-wrap > .tree-nav-link,
@@ -126,7 +127,7 @@
 }
 
 .tree-nav .sections li > .sections {
-  margin-left: 22px;
+  margin-left: 16px;
   padding-left: 0;
 }
 
@@ -148,10 +149,14 @@
 }
 
 .tree-nav .sections .link-wrap a.router-link-active span {
-  font-weight: 400;
+  font-weight: 700;
   color: cv("link", "darker");
 }
 
+.tree-nav .sections .link-wrap:has( > a.router-link-active) {
+  background: linear-gradient(90deg, #dce3f0 0, #f7faff 100%);
+}
+
 .tree-nav .sections .link-wrap a.router-link-active:before {
   background-color: cv("link", "active-router") !important;
   background-image: none !important;
@@ -304,3 +309,12 @@
 .aside-hidden .sections {
   display: none;
 }
+
+.badge {
+  padding: 4.2px 7.8px;
+
+  border-radius: 50px;
+  background: #767272;
+
+  font-size: 10px;
+}

packages/@okta/vuepress-theme-prose/components/HeaderNavItem.vue

@@ -17,7 +17,13 @@
     >
       <slot>
         <span class="text-holder">
-          {{ link.title }}
+          {{ link.title }} 
+          <span 
+            v-if="getCount(link.title) > 0"
+            class="badge"
+          >
+            {{ getCount(link.title) }}
+          </span>
         </span>
       </slot>
     </a>
@@ -59,13 +65,23 @@ export default {
         }
       }
     },
+    counts() {
+      return {
+        Guides: this.$categoryCounts.guides,
+        Concepts: this.$categoryCounts.concepts,
+        References: this.$categoryCounts.references,
+        "SDKs": this.$categoryCounts.sdks || 0,
+        "Release Notes": this.$categoryCounts.releaseNotes || 0,
+      }
+    }
   },
   methods: {
     isCurrentPage(route) {
       return window.location.pathname.startsWith(route);
     },
+    getCount(title) {
+      return this.counts[title] || 0;
+    }
   }
-
-
 };
 </script>

packages/@okta/vuepress-theme-prose/enhanceApp.js

@@ -20,6 +20,14 @@ export default ({ Vue, options, router, siteData }) => {
   Vue.use(PortalVue);
   Vue.component('v-select', VueSelect);
 
+  const categoryCounts = {
+    guides: 0,
+    concepts: 0,
+    references: 0,
+    sdks: 0,
+    releaseNotes: 0
+  }
+
   router.beforeEach((to, from, next) => {
     /**
      * Catch `404` in router and redirect to custom 404 page
@@ -39,4 +47,36 @@ export default ({ Vue, options, router, siteData }) => {
       return scrollToAnchor(to);
     }
   };
+
+  siteData.pages.forEach(page => {
+    const path = page.path; 
+
+    switch(true)  {
+      case path.startsWith('/docs/guides'):
+        categoryCounts.guides += 1
+        break;
+
+      case path.startsWith('/docs/concepts'):
+        categoryCounts.concepts += 1
+        break;
+
+      case path.startsWith('/docs/reference'):
+        categoryCounts.references += 1
+        break;
+
+      case path.startsWith('/code'):
+        categoryCounts.sdks += 1
+        break;
+
+      case path.startsWith('/docs/release-notes'):
+        categoryCounts.releaseNotes += 1
+        break;
+
+      default:
+        break
+    }
+  })
+
+  Vue.prototype.$categoryCounts = categoryCounts
+
 };