Make theme desktop responsive breakpoint configurable

slorber commented 12 months ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Motivation

See

People want to be able to configure easily the 996px desktop breakpoint.

It's not easy currently because the value is hardcoded in both the JS side, but also CSS side (inside Infima directly), cf my comment https://github.com/facebook/docusaurus/pull/9261#issuecomment-1700876844

We should make this easier to achieve without requiring swizzling.

Self-service

[X] I'd be willing to do some initial work on this proposal myself.

jasikpark commented 6 days ago

Is there a recommended path to customizing the breakpoint where the nav switches from desktop to mobile? It seems I'd have to swizzle the navMobileSidebar.tsx hooks to do that.

slorber commented 5 days ago

No we don't have a way to achieve that easily unfortunately, you need to override all the CSS media queries and React hooks we have, exhaustively

One thing that makes it a bit harder is that it's not possible to use dynamic variables in media query ranges: https://bholmes.dev/blog/alternative-to-css-variable-media-queries/

Having things being packaged in another separate CSS package (Infima) doesn't make it easier.

facebook / docusaurus