Skip to content

docs: fix nav bar icons and spacing#33

Merged
rachaelrenk merged 3 commits intomainfrom
docs/migration-ff/nav-bar-polish
May 8, 2026
Merged

docs: fix nav bar icons and spacing#33
rachaelrenk merged 3 commits intomainfrom
docs/migration-ff/nav-bar-polish

Conversation

@rachaelrenk
Copy link
Copy Markdown
Contributor

@rachaelrenk rachaelrenk commented May 7, 2026

Summary

Fix duplicate and unfitting icons in the top nav bar, and improve link spacing for better readability and click targets.

Changes

src/sidebar.ts

  • Guides: puzzle to rocket -- Guides and Agents were both using puzzle, making them visually indistinguishable. rocket conveys "tutorials / getting started" and is unique across the nav.
  • Enterprise: star to setting -- star is generic and doesn't convey "enterprise admin/governance." setting (gear icon) is the convention for admin surfaces.

src/components/WarpTopicNav.astro

  • Doubled horizontal link padding (0.125rem to 0.25rem) for better click targets and breathing room between items.

Note on icon visibility

The icon changes in sidebar.ts are not visible at most viewport widths. WarpTopicNav.astro hides icons below 80rem (1280px) via a media query, so with 8 topics most users' screens trigger this breakpoint.

The icon changes still apply to:

  • Very wide viewports (above 1280px) where icons are shown in the header nav
  • Mobile drawer sidebar -- the starlight-sidebar-topics plugin renders its own icon set from sidebar.ts, which is always visible in the mobile menu

Context

Part of the docs v2 bug bash follow-up work. Tracks to Notion item: Migration FF: nav bar polish.

Co-Authored-By: Oz oz-agent@warp.dev

rachaelrenk and others added 2 commits May 7, 2026 11:11
- Guides: puzzle → rocket (was duplicate of Agents icon)
- Enterprise: star → setting (better conveys admin/governance)
- Nav links: double horizontal padding (0.125rem → 0.25rem) for
  better click targets and breathing room

Co-Authored-By: Oz <oz-agent@warp.dev>
@cla-bot cla-bot Bot added the cla-signed label May 7, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented May 7, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
docs Ready Ready Preview, Comment May 8, 2026 1:02am

Request Review

Comment thread src/sidebar.ts
icon: 'star',
label: 'Enterprise',
link: '/enterprise/',
icon: 'setting',
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if setting is the right icon here, are there any other icons that might work? I don't feel too strongly, idk if there's an office building icon or something like that lol

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a custom SVG of a simple building!

Add an office building inline SVG for the Enterprise topic in
WarpTopicNav.astro, replacing the gear icon per review feedback.
The building has a simple outline with window dots and entrance,
stroke-matched to the other custom icons (robot, brackets).

sidebar.ts keeps star as the mobile drawer fallback since custom
SVGs can't be used in the starlight-sidebar-topics plugin.

Co-Authored-By: Oz <oz-agent@warp.dev>
@rachaelrenk rachaelrenk merged commit 6371960 into main May 8, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants