From 8458ebd22a747796b1795d365f49094cf563c84d Mon Sep 17 00:00:00 2001
From: Vijay Janapa Reddi <vj@eecs.harvard.edu>
Date: Sun, 3 Aug 2025 22:20:22 -0400
Subject: [PATCH] feat(ui): improve mobile navbar responsiveness and cleanup

- Fix mobile navbar collapse behavior and layout
- Resolve GitHub dropdown highlighting issue in hamburger menu
- Position search bar properly on mobile without white space
- Clean up TOC by disabling duplicate repo-actions
- Ensure all navigation items collapse into hamburger menu appropriately
- Style secondary tools (Star, Support, GitHub, PDF) in subdued grey
- Improve overall mobile user experience and visual consistency
---
 book/assets/styles/style.scss | 92 +++++++++++++++++++----------------
 book/config/_quarto-html.yml  |  3 +-
 2 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/book/assets/styles/style.scss b/book/assets/styles/style.scss
index 4719425e7..a0ad6d890 100644
--- a/book/assets/styles/style.scss
+++ b/book/assets/styles/style.scss
@@ -26,17 +26,37 @@ a {
 
 // Navigation link styles - also subtle for consistency
 .navbar-nav .nav-link {
-  color: #6c757d;
+  color: #6c757d !important;
   font-weight: 400;
   
   &:hover {
-    color: $crimson;
+    color: $crimson !important;
   }
   
   &.active {
-    color: $crimson;
+    color: $crimson !important;
     font-weight: 500;
   }
+  
+  // Override global link visited state for navbar
+  &:visited {
+    color: #6c757d !important;
+  }
+  
+  // Ensure dropdown toggles don't get crimson color - even when marked active
+  &.dropdown-toggle {
+    color: #6c757d !important;
+    
+    &:visited, &:focus {
+      color: #6c757d !important;
+    }
+    
+    // Override active state for dropdown toggles specifically
+    &.active {
+      color: #6c757d !important;
+      font-weight: 400 !important;
+    }
+  }
 }
 
 // Sidebar link styles - readable but secondary to main content
@@ -748,24 +768,39 @@ figcaption.quarto-float-caption-top {
     display: none !important;
   }
   
-  // UX: Aggressive search positioning to eliminate all white space
-  .navbar .navbar-nav .search-input,
-  .navbar .aa-Form,
-  .navbar-nav .aa-Form {
-    margin: 0 !important;
+  // Target Quarto's specific page layout classes that add spacing
+  body.page-navbar #quarto-header.headroom.fixed-top {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+  
+  // Remove spacing from Quarto container structure
+  .quarto-container.page-columns {
     padding: 0 !important;
-    min-width: 44px !important;
+    margin: 0 !important;
+  }
+  
+  // Target the navbar within Quarto's structure
+  .page-navbar .navbar {
+    padding-left: 1rem !important;
+    padding-right: 0 !important;
+  }
+  
+  // Position search bar flush to edge
+  .navbar .aa-Form {
     position: absolute !important;
     right: 0.5rem !important;
     top: 50% !important;
     transform: translateY(-50%) !important;
-  }
-  
-  // Remove any container margins that create white space
-  .navbar-nav:has(.aa-Form),
-  .navbar .navbar-nav:last-child {
     margin: 0 !important;
     padding: 0 !important;
+    min-width: 44px !important;
+  }
+  
+  // Ensure navbar content doesn't overflow
+  .navbar .container-fluid {
+    max-width: 100% !important;
+    padding-right: 60px !important; // Space for search
   }
   
   // Improve main search bar on mobile (outside hamburger)
@@ -1105,33 +1140,6 @@ figcaption.quarto-float-caption-top {
   }
 }
 
-// Navbar active states for Labs, Kits, PDF
-.navbar-nav .nav-link {
-  color: #6c757d !important;
-  font-weight: 400;
-  transition: all 0.2s ease;
-  
-  &:hover {
-    color: $crimson !important;
-    font-weight: 500;
-  }
-  
-  &.active, &[aria-current="page"] {
-    color: $crimson !important;
-    font-weight: 500;
-  }
-}
-
-// Ensure navbar right side (Labs, Kits, PDF) get active states
-.navbar .navbar-nav .nav-item .nav-link {
-  &:hover {
-    color: $crimson !important;
-  }
-  
-  &.active {
-    color: $crimson !important;
-    font-weight: 500;
-  }
-}
+// Removed duplicate navbar rules - already handled earlier in file
 
 
diff --git a/book/config/_quarto-html.yml b/book/config/_quarto-html.yml
index e92e1c042..154e97b3c 100644
--- a/book/config/_quarto-html.yml
+++ b/book/config/_quarto-html.yml
@@ -101,7 +101,7 @@ website:
             href: https://github.com/harvard-edge/cs249r_book
 
   favicon: assets/images/icons/favicon.png
-
+  
   sidebar:
     - id: main-content
       title: "Main Content"
@@ -307,7 +307,6 @@ website:
 
   repo-url: https://github.com/harvard-edge/cs249r_book
   repo-branch: widget_quiz
-  repo-actions: [edit, issue, source]
 
   page-footer:
     left: |