Gatsby: [www] docs sidebar is not sticky

[shannonbux]

To recreate the behavior:

1. Clicked on Guides from docs homepage (default is only Quickstart is open)
2. Scrolled down
3. Opened Deployment and Hosting category
4. Scrolled down
5. Clicked on Custom Configuration

Expected behavior

I would expect to see the custom configuration item stay exactly where it is in the sidebar

Actual behavior

The sidebar jumps back to the top so I have to scroll back down to see the category again.

[Manoz]

Nice one @shannonbux . Another way to recreate this is to scroll down in the sidebar and reload the page. The sidebar will jump back to the top.

Might be related with /components/sidebar/scroll-sync-sidebar.js. Looks like the offsetTop isn't working. I'm doing some tests see if I can fix this.

[kripod]

I think this issue could be solved by using the recently released gatsby-plugin-layout.

[stefanivic]

I also noticed if you click on Expand All and then reload, sometimes the Quick Start section will jump to the right.

https://i.imgur.com/YOA0AFE.png

[fk]

@kkemple and I paired a bit to work on this issue in https://github.com/gatsbyjs/gatsby/tree/topics/sticky-sidebar-docs -- the approach is to "save" the scrollbar position for a given route and restore it when coming back to that location.

Pinging @kkemple @m-allanson @pieh -- what are your thoughts on using gatsby-plugin-layout here like @kripod suggested? #n00b💯😁

[shannonbux]

@calcsam this isn't =resolved yet. The docs are still not saving scroll position nor click position. The initial problem described above in this issue still persists.

[stefanivic]

@shannonbux i noticed a few things.

@fk stated that titles are black and bold on first load and then get changed to purple and normal after clicking on them. I noticed that these styles do not get loaded until the titles are interacted with and then only overwrite the default styles.

Also the issue with Quick Start getting pushed right is due to the first li getting double left padding.

[fk]

Hey @stefanivic 👋I can confirm everything you observed will be fixed once we resolve https://github.com/gatsbyjs/gatsby/issues/7528

[stefanivic]

@fk if there is anything I can do to help just let me know.