Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: make sidebars sticky #7132

Merged
merged 2 commits into from
Oct 31, 2024
Merged

Conversation

arthurjdam
Copy link
Contributor

@arthurjdam arthurjdam commented Oct 18, 2024

Description

Make sidebars "sticky" to the browser top, making it accessible when scrolled partially or entirely down the page

Validation

When scrolling down the page, sidebars should remain visible:
image

On mobile, layout should be unaffected:
image

Related Issues

Addresses #7122

Check List

  • I have read the Contributing Guidelines and made commit messages that follow the guideline.
  • I have run npm run format to ensure the code follows the style guide.
  • I have run npm run test to check if all tests are passing.
  • I have run npx turbo build to check if the website builds without errors.
  • I've covered new added functionality with unit tests if necessary.

@arthurjdam arthurjdam requested a review from a team as a code owner October 18, 2024 06:49
Copy link

vercel bot commented Oct 18, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
nodejs-org ✅ Ready (Inspect) Visit Preview Oct 29, 2024 11:17pm

@mikeesto
Copy link
Member

I'm not sure that I like how the left sidebar is also sticky. It means we need to scroll down to the bottom of every page to see the Modules/Diagnostics/Test Runner pages. Would be interested to hear others thoughts

@arthurjdam arthurjdam changed the title Style/make sidebars sticky style: make sidebars sticky Oct 21, 2024
Copy link
Member

@ovflowd ovflowd left a comment

Choose a reason for hiding this comment

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

I don't think this is a good change, sorry. The current layout is more suited for our needs. Thanks for the contribution tho!

@AugustinMauroy
Copy link
Contributor

I don't think this is a good change, sorry. The current layout is more suited for our needs. Thanks for the contribution tho!

the original issue was just to put the ToC in sticky so that it's always handy in the desktop. Which I don't think is too bad, but I don't think the lef nav should be stiky.

@arthurjdam
Copy link
Contributor Author

That's fair. Updated to only make the Metabar sticky, but not the other bars

Copy link

github-actions bot commented Oct 31, 2024

Lighthouse Results

URL Performance Accessibility Best Practices SEO Report
/en 🟢 99 🟢 100 🟢 100 🟢 91 🔗
/en/about 🟢 100 🟢 100 🟢 100 🟢 91 🔗
/en/about/previous-releases 🟢 99 🟢 100 🟢 100 🟢 92 🔗
/en/download 🟢 100 🟢 100 🟢 96 🟢 91 🔗
/en/blog 🟢 100 🟢 100 🟢 100 🟢 92 🔗

Copy link

Unit Test Coverage Report

Lines Statements Branches Functions
Coverage: 92%
90.32% (588/651) 75.43% (175/232) 94.35% (117/124)

Unit Test Report

Tests Skipped Failures Errors Time
131 0 💤 0 ❌ 0 🔥 5.638s ⏱️

@ovflowd
Copy link
Member

ovflowd commented Oct 31, 2024

Thanks for the contribution ✨ -- appreciate your time!

@ovflowd ovflowd added this pull request to the merge queue Oct 31, 2024
Merged via the queue into nodejs:main with commit f64f547 Oct 31, 2024
13 of 15 checks passed
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.

4 participants