From 75058391e3f81a489193024e4074bad5ca11188c Mon Sep 17 00:00:00 2001
From: Brandon Hopkins <76761586+TechHutTV@users.noreply.github.com>
Date: Tue, 18 Aug 2026 12:10:01 -0700
Subject: [PATCH] Toned-down Agent Network sidebar entry styling (#935)

---
 src/components/NavigationDocs.jsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/components/NavigationDocs.jsx b/src/components/NavigationDocs.jsx
index 3f862218..7463b228 100644
--- a/src/components/NavigationDocs.jsx
+++ b/src/components/NavigationDocs.jsx
@@ -461,11 +461,11 @@ export const docsNavigation = [
     },
     {
         title: 'AGENT NETWORK',
-        // Featured highlight: any group with `featured: true` renders as the
-        // card at the top of the sidebar, with an optional `badge`. isOpen:false
-        // keeps this card collapsed by default, while the other top-level
-        // sections start expanded. To spotlight a different product later, move
-        // these lines to its group; remove them to drop the card entirely.
+        // Featured highlight: any group with `featured: true` is pinned to the
+        // top of the sidebar, with an optional `badge` pill. isOpen:false keeps
+        // it collapsed by default, while the other top-level sections start
+        // expanded. To spotlight a different product later, move these lines to
+        // its group; remove them to drop the highlight entirely.
         featured: true,
         badge: 'New',
         isOpen: false,
@@ -473,6 +473,7 @@ export const docsNavigation = [
             {
                 title: 'Getting Started',
                 href: '/agent-network',
+                isOpen: true,
                 links: [
                     { title: 'What is Agent Network?', href: '/agent-network' },
                     { title: 'How It Works', href: '/agent-network/how-it-works' },
@@ -1198,16 +1199,10 @@ export function NavigationDocs({ className }) {
                 {docsNavigation.map((group, groupIndex) =>
                     group.featured ? (
                         <NavigationStateProvider key={group.title} index={groupIndex}>
-                            <NavigationGroup group={group} index={groupIndex} className="md:mt-0" />
+                            <NavigationGroup group={group} index={groupIndex} className="mb-6 md:mt-0" />
                         </NavigationStateProvider>
                     ) : null
                 )}
-                {docsNavigation.some((group) => group.featured) && (
-                    <li
-                        aria-hidden="true"
-                        className="my-4 border-t border-zinc-900/10 dark:border-white/10"
-                    />
-                )}
                 {docsNavigation.map((group, groupIndex) =>
                     group.featured ? null : (
                         <NavigationStateProvider key={group.title} index={groupIndex}>
@@ -1273,7 +1268,7 @@ function NavigationGroup({ group, className, hasChildren }) {
                 className={clsx(
                     'group flex items-center justify-between gap-2',
                     isFeatured
-                        ? 'cursor-pointer select-none rounded-lg border border-netbird/30 bg-netbird/5 px-3 py-2 text-xs font-bold uppercase tracking-wide text-netbird transition hover:bg-netbird/10'
+                        ? '-mx-[9px] cursor-pointer select-none rounded-md border border-netbird/20 px-2 py-1.5 text-xs font-semibold text-zinc-900 transition hover:bg-netbird/5 dark:text-white'
                         : hasChildren
                         ? 'cursor-pointer select-none py-1 pr-3 text-sm font-medium text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white'
                         : 'cursor-pointer select-none text-xs font-semibold text-zinc-900 dark:text-white',