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
This commit is contained in:
Vijay Janapa Reddi
2025-08-03 22:20:22 -04:00
parent 3bb6f6983b
commit 8458ebd22a
2 changed files with 51 additions and 44 deletions

View File

@@ -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

View File

@@ -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: |