@imbhargav5 See if you find the notifyWhenStickyHeadersChange utility useful.

It has been used here: https://github.com/nodejs/nodejs.dev/blob/master/src/components/layout.tsx#L31-L55.

Sorry this is taking a touch longer. I fell sick last week. Will put in time this weekend. Thanks!!

Here is a preview of what it looks like right now.

I had to go for a different TOC component because structurally, it needs to be an immediate child of the main element in layout.

I feel like there is some duplication, so if you have any ideas on how I can restructure this, I would love to hear them very much.

/gcbrun

Preview at: https://storage.googleapis.com/staging.nodejs.dev/8adb53a/index.html

@imbhargav5 Nice.

Some issues I see.

1. Try to keep the styling consistent → https://on.ahmda.ws/02eaa5
2. Don't load the heading or TOC if there is not TOC → https://storage.googleapis.com/staging.nodejs.dev/8adb53a/differences-between-nodejs-and-the-browser
3. Make the font size extra small. So that this doesn't feel like part of the content.

/gcbrun

Preview at: https://storage.googleapis.com/staging.nodejs.dev/f849ca9/index.html

Just tested the live demo. Styling doesn't look well thought out.

• Line height is too much. Could be just 1
• Different padding on the heading and the links.
• Reduce the padding to be only at the bottom

Happy to answer any questions you have. Thanks for your work on this.
Peace! ✌️

Take a look at this document's right side navigation for inspiration → https://docs.microsoft.com/en-us/teamblog/announcing-open-specifications-migration#redirection-for-msdn

The links change visually when clicked and selected.

Lovely, quite excited about this PR :] Just noticed in isSmallScreen are both mobile TOC and rigth rail shown. So we should remove the mobile TOC if isSmallScreen.

@imbhargav5 For inspiration see also: https://docs.gitlab.com/ee/README.html

@LaRuaNa It seems like I made a typo. I put in display: hidden haha. So it was showing on slightly smaller screens. I personally feel we should show TOCDesktop on only large screens, since, on some small screens, TOC on the right shrinks the content visibly.

@ahmadawais How do you think I can do visual changes on click? 🤔

TOC ul and li items are mainly from the html string set with dangerouslySetInnerHTML. Is there a css only solution for this?

Yes, you can target all sorts of stuff with CSS. Right now there's no interaction when you hover the links. Use the same hover animations as used in the content. Find them in the layout.css file.

/gcbrun

/gcbrun

eventual staging example will be on https://storage.googleapis.com/staging.nodejs.dev/f849ca9/index.html

What's the status of this?

/gcbrun again so we can preview

eventual staging example will be on https://storage.googleapis.com/staging.nodejs.dev/$SHA/index.html

Should this be closed?

/preview

Please find a preview at: https://staging.nodejs.dev/199/

/preview

Please find a preview at: https://staging.nodejs.dev/199/

Ok the preview is working!

I think this is a great addition but it definitely looks weird on the smaller view on desktop. Picture below

Should this content potentially be hidden at that size?

Hi 👋 Sorry I lost track of this. Struggling for time for a while now.

Was using old design therefore closing PR