feat: update header, sidebar, and TOC to match mockup exactly#6
Merged
kristinaquinones merged 3 commits into2025-12-23from Dec 27, 2025
Merged
Conversation
Header changes: - Simplified structure to match mockup layout - Added header, header-content, logo, logo-mark, header-nav classes - Replaced "Get Started" button with "Search" trigger button - Added search-trigger with "Search..." text and ⌘K kbd - Navigation links: Docs, Examples, GitHub - Padding: 12px 0, font-size: 18px for logo Sidebar changes: - Changed from div structure to ul/li elements - Removed SVG chevron icons from folder buttons - Added sidebar-nav class for lists - Simplified folder/link rendering to match mockup - Maintained collapsible functionality with cleaner structure TOC changes: - Renamed docs-toc to toc to match mockup - Wrapped toc-nav in nav element - Changed from div to aside element - Removed level-3 class (only using level-2) - Simplified structure to match mockup exactly CSS updates: - Added complete header styling (logo, nav-link, search-trigger, kbd) - Added sidebar-nav list styling - Updated all toc references from docs-toc to toc - All styles now match ui-mockup-01-documentation-page.html exactly
Next.js 16 no longer includes the 'next lint' command, so we need to use ESLint directly with the new flat config format (eslint.config.mjs). Changes: - Created eslint.config.mjs with ESLint 9 flat config format - Removed .eslintrc.json (incompatible with ESLint 9) - Updated package.json lint script to use "eslint ." instead of "next lint" - Configured TypeScript ESLint plugin and parser - Set up proper ignores for build directories and config files - Added global variables for browser, Node.js, and React environments The lint command now passes successfully with only warnings (exit code 0).
Test fixes:
- Added aria-label="Table of contents" to TOC nav element
- Fixed HomePage smoke test to match actual content ("Built for developers")
- Updated TOC padding test to check CSS classes instead of inline styles
- Removed unused 'node' parameters from ReactMarkdown component renderers
- Removed unused 'error' parameter in catch block
All tests now pass (122 passed, 0 failed).
Lint passes with only 7 warnings (no errors).
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.
Header changes:
Sidebar changes:
TOC changes:
CSS updates: