Restyle follow-ups: mobile hamburger sidebar + dark-mode alert heading#5254
Merged
Conversation
The restyle merged (dapr#5253) exposed a Docsy 'sidebar_search_disable' breakpoint mismatch: Docsy force-shows .td-sidebar-nav at md (>=768px) while the mobile menu container (#content-mobile) and toggle only appear below lg, and the hamburger button was d-md-none (hidden >=768px). So at 768-992px (tablets / landscape phones) the full sidebar showed with no toggle. Fix (layouts + CSS only, no content): - sidebar.html: hamburger toggle d-md-none -> d-lg-none (visible below lg). - _sidebar.scss: below lg, keep .td-sidebar-nav collapsed until the hamburger opens it (override the md force-show), and stack the sidebar + main full-width so the sidebar reads as a collapsible menu bar (bottom border) instead of a cramped 25% side column. Force the hamburger's Font Awesome weight so the fa-bars glyph renders. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Docsy sets fixed light-theme colors on .alert-* .alert-heading (e.g.
.alert-primary .alert-heading { color:#0D2192 }); the dark-blue primary heading
was illegible on the dark callout background. Re-mapped to --d-* tokens that
flip per theme — light values match Docsy's (no light-mode change), dark values
stay legible. Also covers the matching .pageinfo-* headings.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
msfussell
approved these changes
Jul 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up fixes for the docs restyle (#5253)
Two small fixes to the merged restyle. Layouts + CSS only — no content changes.
1. Mobile / tablet: sidebar as a hamburger menu below
lgThe site sets
sidebar_search_disable, which surfaced a Docsy breakpoint mismatch: Docsy force-shows.td-sidebar-navatmd(≥768px), while the mobile menu container (#content-mobile) and toggle only appear belowlg, and the hamburger button wasd-md-none(hidden ≥768px). So at 768–992px (tablets and landscape/larger phones) the full left nav showed with no toggle.sidebar.html: hamburger toggled-md-none→d-lg-none(visible belowlg)._sidebar.scss: belowlg, keep.td-sidebar-navcollapsed until the hamburger opens it (override themdforce-show); stack the sidebar + main full-width so it reads as a collapsible menu bar (bottom border) instead of a cramped 25% side column; and force the hamburger's Font Awesome weight so thefa-barsglyph renders.Net: below 992px the left nav is a hamburger menu; at ≥992px the normal sidebar.
2. Dark mode:
.alert-headingwas illegibleDocsy hardcodes light-theme colors on
.alert-* .alert-heading(e.g..alert-primary .alert-heading { color:#0D2192 }). The default{{% alert %}}isalert-primary, so its dark-blue heading was invisible on the dark callout background._callouts.scss: re-map each.alert-* .alert-heading(and the matching.pageinfo-*) to--d-*tokens that flip per theme. Light values match Docsy's (no light-mode change); dark values stay legible.Testing
Previewed locally via
hugo server(macOS). Resize under ~992px to see the hamburger sidebar; toggle dark mode on a page with an alert to see the legible heading. Nodaprdocs/content/**orsdkdocs/**files changed.🤖 Generated with Claude Code