From 93e1461c94f0c73946b72f3d15000df4234ba63c Mon Sep 17 00:00:00 2001
From: madhurishivakumar-okta <madhuri.shivakumar@okta.com>
Date: Tue, 17 Dec 2024 11:41:39 +0530
Subject: [PATCH 1/2] OKTA-845062 | [BETA IA] POC for counting the number of
 documents within a category

---
 .../assets/css/components/_sidebar.scss       |  7 ++++
 .../components/HeaderNavItem.vue              | 22 ++++++++--
 .../@okta/vuepress-theme-prose/enhanceApp.js  | 40 +++++++++++++++++++
 3 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/packages/@okta/vuepress-theme-prose/assets/css/components/_sidebar.scss b/packages/@okta/vuepress-theme-prose/assets/css/components/_sidebar.scss
index e7928daecb1..5e752c9bf4e 100644
--- a/packages/@okta/vuepress-theme-prose/assets/css/components/_sidebar.scss
+++ b/packages/@okta/vuepress-theme-prose/assets/css/components/_sidebar.scss
@@ -304,3 +304,10 @@
 .aside-hidden .sections {
   display: none;
 }
+
+.badge {
+  font-size: 10px;
+  border-radius: 50px;
+  background: #767272;
+  padding: 4.2px 7.8px;
+}
diff --git a/packages/@okta/vuepress-theme-prose/components/HeaderNavItem.vue b/packages/@okta/vuepress-theme-prose/components/HeaderNavItem.vue
index 479659830fd..c4cf8cc09d9 100644
--- a/packages/@okta/vuepress-theme-prose/components/HeaderNavItem.vue
+++ b/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>
diff --git a/packages/@okta/vuepress-theme-prose/enhanceApp.js b/packages/@okta/vuepress-theme-prose/enhanceApp.js
index bf0844615f0..355b0a2f9bc 100644
--- a/packages/@okta/vuepress-theme-prose/enhanceApp.js
+++ b/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
+
 };

From 2fc485438d39c7d118a5470866fd2a437777578d Mon Sep 17 00:00:00 2001
From: madhurishivakumar-okta <madhuri.shivakumar@okta.com>
Date: Tue, 17 Dec 2024 11:51:42 +0530
Subject: [PATCH 2/2] fix lint issues

---
 .../assets/css/components/_sidebar.scss           | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/@okta/vuepress-theme-prose/assets/css/components/_sidebar.scss b/packages/@okta/vuepress-theme-prose/assets/css/components/_sidebar.scss
index 5e752c9bf4e..c44053dc692 100644
--- a/packages/@okta/vuepress-theme-prose/assets/css/components/_sidebar.scss
+++ b/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;
@@ -306,8 +311,10 @@
 }
 
 .badge {
-  font-size: 10px;
+  padding: 4.2px 7.8px;
+
   border-radius: 50px;
   background: #767272;
-  padding: 4.2px 7.8px;
+
+  font-size: 10px;
 }