refactor: refactoring navbars

[jderochervlk]

This refactors the navbar to not be so brittile and depend on checking height for layouts. The main change is using the modern html dialog component for the mobile menus and switching the header to use sticky to stay in place. Now the content body doesn't need to add margin or padding to account for any headers, they just show up above and can stack easily.

There will be some more refactors soon to split up the mdx route, but one thing at a time.

AI summary

This pull request introduces significant improvements to the navigation and documentation layout, particularly around the API and documentation pages. It adds new responsive navigation bar tests, refactors and enhances the tertiary navbar and sidebar for API and docs routes, and automates the management of Vitest screenshot updates. Additionally, it updates the routing and configuration for better scalability and maintainability.

Navigation and Layout Enhancements:

• Introduced and integrated NavbarSecondary and NavbarTertiary components across API and documentation routes, providing consistent breadcrumbs, sidebar content, and edit links for improved user navigation and editing experience. The sidebar now adapts based on route and viewport, supporting mobile drawer toggling and version selection. (app/routes/ApiRoute.res, app/routes/MdxRoute.res, app/routes/SyntaxLookupRoute.res, [1] [2] [3] [4] [5] [6]
• Refactored the main app layout to simplify the root structure and ensure the new navbars are rendered appropriately. (app/root.res, [1] [2]

Testing and Automation Improvements:

• Added comprehensive, responsive UI tests for NavbarPrimary and NavbarTertiary, covering desktop, tablet, and mobile scenarios, including screenshot assertions for visual regression testing. (__tests__/NavbarPrimary_.test.res, __tests__/NavbarTertiary_.test.res, [1] [2]
• Automated the process of committing and pushing updated Vitest screenshots after test runs, ensuring that visual changes are consistently tracked in CI. (.github/workflows/pull-request.yml, [1] [2]

Routing and Configuration Updates:

• Improved route definitions by precomputing mdxRoutes and streamlining their inclusion, and added support for a new "guide" section in the markdown and routing configuration. (app/routes.res, react-router.config.mjs, [1] [2] [3]
• Updated the test script to always update screenshots on CI runs, and adjusted test/dev dependencies configuration for clarity. (package.json, rescript.json, [1] [2]

Component and Internal Refactoring:

• Simplified the ApiDocs.SidebarTree and RightSidebar components to remove unused props and streamline sidebar rendering logic. (src/ApiDocs.res, [1] [2]

Miscellaneous:

• Removed unused debug logging from the Open Graph image function. (functions/ogimage/[[path]]/index.png.res, functions/ogimage/[[path]]/index.png.resL19-L20)
• Removed an obsolete example test file. (__tests__/Example.test.res, tests/Example.test.resL1-L28)

[fhammerschmidt]

this broke the version dropdown

[github-actions]

Cloudflare deployment

Deployement ID: ff01d9b8-1b4b-490e-8de4-1303833ffca1
Deployment Environment: preview

⛅️ wrangler 4.63.0 (update available 4.66.0)
─────────────────────────────────────────────
✨ Compiled Worker successfully
Uploading... (6804/7224)
Uploading... (6944/7224)
Uploading... (7084/7224)
Uploading... (7224/7224)
✨ Success! Uploaded 420 files (6804 already uploaded) (5.65 sec)

✨ Uploading _redirects
✨ Uploading Functions bundle
🌎 Deploying...
✨ Deployment complete! Take a peek over at https://ff01d9b8.rescript-lang.pages.dev
✨ Deployment alias URL: https://vlk-refactor-navigation.rescript-lang.pages.dev

[jderochervlk]

this broke the version dropdown

Fixed and I added a unit test.