Skip to content

fix(www): mobile navigation drawer, logo alignment, header cleanup - #47

Merged
sigurdarson merged 12 commits into
mainfrom
chore/documentation-fixes
Sep 6, 2026
Merged

fix(www): mobile navigation drawer, logo alignment, header cleanup#47
sigurdarson merged 12 commits into
mainfrom
chore/documentation-fixes

Conversation

@sigurdarson

@sigurdarson sigurdarson commented Sep 6, 2026

Copy link
Copy Markdown
Owner

What

  • Mobile: the sidebar becomes a left Drawer (the Bones component, so focus trapping, Escape, and swipe-to-close come for free) opened from a secondary menu button in the header under 760px; it closes on route change, fills the panel, and the drawer scrolls as one (no inner scroll region).
  • Header: theme toggle first, then a secondary button carrying the GitHub mark (a one-off site component, not an icon name) and the current version read from the react package at build time; the Configurator placeholder is removed.
  • Desktop: the logo gets 0.75rem inline padding to align with the sidebar text (desktop only).
  • Home page: the title reads Components with good bones (common noun), sits at the same height as every other page, and loses its duplicate GitHub button.
  • icons: a menu glyph (Lucide Menu, Hugeicons Menu01Icon in the site's alternate set), listed on the Icons page, with a changelog entry.

Verified

  • pnpm build, typecheck, and test green; the prerendered header carries the nav toggle and version, no configurator text remains.
  • Preview: the drawer at phone width in both themes, open via button, close via link, Escape, backdrop, and swipe.

On narrow screens the sidebar becomes a Bones Drawer opened from a menu
button in the header (focus trap, Escape, and swipe to close for free)
that closes itself on navigation; the layout sidebar hides there and
the Configurator placeholder button leaves the header. On desktop the
logo gets the same 0.75rem inline padding as the sidebar items so it
lines up with the nav text. The icon set gains a menu glyph.
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Sep 6, 2026

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
✅ Deployment successful!
View logs
usebones-www 6c8b894 Sep 06 2026, 05:52 PM

Inside the drawer's flex column the nav kept its own overflow rule, so
it was squeezed to the panel height and scrolled in the middle. It is
now a stretched block with no scroll region of its own.
…rule

The override sat earlier in the stylesheet than the base .sidebar rule
at equal specificity, so it never applied: the nav kept its own scroll
region and start alignment. A compound selector wins regardless of
order.
…irst

The header actions are now theme toggle, then a secondary button with
the GitHub mark that reads the current version straight from the react
package, then the configurator placeholder. The icon set gains github
as a filled brand mark (stroke sets carry none).
@sigurdarson
sigurdarson merged commit fb35885 into main Sep 6, 2026
2 checks passed
@sigurdarson
sigurdarson deleted the chore/documentation-fixes branch September 6, 2026 17:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant