Fix scroll to behave similar to interactors docs

[wKich]

Motivation

@cowboyd:

• Whole document needs to scroll, not just when hovered over main content
• Footer should not be visible when not needed
• Footer should look like original footer before this PR Tweak CSS #857 not the “thin” footer with only one link
• The scroll interaction should be as close to this https://frontside.com/interactors/docs as possible

Approach

• Removed unnecessary useAppHtml.tsx
• Fixed scroll
• Adjust header styles
• Tweak sidebar

[cowboyd]

You're a hero!!

This is a really great first pass. It looks like the burger is a bit close to the content:

And then it looks like on the home page, the nav burger is getting pushed off to the right because of the badges being too wide or something.

[wKich]

it looks like on the home page, the nav burger is getting pushed off to the right because of the badges being too wide or something.

Nope, the burger is not a part of header content.

Moved it into the header

[cowboyd]

Fantastic work. Looks really smooth and the markup is clean:

[cowboyd]

What do we think about the rounded header? It matches the interactors, but I think square might be more 2024

Thoughts?

[wKich]

maybe only bottom corners make rounded

[cowboyd]

Let's just go with square for right now.

[cowboyd]

Hmmm.... I think I see what's going on. The nav burger is only on the docs route, so it doesn't work on the home page where there is no sidebar. I think we need to move it back down because it really is part of the guide.

[cowboyd]

It looks good, although the badges are causing an overflow which makes the page scroll left and right

[cowboyd]

@wKich What alternatives to we have to making the header and app wrappers know about what route they're rendering? I'm a bit uncomfortable making the app.html aware of what's inside it (isDocsRoute) and the header also needing to know about what is being rendered (showNav, showGuides).

Can we use a form of render props?

[wKich]

@cowboyd Could you please check it?

[cowboyd]

@wKich Having an isDocsRoute() boolean in the head just feels like it's not correct. We're missing an abstraction somewhere.

I think we have a couple of options. One would be to use a context to add navlinks.

{yield* extraNavlinks([]) }

Another, would be to use a render prop for the app html useAppHtml({ extraNavlinks: [<NavBurger/>] })

[wKich]

Oh, ok. So you mean to pass nav links into header and form them outside?

[cowboyd]

Yes. That way the container doesn't need to be aware of the content. Same way that the children are rendered into the body without needing to know what they are.

[cowboyd]

Apologies for the delay. I'm going to make sure I get this through because we're almost there.

The `Guides' link is missing on the docs page (even though it would link back to itself).

In other words, the links should not "flash" when you navigate between sections of the website as they move from one place to the other. The space should be allocated beforehand, and if you are in the mobile guides, then the burger appears.

Instead of passing the navlinks all through, made even have a "navmenu" property that will allocate that spot?

[cowboyd]

@wKich Mainly, what we want to avoid is the menu "flashing" and re-arranging when you click links.

[cowboyd]

I see what you mean about it being very squished. What about taking out the v3 from the header when it is mobile?

[taras]

@cowboyd can we go ahead and merge this?

[cowboyd]

@cowboyd can we go ahead and merge this?

It still looks bad on mobile. I think we have to move the v3 from the header on mobile.

[taras]

Ok, I’ll take a look.

…

On Feb 16, 2024, at 12:30 PM, Charles Lowell ***@***.***> wrote: @cowboyd <https://github.com/cowboyd> can we go ahead and merge this? It still looks bad on mobile. I think we have to move the v3 from the header on mobile. — Reply to this email directly, view it on GitHub <#865 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAASHP433COM6TPEA36FCTLYT6JUXAVCNFSM6AAAAABA2IVBD2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBYHE2TGMJTGM>. You are receiving this because your review was requested.

[wKich]

@cowboyd Removed "v3" from the header. Sorry for delay

[cowboyd]

Ok, let's rebase and go.

[cowboyd]

I think we're good to go here. Squashing them into a single commit is optional as long as the commits that we have tell a coherent story.