Skip to content

[WIP] Test a horizontal docs nav#3303

Draft
m-hulbert wants to merge 17 commits intomainfrom
docs-nav-update
Draft

[WIP] Test a horizontal docs nav#3303
m-hulbert wants to merge 17 commits intomainfrom
docs-nav-update

Conversation

@m-hulbert
Copy link
Copy Markdown
Contributor

Description

This is a draft PR experimenting with changing the docs navigation to be a horizontal product menu.

@m-hulbert m-hulbert self-assigned this Mar 27, 2026
@m-hulbert m-hulbert added the review-app Create a Heroku review app label Mar 27, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 27, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 9b912045-be14-483a-aa76-837dc05a2454

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs-nav-update

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ably-ci ably-ci temporarily deployed to ably-docs-docs-nav-upda-eow4fy March 27, 2026 17:47 Inactive
@m-hulbert m-hulbert temporarily deployed to ably-docs-docs-nav-upda-eow4fy March 27, 2026 18:36 Inactive
@m-hulbert m-hulbert force-pushed the docs-nav-update branch 2 times, most recently from b9f0cb9 to 2d36151 Compare April 13, 2026 15:51
m-hulbert and others added 8 commits April 13, 2026 17:05
New components to support the navigation redesign:
- ProductBar: horizontal product switcher shown below the header
- CopyForLLM: dropdown menu for markdown copy/view and LLM links
- useShowLanguageSelector: extracted hook for language selector visibility
- PRODUCT_BAR_HEIGHT constant for derived sticky offsets

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace Documentation/Examples TabMenu with three discrete nav links.
Header is now fixed with max-width inner container so content aligns
with the body while the background spans full viewport width. Search
bar moved to center of header. Added comments to shadow DOM queries
for Inkeep widget interaction.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Move Header and ProductBar outside max-width container so their
backgrounds and borders span the full viewport. Add pt-16 offset
for fixed header. Integrate CopyForLLM into breadcrumb bar.
Remove mt-8 from breadcrumbs, add min-w-0 for overflow safety.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace product accordion with SectionNav that renders top-level
sections as static headings, always expanded. Sidebar now shows only
the active product's navigation. Derive sticky offset from
HEADER_HEIGHT + PRODUCT_BAR_HEIGHT constants instead of hardcoded
pixel values. Left border and indent only apply at layer 2+ to
avoid visual noise on direct children of section headings. Remove
duplicate inkeep-search-mount ID that conflicted with header.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…nstants

Language selector relocated from PageHeader to RightSidebar for
better layout balance. Derive sticky offset from HEADER_HEIGHT +
PRODUCT_BAR_HEIGHT constants instead of hardcoded top-[108px].

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove markdown fetching, LLM links, language selector, and clipboard
logic from PageHeader — all moved to CopyForLLM and RightSidebar.
PageHeader now only renders title and intro text.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
LeftSidebar tests updated for single-product nav with static section
headings. RightSidebar tests mock new LanguageSelector and
useShowLanguageSelector dependencies.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Remove left sidebar from homepage
- Fix left nav scroll so it works independently of main content
- Adjust nav item padding (4px top/bottom) and heading spacing (20px/6px)
- Align first nav heading with breadcrumb row
- Left border/indent only on layer 2+ nav items
- Remove horizontal rule between language selector and "On this page"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@m-hulbert m-hulbert temporarily deployed to ably-docs-docs-nav-upda-5un0m0 April 13, 2026 16:11 Inactive
m-hulbert and others added 9 commits April 16, 2026 19:42
…ctor

Add shadcn-based UI components (Input, ButtonGroup, Separator) and
install class-variance-authority and @radix-ui/react-separator deps.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ctor

Refactor CopyForLLM to use ButtonGroup split button pattern and always
show View/Copy markdown items in dropdown above LLM links.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Use shadcn Input for search bar, render Ask AI button unconditionally,
set search bar to 200px with neutral-100 background.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…orders

Set product nav icons to 20px and button height to h-9.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Use font-semibold for active state, chevron-right-solid icon, and only
scroll sidebar when active item is off-screen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Standardise all chevron icons to -solid variant at 12px, use md
breakpoints for breadcrumb responsiveness, and allow breadcrumbs to wrap.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…orders

Restore responsive padding on content area, add left padding for sidebar
breathing room, centre content with mx-auto, replace right sidebar
box-shadow with border-l, and set right sidebar to w-60.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Use shadcn Input component on examples search bar for parity with
header search styling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…orders

Widen content area from 860px to 960px.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

review-app Create a Heroku review app

Development

Successfully merging this pull request may close these issues.

2 participants