adding header links to sidebar on mobile

[thisisjofrank]

Add the 'top navigation' links to the sidebar on mobile

Add the mobile nav to the examples and API reference pages

Add a Scroll to top button to the API reference

[thisisjofrank]

sorry for this hack, I can't edit the z-50 on the reference doc that is generated

[josh-collinsworth]

Can you isolate it instead? May be a little cleaner. https://tailwindcss.com/docs/isolation

[philhawksworth]

This is great as it solves the immediate problem of the inability to navigate some parts of the top-level hierarchy on mobile, but I'm not quite sure about the behaviour in the API reference part of the site.

It feels of to me that the sub sections (deno, web, node) appear in the same format as additional top-level nav items in the sidebar when in that section.

If those secondary nav items appear in the sidebar, then I think they need to be visually distinct from the top-level nav items.

It may be that the solution is also desirable anyway — to make the visual treatment of the top-level nav items in the sidebar a little different and contained from the other items.

Astro have a good treatment of the same thing in their upcoming docs release that we might take some inspiration from:

[josh-collinsworth]

@philhawksworth @thisisjofrank I pushed a commit to stylize the "section picker" per Phil's feedback. I think it's in pretty ok shape, but I haven't tested it extensively. If you'd like to change it (or just blow the commit away) feel free.

[thisisjofrank]

@josh-collinsworth I love this, looks super nice. We should apply it to the mobile sidebar on the homepage too, which somehow doesn't seem to be getting the styles. Can take a look tomorrow if you've no time.

[philhawksworth]

This is great! Going to make things feel far simpler