From 57bf60fd54120c11fc2c7770eeec7bf28438f77e Mon Sep 17 00:00:00 2001
From: Saif Ali Shaik <saif.shaik@scalekit.com>
Date: Mon, 22 Sep 2025 16:12:44 +0530
Subject: [PATCH 1/6] Enhance Secondary Navigation with Dropdown Functionality

- Added support for dropdown menus in the secondary navigation component.
- Introduced `IconChevronDown` for indicating dropdown items.
- Updated navigation structure to include child items for better organization.
- Implemented dropdown visibility control with JavaScript for improved user interaction.
- Enhanced styling for dropdown menus and icons to improve visual clarity.
---
 src/components/SecondaryNav.astro | 298 +++++++++++++++++++++++++++---
 1 file changed, 273 insertions(+), 25 deletions(-)

diff --git a/src/components/SecondaryNav.astro b/src/components/SecondaryNav.astro
index f1b1742d..054eccb1 100644
--- a/src/components/SecondaryNav.astro
+++ b/src/components/SecondaryNav.astro
@@ -1,5 +1,6 @@
 ---
 import IconHouse from '~icons/lucide/house'
+import IconChevronDown from '~icons/lucide/chevron-down'
 
 interface NavItem {
   href: string
@@ -7,6 +8,7 @@ interface NavItem {
   patterns: string[]
   isExact?: boolean
   iconComponent?: any
+  children?: NavItem[]
 }
 
 interface NavSection {
@@ -26,6 +28,11 @@ function startsWithAny(mainString: string, patterns: string[]) {
 }
 
 function isCurrentPage(pathname: string, item: NavItem): boolean {
+  // If this is a parent item with children, consider it current if any child is current
+  if (item.children && item.children.length > 0) {
+    return item.children.some((child) => isCurrentPage(pathname, child))
+  }
+
   if (item.isExact) {
     return pathname === item.href
   }
@@ -43,22 +50,40 @@ const navSections: NavSection[] = [
     items: [
       { href: '/', label: '', patterns: ['/'], isExact: true, iconComponent: IconHouse },
 
-      { href: '/mcp/overview', label: 'MCP Auth', patterns: ['/mcp/'] },
-      { href: '/fsa/quickstart', label: 'Full-Stack Auth', patterns: ['/fsa/'] },
-      {
-        href: '/sso/quickstart',
-        label: 'SSO',
-        patterns: ['/sso/', '/guides/sso/', '/social-logins/'],
-      },
       {
-        href: '/passwordless/quickstart',
-        label: 'Passwordless',
-        patterns: ['/passwordless/', '/guides/passwordless/'],
-      },
-      {
-        href: '/directory/scim/quickstart',
-        label: 'SCIM',
-        patterns: ['/directory/', '/guides/directory/'],
+        href: '/fsa/quickstart',
+        label: 'Authenticate',
+        // Parent patterns include all child patterns so it highlights correctly
+        patterns: [
+          '/mcp/',
+          '/fsa/',
+          '/sso/',
+          '/guides/sso/',
+          '/social-logins/',
+          '/passwordless/',
+          '/guides/passwordless/',
+          '/directory/',
+          '/guides/directory/',
+        ],
+        children: [
+          { href: '/mcp/overview', label: 'MCP Auth', patterns: ['/mcp/'] },
+          { href: '/fsa/quickstart', label: 'Full-Stack Auth', patterns: ['/fsa/'] },
+          {
+            href: '/sso/quickstart',
+            label: 'SSO',
+            patterns: ['/sso/', '/guides/sso/', '/social-logins/'],
+          },
+          {
+            href: '/passwordless/quickstart',
+            label: 'Passwordless',
+            patterns: ['/passwordless/', '/guides/passwordless/'],
+          },
+          {
+            href: '/directory/scim/quickstart',
+            label: 'SCIM',
+            patterns: ['/directory/', '/guides/directory/'],
+          },
+        ],
       },
       { href: '/agent-actions/quickstart', label: 'Agent Actions', patterns: ['/agent-actions/'] },
     ],
@@ -83,22 +108,56 @@ const navSections: NavSection[] = [
     navSections.map((section) => (
       <div class="nav-items">
         {section.items.map((item) => (
-          <a
-            href={item.href}
-            class={`nav-item ${isCurrentPage(Astro.url.pathname, item) ? 'current' : ''}`}
-            aria-current="page"
+          <div
+            class={`nav-item-wrapper ${item.children && item.children.length > 0 ? 'has-dropdown' : ''}`}
           >
-            <div class="nav-item-content">
-              {item.iconComponent && <item.iconComponent class="nav-icon" />}
-              {item.label && <span class="nav-label">{item.label}</span>}
-            </div>
-          </a>
+            <a
+              href={item.href}
+              class={`nav-item ${isCurrentPage(Astro.url.pathname, item) ? 'current' : ''}`}
+              aria-current="page"
+            >
+              <div class="nav-item-content">
+                {item.iconComponent && <item.iconComponent class="nav-icon" />}
+                {item.label && <span class="nav-label">{item.label}</span>}
+                {item.children && item.children.length > 0 && (
+                  <IconChevronDown class="dropdown-icon" />
+                )}
+              </div>
+            </a>
+          </div>
         ))}
       </div>
     ))
   }
 </nav>
 
+<!-- Dropdown portal to ensure menu overlays main content -->
+<div
+  id="dropdown-portal"
+  style="position: fixed; top: 0; left: 0; pointer-events: none; z-index: 999999;"
+>
+  {
+    navSections.map((section) =>
+      section.items.map((item) =>
+        item.children && item.children.length > 0 ? (
+          <div class="dropdown-menu" data-dropdown data-nav-item={item.label}>
+            <div class="dropdown-content">
+              {item.children.map((child) => (
+                <a
+                  href={child.href}
+                  class={`dropdown-item ${isCurrentPage(Astro.url.pathname, child) ? 'current' : ''}`}
+                >
+                  {child.label}
+                </a>
+              ))}
+            </div>
+          </div>
+        ) : null,
+      ),
+    )
+  }
+</div>
+
 <style>
   /* Hide the duplicate sidebar topics in the left sidebar on desktop */
   :global(.starlight-sidebar-topics) {
@@ -117,8 +176,9 @@ const navSections: NavSection[] = [
     display: flex;
     justify-content: space-between;
     top: calc(var(--sl-header-height-base) - 1px); /* Reduced from var(--sl-header-height-base) */
-    z-index: var(--sl-z-index-navbar);
+    z-index: 999 !important;
     width: 100%;
+    isolation: isolate;
   }
 
   .nav-items {
@@ -138,6 +198,12 @@ const navSections: NavSection[] = [
     display: none;
   }
 
+  .nav-item-wrapper {
+    position: relative;
+    display: flex;
+    isolation: isolate;
+  }
+
   .nav-item {
     display: flex;
     align-items: center;
@@ -178,6 +244,74 @@ const navSections: NavSection[] = [
     text-decoration: none;
   }
 
+  /* Dropdown styles via portal overlay */
+  .dropdown-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+    margin-left: 0.25rem;
+  }
+
+  .nav-item-wrapper.has-dropdown:hover .dropdown-icon {
+    transform: rotate(180deg);
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(6px);
+    transition:
+      opacity 0.15s ease,
+      transform 0.15s ease,
+      visibility 0.15s ease;
+    z-index: 999999 !important;
+    pointer-events: none;
+    min-width: 200px;
+    isolation: isolate;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  .dropdown-menu.open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    pointer-events: all;
+  }
+
+  .dropdown-content {
+    background: var(--sl-color-bg) !important;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.5rem;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
+    padding: 0.5rem 0;
+    backdrop-filter: blur(12px);
+    position: relative;
+    z-index: 100000 !important;
+    isolation: isolate;
+  }
+
+  .dropdown-item {
+    display: block;
+    padding: 0.5rem 1rem;
+    color: var(--sl-color-gray-2);
+    text-decoration: none;
+    font-size: var(--sl-text-sm);
+    line-height: 1.4;
+    transition: all 0.2s ease;
+    border-left: 3px solid transparent;
+    white-space: nowrap;
+  }
+
+  .dropdown-item:hover,
+  .dropdown-item.current {
+    color: var(--sl-color-white);
+    background: var(--sl-color-gray-6);
+    border-left-color: var(--sl-color-accent);
+  }
+
   /* Responsive adjustments */
   @media (max-width: 50rem) {
     .secondary-nav {
@@ -195,3 +329,117 @@ const navSections: NavSection[] = [
     }
   }
 </style>
+
+<script>
+  function positionDropdown(trigger, dropdown) {
+    const rect = trigger.getBoundingClientRect()
+    // Place it first, then make it visible to avoid top-left flash
+    dropdown.style.top = `${rect.bottom + 2}px`
+    dropdown.style.left = `${rect.left}px`
+    dropdown.classList.add('open')
+  }
+
+  function hideDropdown(dropdown) {
+    dropdown.classList.remove('open')
+    dropdown.style.pointerEvents = 'none'
+    dropdown.style.top = '-9999px'
+    dropdown.style.left = '-9999px'
+  }
+
+  function hideAllDropdowns() {
+    document.querySelectorAll('[data-dropdown]').forEach((d) => hideDropdown(d))
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const dropdownTriggers = document.querySelectorAll('.nav-item-wrapper.has-dropdown')
+    let currentOpenDropdown = null
+
+    dropdownTriggers.forEach((trigger) => {
+      const triggerLink = trigger.querySelector('.nav-item')
+      const label = triggerLink?.querySelector('.nav-label')?.textContent?.trim()
+      if (!label) return
+
+      const dropdown = document.querySelector(`[data-nav-item="${label}"]`)
+      if (!dropdown) return
+
+      hideDropdown(dropdown)
+
+      trigger.addEventListener('click', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+
+        if (currentOpenDropdown === dropdown && dropdown.style.pointerEvents === 'all') {
+          hideDropdown(dropdown)
+          currentOpenDropdown = null
+        } else {
+          hideAllDropdowns()
+          positionDropdown(trigger, dropdown)
+          dropdown.style.pointerEvents = 'all'
+          currentOpenDropdown = dropdown
+        }
+      })
+
+      trigger.addEventListener('mouseenter', () => {
+        if (currentOpenDropdown === null) {
+          hideAllDropdowns()
+          positionDropdown(trigger, dropdown)
+          dropdown.style.pointerEvents = 'all'
+          currentOpenDropdown = dropdown
+        }
+      })
+
+      trigger.addEventListener('mouseleave', () => {
+        setTimeout(() => {
+          if (!dropdown.matches(':hover') && !trigger.matches(':hover')) {
+            if (currentOpenDropdown === dropdown) {
+              hideDropdown(dropdown)
+              currentOpenDropdown = null
+            }
+          }
+        }, 150)
+      })
+
+      dropdown.addEventListener('mouseleave', () => {
+        hideDropdown(dropdown)
+        currentOpenDropdown = null
+      })
+
+      dropdown.addEventListener('click', (e) => {
+        const target = e.target
+        if (target.classList.contains('dropdown-item')) {
+          hideDropdown(dropdown)
+          currentOpenDropdown = null
+        }
+      })
+
+      let ticking = false
+      const updatePosition = () => {
+        if (!ticking) {
+          requestAnimationFrame(() => {
+            if (currentOpenDropdown === dropdown && dropdown.style.pointerEvents === 'all') {
+              positionDropdown(trigger, dropdown)
+            }
+            ticking = false
+          })
+          ticking = true
+        }
+      }
+
+      window.addEventListener('scroll', updatePosition)
+      window.addEventListener('resize', updatePosition)
+    })
+
+    document.addEventListener('click', (e) => {
+      const target = e.target
+      if (!target.closest('.nav-item-wrapper.has-dropdown') && !target.closest('[data-dropdown]')) {
+        hideAllDropdowns()
+      }
+    })
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        hideAllDropdowns()
+      }
+    })
+  })
+</script>

From 1a0c7b148d293fee16891ba55a713669a9d849ad Mon Sep 17 00:00:00 2001
From: Saif Ali Shaik <saif.shaik@scalekit.com>
Date: Mon, 22 Sep 2025 16:15:57 +0530
Subject: [PATCH 2/6] Remove gap property from SecondaryNav component for
 improved layout consistency

---
 src/components/SecondaryNav.astro | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/SecondaryNav.astro b/src/components/SecondaryNav.astro
index 054eccb1..4fdb0be4 100644
--- a/src/components/SecondaryNav.astro
+++ b/src/components/SecondaryNav.astro
@@ -228,7 +228,6 @@ const navSections: NavSection[] = [
   .nav-item-content {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
     line-height: 1.2;
   }
 

From 811bffd60e42eb56b30d734d0f23a989b4d79c48 Mon Sep 17 00:00:00 2001
From: Saif Ali Shaik <saif.shaik@scalekit.com>
Date: Mon, 22 Sep 2025 16:23:00 +0530
Subject: [PATCH 3/6] Enhance SecondaryNav component to dynamically display
 labels for dropdown items

- Introduced `getDisplayLabel` function to determine the appropriate label for navigation items with children.
- Updated rendering logic to show the correct label based on active child items.
- Modified dropdown menu key attribute for improved accessibility and functionality.
---
 src/components/SecondaryNav.astro | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/SecondaryNav.astro b/src/components/SecondaryNav.astro
index 4fdb0be4..1e045f1a 100644
--- a/src/components/SecondaryNav.astro
+++ b/src/components/SecondaryNav.astro
@@ -45,6 +45,14 @@ function isCurrentPage(pathname: string, item: NavItem): boolean {
   return startsWithAny(pathname, item.patterns)
 }
 
+function getDisplayLabel(pathname: string, item: NavItem): string {
+  if (item.children && item.children.length > 0) {
+    const activeChild = item.children.find((child) => isCurrentPage(pathname, child))
+    if (activeChild) return activeChild.label
+  }
+  return item.label
+}
+
 const navSections: NavSection[] = [
   {
     items: [
@@ -118,7 +126,13 @@ const navSections: NavSection[] = [
             >
               <div class="nav-item-content">
                 {item.iconComponent && <item.iconComponent class="nav-icon" />}
-                {item.label && <span class="nav-label">{item.label}</span>}
+                {item.label && (
+                  <span class="nav-label">
+                    {item.children && item.children.length > 0
+                      ? getDisplayLabel(Astro.url.pathname, item)
+                      : item.label}
+                  </span>
+                )}
                 {item.children && item.children.length > 0 && (
                   <IconChevronDown class="dropdown-icon" />
                 )}
@@ -140,7 +154,7 @@ const navSections: NavSection[] = [
     navSections.map((section) =>
       section.items.map((item) =>
         item.children && item.children.length > 0 ? (
-          <div class="dropdown-menu" data-dropdown data-nav-item={item.label}>
+          <div class="dropdown-menu" data-dropdown data-nav-key={item.href}>
             <div class="dropdown-content">
               {item.children.map((child) => (
                 <a
@@ -355,10 +369,10 @@ const navSections: NavSection[] = [
 
     dropdownTriggers.forEach((trigger) => {
       const triggerLink = trigger.querySelector('.nav-item')
-      const label = triggerLink?.querySelector('.nav-label')?.textContent?.trim()
-      if (!label) return
+      const href = triggerLink?.getAttribute('href')
+      if (!href) return
 
-      const dropdown = document.querySelector(`[data-nav-item="${label}"]`)
+      const dropdown = document.querySelector(`[data-nav-key="${href}"]`)
       if (!dropdown) return
 
       hideDropdown(dropdown)

From a71fc87a1fb7a9f9c125aa8e9c5b8fa49840354b Mon Sep 17 00:00:00 2001
From: Saif Ali Shaik <saif.shaik@scalekit.com>
Date: Mon, 22 Sep 2025 16:27:30 +0530
Subject: [PATCH 4/6] Enhance SecondaryNav component with additional icons and
 improved layout

- Added new icon components for navigation items to enhance visual representation.
- Implemented `getDisplayIcon` function to dynamically select icons based on active child items.
- Updated navigation structure to include icons for various sections, improving user experience.
- Adjusted styling for dropdown items to ensure consistent alignment and spacing.
---
 src/components/SecondaryNav.astro | 81 +++++++++++++++++++++++--------
 1 file changed, 61 insertions(+), 20 deletions(-)

diff --git a/src/components/SecondaryNav.astro b/src/components/SecondaryNav.astro
index 1e045f1a..9f229725 100644
--- a/src/components/SecondaryNav.astro
+++ b/src/components/SecondaryNav.astro
@@ -1,6 +1,16 @@
 ---
 import IconHouse from '~icons/lucide/house'
 import IconChevronDown from '~icons/lucide/chevron-down'
+import IconLucideUsers from '~icons/lucide/users'
+import IconLucideKeyRound from '~icons/lucide/key-round'
+import IconLucideMail from '~icons/lucide/mail'
+import IconLucideBot from '~icons/lucide/bot'
+import IconStreamlineUserSyncOnlineInPersonRemix from '~icons/streamline/user-sync-online-in-person-remix'
+import IconMcp from '~icons/codicon/mcp'
+import IconLucideShield from '~icons/lucide/shield'
+import IconLucideBookOpen from '~icons/lucide/book-open'
+import IconLucideCode from '~icons/lucide/code'
+import IconLucideWrench from '~icons/lucide/wrench'
 
 interface NavItem {
   href: string
@@ -53,6 +63,14 @@ function getDisplayLabel(pathname: string, item: NavItem): string {
   return item.label
 }
 
+function getDisplayIcon(pathname: string, item: NavItem): any {
+  if (item.children && item.children.length > 0) {
+    const activeChild = item.children.find((child) => isCurrentPage(pathname, child))
+    if (activeChild && activeChild.iconComponent) return activeChild.iconComponent
+  }
+  return item.iconComponent
+}
+
 const navSections: NavSection[] = [
   {
     items: [
@@ -61,6 +79,7 @@ const navSections: NavSection[] = [
       {
         href: '/fsa/quickstart',
         label: 'Authenticate',
+        iconComponent: IconLucideShield,
         // Parent patterns include all child patterns so it highlights correctly
         patterns: [
           '/mcp/',
@@ -74,38 +93,42 @@ const navSections: NavSection[] = [
           '/guides/directory/',
         ],
         children: [
-          { href: '/mcp/overview', label: 'MCP Auth', patterns: ['/mcp/'] },
-          { href: '/fsa/quickstart', label: 'Full-Stack Auth', patterns: ['/fsa/'] },
+          { href: '/mcp/overview', label: 'MCP Auth', patterns: ['/mcp/'], iconComponent: IconMcp },
+          { href: '/fsa/quickstart', label: 'Full-Stack Auth', patterns: ['/fsa/'], iconComponent: IconLucideUsers },
           {
             href: '/sso/quickstart',
             label: 'SSO',
             patterns: ['/sso/', '/guides/sso/', '/social-logins/'],
+            iconComponent: IconLucideKeyRound,
           },
           {
             href: '/passwordless/quickstart',
             label: 'Passwordless',
             patterns: ['/passwordless/', '/guides/passwordless/'],
+            iconComponent: IconLucideMail,
           },
           {
             href: '/directory/scim/quickstart',
             label: 'SCIM',
             patterns: ['/directory/', '/guides/directory/'],
+            iconComponent: IconStreamlineUserSyncOnlineInPersonRemix,
           },
         ],
       },
-      { href: '/agent-actions/quickstart', label: 'Agent Actions', patterns: ['/agent-actions/'] },
+      { href: '/agent-actions/quickstart', label: 'Agent Actions', patterns: ['/agent-actions/'], iconComponent: IconLucideBot },
     ],
   },
   {
     items: [
-      { href: '/apis/', label: 'API Reference', patterns: ['/apis'] },
+      { href: '/apis/', label: 'API Reference', patterns: ['/apis'], iconComponent: IconLucideBookOpen },
       {
         href: '/dev-kit/code-samples',
         label: 'Code Samples',
         patterns: ['/dev-kit/code-samples'],
         isExact: true,
+        iconComponent: IconLucideCode,
       },
-      { href: '/dev-kit/', label: 'Developer Resources', patterns: ['/dev-kit/'] },
+      { href: '/dev-kit/', label: 'Developer Resources', patterns: ['/dev-kit/'], iconComponent: IconLucideWrench },
     ],
   },
 ]
@@ -124,19 +147,24 @@ const navSections: NavSection[] = [
               class={`nav-item ${isCurrentPage(Astro.url.pathname, item) ? 'current' : ''}`}
               aria-current="page"
             >
-              <div class="nav-item-content">
-                {item.iconComponent && <item.iconComponent class="nav-icon" />}
-                {item.label && (
-                  <span class="nav-label">
-                    {item.children && item.children.length > 0
-                      ? getDisplayLabel(Astro.url.pathname, item)
-                      : item.label}
-                  </span>
-                )}
-                {item.children && item.children.length > 0 && (
-                  <IconChevronDown class="dropdown-icon" />
-                )}
-              </div>
+               <div class="nav-item-content">
+                 {(function() {
+                   const IconComponent = item.children && item.children.length > 0
+                     ? getDisplayIcon(Astro.url.pathname, item)
+                     : item.iconComponent;
+                   return IconComponent && <IconComponent class="nav-icon" />;
+                 })()}
+                 {item.label && (
+                   <span class="nav-label">
+                     {item.children && item.children.length > 0
+                       ? getDisplayLabel(Astro.url.pathname, item)
+                       : item.label}
+                   </span>
+                 )}
+                 {item.children && item.children.length > 0 && (
+                   <IconChevronDown class="dropdown-icon" />
+                 )}
+               </div>
             </a>
           </div>
         ))}
@@ -161,7 +189,11 @@ const navSections: NavSection[] = [
                   href={child.href}
                   class={`dropdown-item ${isCurrentPage(Astro.url.pathname, child) ? 'current' : ''}`}
                 >
-                  {child.label}
+                  {(function() {
+                    const ChildIcon = child.iconComponent;
+                    return ChildIcon && <ChildIcon class="dropdown-item-icon" />;
+                  })()}
+                  <span>{child.label}</span>
                 </a>
               ))}
             </div>
@@ -242,6 +274,7 @@ const navSections: NavSection[] = [
   .nav-item-content {
     display: flex;
     align-items: center;
+    gap: 0.5rem;
     line-height: 1.2;
   }
 
@@ -307,7 +340,9 @@ const navSections: NavSection[] = [
   }
 
   .dropdown-item {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
     padding: 0.5rem 1rem;
     color: var(--sl-color-gray-2);
     text-decoration: none;
@@ -318,6 +353,12 @@ const navSections: NavSection[] = [
     white-space: nowrap;
   }
 
+  .dropdown-item-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
   .dropdown-item:hover,
   .dropdown-item.current {
     color: var(--sl-color-white);

From 4c8dae3957b336398d832cfe23c85c4064ac0ffb Mon Sep 17 00:00:00 2001
From: Saif Ali Shaik <saif.shaik@scalekit.com>
Date: Mon, 22 Sep 2025 16:27:41 +0530
Subject: [PATCH 5/6] Refactor SecondaryNav component for improved readability
 and consistency

- Reformatted navigation item definitions for better clarity and maintainability.
- Ensured consistent structure for navigation items, enhancing code organization.
- Updated rendering logic for dropdown items to improve visual consistency.
---
 src/components/SecondaryNav.astro | 71 ++++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/components/SecondaryNav.astro b/src/components/SecondaryNav.astro
index 9f229725..4e32cc97 100644
--- a/src/components/SecondaryNav.astro
+++ b/src/components/SecondaryNav.astro
@@ -94,7 +94,12 @@ const navSections: NavSection[] = [
         ],
         children: [
           { href: '/mcp/overview', label: 'MCP Auth', patterns: ['/mcp/'], iconComponent: IconMcp },
-          { href: '/fsa/quickstart', label: 'Full-Stack Auth', patterns: ['/fsa/'], iconComponent: IconLucideUsers },
+          {
+            href: '/fsa/quickstart',
+            label: 'Full-Stack Auth',
+            patterns: ['/fsa/'],
+            iconComponent: IconLucideUsers,
+          },
           {
             href: '/sso/quickstart',
             label: 'SSO',
@@ -115,12 +120,22 @@ const navSections: NavSection[] = [
           },
         ],
       },
-      { href: '/agent-actions/quickstart', label: 'Agent Actions', patterns: ['/agent-actions/'], iconComponent: IconLucideBot },
+      {
+        href: '/agent-actions/quickstart',
+        label: 'Agent Actions',
+        patterns: ['/agent-actions/'],
+        iconComponent: IconLucideBot,
+      },
     ],
   },
   {
     items: [
-      { href: '/apis/', label: 'API Reference', patterns: ['/apis'], iconComponent: IconLucideBookOpen },
+      {
+        href: '/apis/',
+        label: 'API Reference',
+        patterns: ['/apis'],
+        iconComponent: IconLucideBookOpen,
+      },
       {
         href: '/dev-kit/code-samples',
         label: 'Code Samples',
@@ -128,7 +143,12 @@ const navSections: NavSection[] = [
         isExact: true,
         iconComponent: IconLucideCode,
       },
-      { href: '/dev-kit/', label: 'Developer Resources', patterns: ['/dev-kit/'], iconComponent: IconLucideWrench },
+      {
+        href: '/dev-kit/',
+        label: 'Developer Resources',
+        patterns: ['/dev-kit/'],
+        iconComponent: IconLucideWrench,
+      },
     ],
   },
 ]
@@ -147,24 +167,25 @@ const navSections: NavSection[] = [
               class={`nav-item ${isCurrentPage(Astro.url.pathname, item) ? 'current' : ''}`}
               aria-current="page"
             >
-               <div class="nav-item-content">
-                 {(function() {
-                   const IconComponent = item.children && item.children.length > 0
-                     ? getDisplayIcon(Astro.url.pathname, item)
-                     : item.iconComponent;
-                   return IconComponent && <IconComponent class="nav-icon" />;
-                 })()}
-                 {item.label && (
-                   <span class="nav-label">
-                     {item.children && item.children.length > 0
-                       ? getDisplayLabel(Astro.url.pathname, item)
-                       : item.label}
-                   </span>
-                 )}
-                 {item.children && item.children.length > 0 && (
-                   <IconChevronDown class="dropdown-icon" />
-                 )}
-               </div>
+              <div class="nav-item-content">
+                {(function () {
+                  const IconComponent =
+                    item.children && item.children.length > 0
+                      ? getDisplayIcon(Astro.url.pathname, item)
+                      : item.iconComponent
+                  return IconComponent && <IconComponent class="nav-icon" />
+                })()}
+                {item.label && (
+                  <span class="nav-label">
+                    {item.children && item.children.length > 0
+                      ? getDisplayLabel(Astro.url.pathname, item)
+                      : item.label}
+                  </span>
+                )}
+                {item.children && item.children.length > 0 && (
+                  <IconChevronDown class="dropdown-icon" />
+                )}
+              </div>
             </a>
           </div>
         ))}
@@ -189,9 +210,9 @@ const navSections: NavSection[] = [
                   href={child.href}
                   class={`dropdown-item ${isCurrentPage(Astro.url.pathname, child) ? 'current' : ''}`}
                 >
-                  {(function() {
-                    const ChildIcon = child.iconComponent;
-                    return ChildIcon && <ChildIcon class="dropdown-item-icon" />;
+                  {(function () {
+                    const ChildIcon = child.iconComponent
+                    return ChildIcon && <ChildIcon class="dropdown-item-icon" />
                   })()}
                   <span>{child.label}</span>
                 </a>

From bc38e0b8304747d0775e47ed48598e0719e1a244 Mon Sep 17 00:00:00 2001
From: Saif Ali Shaik <saif.shaik@scalekit.com>
Date: Mon, 22 Sep 2025 16:35:35 +0530
Subject: [PATCH 6/6] elaborate names

---
 src/components/SecondaryNav.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SecondaryNav.astro b/src/components/SecondaryNav.astro
index 4e32cc97..c0108cd5 100644
--- a/src/components/SecondaryNav.astro
+++ b/src/components/SecondaryNav.astro
@@ -102,7 +102,7 @@ const navSections: NavSection[] = [
           },
           {
             href: '/sso/quickstart',
-            label: 'SSO',
+            label: 'Single Sign-on',
             patterns: ['/sso/', '/guides/sso/', '/social-logins/'],
             iconComponent: IconLucideKeyRound,
           },
@@ -114,7 +114,7 @@ const navSections: NavSection[] = [
           },
           {
             href: '/directory/scim/quickstart',
-            label: 'SCIM',
+            label: 'SCIM Provisioning',
             patterns: ['/directory/', '/guides/directory/'],
             iconComponent: IconStreamlineUserSyncOnlineInPersonRemix,
           },