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

refactor/fix: Move sidebar from article to base layout #6623

Closed
wants to merge 6 commits into from

Conversation

abizek
Copy link
Contributor

@abizek abizek commented Apr 8, 2024

Description

  • Moves the sidebar into the base layout to prevent rerender on page change
  • Moves the banner and navbar into the base layout and makes the navbar sticky
  • Improves responsiveness in pages using the article layout

Validation

Before After
Banner before-banner after-banner
Sidebar before-sidebar after-sidebar
Responsiveness
before-responsiveness.mp4
after-responsiveness.mp4

Related Issues

Fixes #6409
Possible fix for #6292

Check List

  • I have read the Contributing Guidelines and made commit messages that follow the guideline.
  • I have run npx turbo format to ensure the code follows the style guide.
  • I have run npx turbo 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.

Please let me know if there is a better way to hide sidebars in not-found and error pages

* refactor/fix: Move navbar to base layout
* feat: Provider and hook to hide sidebar in not-found and error pages
* test: Sidebar provider and hook
* refactor/fix: Article layout responsiveness
* feat: Sticky navbar, metabar and sidebar

Signed-off-by: abizek <[email protected]>
@abizek abizek requested a review from a team as a code owner April 8, 2024 08:57
Copy link

vercel bot commented Apr 8, 2024

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

Name Status Preview Updated (UTC)
nodejs-org ✅ Ready (Inspect) Visit Preview Apr 16, 2024 6:12am

@AugustinMauroy
Copy link
Member

Possible fix for #6292

yes, it allows the banner to be moved, but the idea of the
issue is to have a small cross that hides the banner

Copy link

github-actions bot commented Apr 8, 2024

Lighthouse Results

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

Copy link

github-actions bot commented Apr 8, 2024

Unit Test Coverage Report

Lines Statements Branches Functions
Coverage: 92%
90.31% (597/661) 76.1% (172/226) 90.9% (120/132)

Unit Test Report

Tests Skipped Failures Errors Time
130 0 💤 0 ❌ 0 🔥 5.594s ⏱️

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'm temporarily blocking this PR as it has too many changes and I want to give it a proper review once Ive recovered from my surgery.

For starters, good stuff. But there are too many moving parts and need to ensure all is good.

@abizek
Copy link
Contributor Author

abizek commented Apr 9, 2024

@ovflowd Cool. Take care and get well soon ❤️

import { availableLocales } from '@/next.locales.mjs';

const WithNavBar: FC = () => {
const { navigationItems } = useSiteNavigation();
const { resolvedTheme, setTheme } = useTheme();
const { pathname } = useClientContext();
const pathname = usePathname();
Copy link
Member

Choose a reason for hiding this comment

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

Use the client context hook. If by any chance you're using the regular usePathname because of the value being different from the client context hook, then something is wrong.

layouts/Base.tsx Outdated Show resolved Hide resolved
layouts/Base.tsx Outdated Show resolved Hide resolved
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.

In general I understand the effort done here, and appreciate it. But unfortunately the way this PR changes the fundamental logic of certain layouts, makes this PR almost impossible to be approved.

I know I'm being too pushy here, but I'm sure there are alternative ways of recording the position of the sidebar navigation and/or keeping it stale.

One ingineous solution that does not require change in the structure of the layouts is:

  • Update the links in the Sidebar components to also pass a state to the Next.js Router (pretty much it will update the history location with a state; The state value is an object, have a property to be Y coordinates.
  • This state contains what is the scroll position at the time of click
  • When doing the navigation have an effect that immediately reads the history location state and scrolls to said position

It might create a flicker effect (depending how the effect is done, as it might not) and provides a reasonable solution to restore the right position at the moment of navigation.

@abizek
Copy link
Contributor Author

abizek commented Apr 15, 2024

I will give scrolling to the previous position a try 👍

@ovflowd
Copy link
Member

ovflowd commented Apr 26, 2024

I'm closing this PR as I've found an extremely simple solution based on vercel/next.js#49279

@ovflowd ovflowd closed this Apr 26, 2024
@ovflowd
Copy link
Member

ovflowd commented Apr 26, 2024

I will give scrolling to the previous position a try 👍

I feel that in the end all these approaches are gimmicks. It definitely seems like a bug on Next.js side of things 😢

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.

"Learn" pages sidebar scrolls back to top on every page change
3 participants