Skip to content

Migrate navigation from Bootstrap to Radix UI#712

Closed
GuiBibeau wants to merge 19 commits into
solana-foundation:mainfrom
GuiBibeau:feat-migrate-header
Closed

Migrate navigation from Bootstrap to Radix UI#712
GuiBibeau wants to merge 19 commits into
solana-foundation:mainfrom
GuiBibeau:feat-migrate-header

Conversation

@GuiBibeau

Copy link
Copy Markdown
Contributor

Problem

The existing navigation component uses Bootstrap which is inconsistent with the modern UI component architecture. The navigation needs to be migrated to use Radix UI components for better maintainability and consistency.

Summary of Changes

  • Created new Navigation components using Radix UI in @solana/ui-components package
  • Implemented NavigationAdapter to transform translation structure to new component format
  • Added shared Tailwind configuration package for consistent styling
  • Integrated Next.js Link for client-side navigation
  • Removed legacy Bootstrap navigation components
  • Configured column widths and styling to match original design exactly
  • Simplified TypeScript configuration with shared base config

@vercel

vercel Bot commented Aug 19, 2025

Copy link
Copy Markdown

@GuiBibeau is attempting to deploy a commit to the Solana Foundation Team on Vercel.

A member of the Team first needs to authorize it.

- Add alignOffset to shift dropdowns 30px to the left
- Improves visual alignment for right-side menu items
@vercel

vercel Bot commented Aug 19, 2025

Copy link
Copy Markdown

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

Project Deployment Preview Updated (UTC)
solana-com Ready Ready Preview Aug 21, 2025 8:17pm

- Rename HeaderNew to Header for consistency
- Move conditional logic into component body
- Extract showDevelopersNav variable for clarity
- Change from named import to default import for solanaPreset
- Add future property to prevent PostCSS errors
- Clean up debug code
- Add .nvmrc file with Node 22
- Add engines field to package.json requiring Node >=22.0.0
- Ensures CI and local development use compatible Node version
- Create test-formatting workflow using Node 22
- Keep Node 22 requirement in package.json and .nvmrc
- Use actions/setup-node@v4 which supports Node 22
- Add CI workflow for formatting, linting, and building
- Use node-version-file to read from .nvmrc
- Ensures all CI jobs use Node 22 consistently
- Fixes cheerio compatibility issue (requires Node >=20.18.1)
Define NODE_VERSION once as an environment variable to avoid duplication.
Both jobs now reference the same version (22) via env.NODE_VERSION.
- Add override modifiers to React component lifecycle methods in token-transitions.client.tsx
- Add explicit return type to useInkeepConfig function to resolve external module type naming issue
- Add isThemePage property to ThemeContext initial value for type consistency
- Add type guard for string check before calling replace method in MarkdownImage component
@h4rkl

h4rkl commented Aug 21, 2025

Copy link
Copy Markdown
Collaborator

We need to migrate the header and footer at the same time. There's a PR in progress here #704 with most of the Footer work done if you want to merge it in to this work.

- Add universities landing page and components
- Add universities link to navigation dropdown in Learn section
- Resolve merge conflicts with deleted header files
- Remove globals.css file with duplicate Tailwind base/components/utilities
- Remove CSS import from index.ts
- Fixes fumadocs rendering issue caused by style conflicts
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.

2 participants