From d5aafffcb46a6879b31c35984aa1ac557c6969c5 Mon Sep 17 00:00:00 2001
From: Rizel Scarlett <rizel@squareup.com>
Date: Thu, 12 Jun 2025 17:35:51 -0400
Subject: [PATCH] Docs: Fix Nav Bar and wrong command in docs (#2889)

---
 .../docs/guides/smart-context-management.md   |  5 ---
 documentation/src/css/custom.css              | 44 +++++++++++++++++++
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/documentation/docs/guides/smart-context-management.md b/documentation/docs/guides/smart-context-management.md
index eda9ac8f..06d9c493 100644
--- a/documentation/docs/guides/smart-context-management.md
+++ b/documentation/docs/guides/smart-context-management.md
@@ -70,11 +70,6 @@ export GOOSE_CONTEXT_STRATEGY=clear      # Automatically clear session
 export GOOSE_CONTEXT_STRATEGY=prompt     # Always prompt user (default)
 ```
 
-Or configure it permanently:
-```bash
-goose configure set GOOSE_CONTEXT_STRATEGY summarize
-```
-
 **Default behavior:**
 - **Interactive mode**: Prompts user to choose (equivalent to `prompt`)
 - **Headless mode** (`goose run`): Automatically summarizes (equivalent to `summarize`)
diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css
index d25d59f9..09fbd575 100644
--- a/documentation/src/css/custom.css
+++ b/documentation/src/css/custom.css
@@ -301,9 +301,17 @@ html[data-theme="light"] .hide-in-light {
   border-bottom: 1px solid var(--border-divider);
 }
 
+/* Smooth transitions for navbar items */
 .navbar__item {
   display: flex;
   align-items: center;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.navbar__toggle {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  opacity: 0;
+  transform: scale(0.8);
 }
 
 /* Dropdown styles */
@@ -329,6 +337,42 @@ html[data-theme="light"] .hide-in-light {
   margin-left: 8px !important;
 }
 
+/* Force hamburger menu to appear earlier to prevent navbar overlap with smooth transitions */
+@media (max-width: 1350px) {
+  .navbar__item {
+    opacity: 0;
+    transform: translateX(-10px);
+    pointer-events: none;
+    /* Use visibility instead of display for smoother transitions */
+    visibility: hidden;
+  }
+  
+  .navbar__toggle {
+    opacity: 1 !important;
+    transform: scale(1) !important;
+    display: inherit !important;
+  }
+  
+  .navbar-sidebar {
+    display: block;
+  }
+}
+
+/* Ensure navbar items are visible above the breakpoint */
+@media (min-width: 1351px) {
+  .navbar__item {
+    opacity: 1;
+    transform: translateX(0);
+    pointer-events: auto;
+    visibility: visible;
+  }
+  
+  .navbar__toggle {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+
 .carousel-image {
   width: 100%;      /* Make the image fill the width */
   object-fit: cover; /* Ensure the image covers the area while maintaining aspect ratio */