Style sidebar method badges: icon-only, auto-expand, unbold labels

- Change sidebar badges to use icon characters (↙, ↗, ✕, ⚡) matching MethodHeader
- Auto-expand nested groups (collapsed: false)
- Unbold sidebar group labels
- Add CSS for method badge colors matching main content

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: Kyle McLaren

scripts/generate-api-docs.ts

@@ -1197,17 +1197,18 @@ interface SidebarGroup {
 type SidebarItem = SidebarLink | SidebarGroup;
 
 function getMethodBadge(method: string): SidebarBadge {
-  const variants: Record<string, SidebarBadge['variant']> = {
-    GET: 'note',
-    POST: 'success',
-    PUT: 'caution',
-    PATCH: 'caution',
-    DELETE: 'danger',
-    WSS: 'tip',
+  // Icon characters matching MethodHeader component
+  const icons: Record<string, string> = {
+    GET: '↙',
+    POST: '↗',
+    PUT: '↗',
+    PATCH: '↗',
+    DELETE: '✕',
+    WSS: '⚡',
   };
   return {
-    text: method,
-    variant: variants[method.toUpperCase()] || 'default',
+    text: icons[method.toUpperCase()] || method,
+    variant: 'default',
     class: `sidebar-method-${method.toLowerCase()}`,
   };
 }
@@ -1239,7 +1240,7 @@ function generateSidebarItems(
       }));
       items.push({
         label: page.title,
-        collapsed: true,
+        collapsed: false,
         items: endpointItems,
       });
     } else {
@@ -1261,7 +1262,7 @@ function generateSidebarItems(
       }));
       items.push({
         label: getCategoryTitle(category),
-        collapsed: true,
+        collapsed: false,
         items: endpointItems,
       });
     } else {

src/lib/sidebar.ts

@@ -118,147 +118,235 @@ export const sidebarConfig: SidebarGroup[] = [
       { label: 'Overview', slug: `api/${apiVersion}` },
       {
         label: 'Sprites',
-        collapsed: true,
+        collapsed: false,
         items: [
           {
             label: 'Create Sprite',
             link: `/api/${apiVersion}/sprites#create-sprite`,
-            badge: { text: 'POST', variant: 'success' as const },
+            badge: {
+              text: '↗',
+              variant: 'default' as const,
+              class: 'sidebar-method-post',
+            },
           },
           {
             label: 'List Sprites',
             link: `/api/${apiVersion}/sprites#list-sprites`,
-            badge: { text: 'GET', variant: 'note' as const },
+            badge: {
+              text: '↙',
+              variant: 'default' as const,
+              class: 'sidebar-method-get',
+            },
           },
           {
             label: 'Get Sprite',
             link: `/api/${apiVersion}/sprites#get-sprite`,
-            badge: { text: 'GET', variant: 'note' as const },
+            badge: {
+              text: '↙',
+              variant: 'default' as const,
+              class: 'sidebar-method-get',
+            },
           },
           {
             label: 'Update Sprite',
             link: `/api/${apiVersion}/sprites#update-sprite`,
-            badge: { text: 'PUT', variant: 'caution' as const },
+            badge: {
+              text: '↗',
+              variant: 'default' as const,
+              class: 'sidebar-method-put',
+            },
           },
           {
             label: 'Delete Sprite',
             link: `/api/${apiVersion}/sprites#delete-sprite`,
-            badge: { text: 'DELETE', variant: 'danger' as const },
+            badge: {
+              text: '✕',
+              variant: 'default' as const,
+              class: 'sidebar-method-delete',
+            },
           },
         ],
       },
       {
         label: 'Checkpoints',
-        collapsed: true,
+        collapsed: false,
         items: [
           {
             label: 'Create Checkpoint',
             link: `/api/${apiVersion}/checkpoints#create-checkpoint`,
-            badge: { text: 'POST', variant: 'success' as const },
+            badge: {
+              text: '↗',
+              variant: 'default' as const,
+              class: 'sidebar-method-post',
+            },
           },
           {
             label: 'List Checkpoints',
             link: `/api/${apiVersion}/checkpoints#list-checkpoints`,
-            badge: { text: 'GET', variant: 'note' as const },
+            badge: {
+              text: '↙',
+              variant: 'default' as const,
+              class: 'sidebar-method-get',
+            },
           },
           {
             label: 'Get Checkpoint',
             link: `/api/${apiVersion}/checkpoints#get-checkpoint`,
-            badge: { text: 'GET', variant: 'note' as const },
+            badge: {
+              text: '↙',
+              variant: 'default' as const,
+              class: 'sidebar-method-get',
+            },
           },
           {
             label: 'Restore Checkpoint',
             link: `/api/${apiVersion}/checkpoints#restore-checkpoint`,
-            badge: { text: 'POST', variant: 'success' as const },
+            badge: {
+              text: '↗',
+              variant: 'default' as const,
+              class: 'sidebar-method-post',
+            },
           },
         ],
       },
       {
         label: 'Exec',
-        collapsed: true,
+        collapsed: false,
         items: [
           {
             label: 'Execute Command',
             link: `/api/${apiVersion}/exec#execute-command`,
-            badge: { text: 'WSS', variant: 'tip' as const },
+            badge: {
+              text: '⚡',
+              variant: 'default' as const,
+              class: 'sidebar-method-wss',
+            },
           },
           {
             label: 'List Exec Sessions',
             link: `/api/${apiVersion}/exec#list-exec-sessions`,
-            badge: { text: 'GET', variant: 'note' as const },
+            badge: {
+              text: '↙',
+              variant: 'default' as const,
+              class: 'sidebar-method-get',
+            },
           },
           {
             label: 'Attach to Exec Session',
             link: `/api/${apiVersion}/exec#attach-to-exec-session`,
-            badge: { text: 'WSS', variant: 'tip' as const },
+            badge: {
+              text: '⚡',
+              variant: 'default' as const,
+              class: 'sidebar-method-wss',
+            },
           },
           {
             label: 'Kill Exec Session',
             link: `/api/${apiVersion}/exec#kill-exec-session`,
-            badge: { text: 'POST', variant: 'success' as const },
+            badge: {
+              text: '↗',
+              variant: 'default' as const,
+              class: 'sidebar-method-post',
+            },
           },
         ],
       },
       {
         label: 'Policy',
-        collapsed: true,
+        collapsed: false,
         items: [
           {
             label: 'Get Network Policy',
             link: `/api/${apiVersion}/policy#get-network-policy`,
-            badge: { text: 'GET', variant: 'note' as const },
+            badge: {
+              text: '↙',
+              variant: 'default' as const,
+              class: 'sidebar-method-get',
+            },
           },
           {
             label: 'Set Network Policy',
             link: `/api/${apiVersion}/policy#set-network-policy`,
-            badge: { text: 'POST', variant: 'success' as const },
+            badge: {
+              text: '↗',
+              variant: 'default' as const,
+              class: 'sidebar-method-post',
+            },
           },
         ],
       },
       {
         label: 'HTTP Proxy',
-        collapsed: true,
+        collapsed: false,
         items: [
           {
             label: 'TCP Proxy',
             link: `/api/${apiVersion}/proxy#tcp-proxy`,
-            badge: { text: 'WSS', variant: 'tip' as const },
+            badge: {
+              text: '⚡',
+              variant: 'default' as const,
+              class: 'sidebar-method-wss',
+            },
           },
         ],
       },
       {
         label: 'Services',
-        collapsed: true,
+        collapsed: false,
         items: [
           {
             label: 'List Services',
             link: `/api/${apiVersion}/services#list-services`,
-            badge: { text: 'GET', variant: 'note' as const },
+            badge: {
+              text: '↙',
+              variant: 'default' as const,
+              class: 'sidebar-method-get',
+            },
           },
           {
             label: 'Get Service',
             link: `/api/${apiVersion}/services#get-service`,
-            badge: { text: 'GET', variant: 'note' as const },
+            badge: {
+              text: '↙',
+              variant: 'default' as const,
+              class: 'sidebar-method-get',
+            },
           },
           {
             label: 'Create Service',
             link: `/api/${apiVersion}/services#create-service`,
-            badge: { text: 'PUT', variant: 'caution' as const },
+            badge: {
+              text: '↗',
+              variant: 'default' as const,
+              class: 'sidebar-method-put',
+            },
           },
           {
             label: 'Start Service',
             link: `/api/${apiVersion}/services#start-service`,
-            badge: { text: 'POST', variant: 'success' as const },
+            badge: {
+              text: '↗',
+              variant: 'default' as const,
+              class: 'sidebar-method-post',
+            },
           },
           {
             label: 'Stop Service',
             link: `/api/${apiVersion}/services#stop-service`,
-            badge: { text: 'POST', variant: 'success' as const },
+            badge: {
+              text: '↗',
+              variant: 'default' as const,
+              class: 'sidebar-method-post',
+            },
           },
           {
             label: 'Get Service Logs',
             link: `/api/${apiVersion}/services#get-service-logs`,
-            badge: { text: 'GET', variant: 'note' as const },
+            badge: {
+              text: '↙',
+              variant: 'default' as const,
+              class: 'sidebar-method-get',
+            },
           },
         ],
       },

src/styles/custom.css

@@ -1689,3 +1689,58 @@ h2.method-title {
   width: 32px;
   height: 16px;
 }
+
+/* ============================================================================
+   Sidebar Method Badges - Icon-only badges matching main content
+   ============================================================================ */
+
+/* Unbold sidebar group labels (nested groups like Sprites, Checkpoints, etc.) */
+.sidebar-content details > summary > div > span {
+  font-weight: 400 !important;
+}
+
+/* Base badge styling for sidebar method icons */
+.sidebar-content .sl-badge.default {
+  font-family: var(--sl-font-system-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.125rem 0.25rem;
+  margin-left: 0.375rem;
+  border-radius: 0.25rem;
+  line-height: 1;
+}
+
+/* GET - Green (↙ arrow down-left) */
+.sidebar-content .sl-badge.sidebar-method-get {
+  color: var(--http-get);
+  background: var(--http-get-faint);
+  border: 1px solid oklch(0.723 0.219 142.7 / 0.3);
+}
+
+/* POST - Blue (↗ arrow up-right) */
+.sidebar-content .sl-badge.sidebar-method-post {
+  color: var(--http-post);
+  background: var(--http-post-faint);
+  border: 1px solid oklch(0.623 0.214 259 / 0.3);
+}
+
+/* PUT - Orange (↗ arrow up-right, same as POST) */
+.sidebar-content .sl-badge.sidebar-method-put {
+  color: var(--http-put);
+  background: var(--http-put-faint);
+  border: 1px solid oklch(0.705 0.213 47.6 / 0.3);
+}
+
+/* DELETE - Red (✕) */
+.sidebar-content .sl-badge.sidebar-method-delete {
+  color: var(--http-delete);
+  background: var(--http-delete-faint);
+  border: 1px solid oklch(0.577 0.245 27.3 / 0.3);
+}
+
+/* WSS - Purple (⚡) */
+.sidebar-content .sl-badge.sidebar-method-wss {
+  color: var(--http-ws);
+  background: var(--http-ws-faint);
+  border: 1px solid oklch(0.558 0.288 302.3 / 0.3);
+}