From bd376fe97604f3fafd16052815d539d0f898ef0f Mon Sep 17 00:00:00 2001
From: Teknium <teknium1@gmail.com>
Date: Mon, 30 Mar 2026 13:20:55 -0700
Subject: [PATCH] fix(docs): improve mobile sidebar navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sidebar had all categories expanded by default (collapsed: false),
which on mobile created a 60+ item flat list when opening the sidebar.
Reported by danny on Discord.

Changes:
- Set all top-level categories to collapsed: true (tap to expand)
- Enable autoCollapseCategories: true (accordion — opening one section
  closes others, prevents the overwhelming flat list)
- Enable hideable sidebar (swipe-to-dismiss on mobile)
- Add mobile CSS: larger touch targets (0.75rem padding), bolder
  category headers, visible subcategory indentation with left border,
  wider sidebar (85vw / 360px max), darker backdrop overlay
---
 website/docusaurus.config.ts |  6 ++++++
 website/sidebars.ts          |  6 +++---
 website/src/css/custom.css   | 40 ++++++++++++++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index 6d8b52bfe..bbd7d4ea9 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -65,6 +65,12 @@ const config: Config = {
       defaultMode: 'dark',
       respectPrefersColorScheme: true,
     },
+    docs: {
+      sidebar: {
+        hideable: true,
+        autoCollapseCategories: true,
+      },
+    },
     navbar: {
       title: 'Hermes Agent',
       logo: {
diff --git a/website/sidebars.ts b/website/sidebars.ts
index 082b9ce8f..4c7bfc2e2 100644
--- a/website/sidebars.ts
+++ b/website/sidebars.ts
@@ -5,7 +5,7 @@ const sidebars: SidebarsConfig = {
     {
       type: 'category',
       label: 'Getting Started',
-      collapsed: false,
+      collapsed: true,
       items: [
         'getting-started/quickstart',
         'getting-started/installation',
@@ -17,7 +17,7 @@ const sidebars: SidebarsConfig = {
     {
       type: 'category',
       label: 'Guides & Tutorials',
-      collapsed: false,
+      collapsed: true,
       items: [
         'guides/tips',
         'guides/daily-briefing-bot',
@@ -32,7 +32,7 @@ const sidebars: SidebarsConfig = {
     {
       type: 'category',
       label: 'User Guide',
-      collapsed: false,
+      collapsed: true,
       items: [
         'user-guide/cli',
         'user-guide/configuration',
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 1df449986..7c7000391 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -199,6 +199,46 @@ pre.prism-code.language-ascii code {
   border: 1px solid rgba(255, 215, 0, 0.08);
 }
 
+/* ─── Mobile sidebar improvements ─────────────────────────────────────────── */
+
+/* Larger touch targets on mobile */
+@media (max-width: 996px) {
+  .menu__link {
+    padding: 0.6rem 0.75rem;
+    font-size: 0.95rem;
+  }
+
+  .menu__list-item-collapsible > .menu__link {
+    font-weight: 600;
+    font-size: 1rem;
+    padding: 0.75rem 0.75rem;
+    border-bottom: 1px solid rgba(255, 215, 0, 0.06);
+  }
+
+  /* Category caret — more visible */
+  .menu__caret::before {
+    background-size: 1.5rem 1.5rem;
+  }
+
+  /* Indent subcategories clearly */
+  .menu__list .menu__list {
+    padding-left: 0.75rem;
+    border-left: 1px solid rgba(255, 215, 0, 0.06);
+    margin-left: 0.5rem;
+  }
+
+  /* Sidebar overlay — slightly more opaque for readability */
+  .navbar-sidebar__backdrop {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  /* Sidebar width on mobile — use more of the screen */
+  .navbar-sidebar {
+    width: 85vw;
+    max-width: 360px;
+  }
+}
+
 /* Hero banner for docs landing if needed */
 .hero--hermes {
   background: linear-gradient(135deg, #07070d 0%, #0f0f18 100%);