Code looks fine. The design is a bit clunky, but it always was going to be, switching between the proper header and the peekaboo header. I like that you didn't have to duplicate the content for the peekaboo nav.

The one question I have is about on small screens — I see that the buttons go away and are replaced with the menu button, just like the proper header. Will the menu still be positioned properly if you're scrolled away from the top when it opens? I assume it'll work, since I'm guessing it's positioned relative to the header, not the page, but I just wanted to confirm that.

That's not a blocker, though, since this is just the pattern library representation, so I guess I'm just making a mental note to check that when we implement it on the actual site.

I'll defer on design approval to @heyitsal, but approving now for code review.

Oh I guess I did have one question — Should the peekaboo header's backdrop be white for light mode? It looks great in dark mode, but it's a little jarring in light mode.

Here's an example of white:

And here's one with the light blue we use for the page background:

I think both look a little more natural for light mode, but I'll defer to Al.

I'm definitely a small screen person who would be happy to give this a look-see when it's on the live site.

I'm definitely a small screen person who would be happy to give this a look-see when it's on the live site.

You can play with it here: https://deploy-preview-1317--mltshp-patterns.netlify.app/?path=/story/legacy-components-site-header--logged-in-with-content

Ah I forgot to check light mode. I can address that easily enough. The slide in/out should also occur once scrolling starts not once it ends; I'll address that as well. Finally, I think we could do something with the mobile version since there is a lot of empty space left after condensing the logo to an icon. Any thoughts on that?

Will the menu still be positioned properly if you're scrolled away from the top when it opens? I assume it'll work, since I'm guessing it's positioned relative to the header, not the page, but I just wanted to confirm that.

Looks like it just works (manually applied the is-expanded class to #site-nav and #choose-a-shake).

Also updated the background for light mode, and removed the debounced function so it shows/hides the nav strip more promptly on scroll.

Special consideration may be needed for the expanded menus... if that menu is very long and requires scrolling, scrolling downward may cause the header and menus to disappear as it is (although, the dismiss on scroll does not occur for gradual scrolling... you have to scroll > 20px since last scroll event to trigger it).

Special consideration may be needed for the expanded menus... if that menu is very long and requires scrolling, scrolling downward may cause the header and menus to disappear as it is (although, the dismiss on scroll does not occur for gradual scrolling... you have to scroll > 20px since last scroll event to trigger it).

Updated the PR to restrict maximum height of the shake list to 80vh and scroll on overflow. This resolves the case where there are too many shakes to be contained in a single viewport.

The design is a bit clunky, but it always was going to be

Can you elaborate with specific details? Anything I can improve on?

Can you elaborate with specific details?

Honestly, upon further reflection, I think it was mostly that the dark background looked weird in light mode.

I clicked through to the Storybook preview deploy to review your latest changes, but the peekaboo isn't working? I'm using Edge.

Can you elaborate with specific details?

Honestly, upon further reflection, I think it was mostly that the dark background looked weird in light mode.

I clicked through to the Storybook preview deploy to review your latest changes, but the peekaboo isn't working? I'm using Edge.

Working for me in Edge (latest). Any console errors?

Working for me in Edge (latest). Any console errors?

After testing again, I now see the peekaboo header with the same cut-off bug you described above. Sorry!

Any ideas on how to better use the space for mobile? It could be used to show notifications. Tapping that # could scroll to the anchor (at the bottom of the page). (Spacing issues as pictured, but would clean that up.)

Say, regarding the cut-off thing... I sometimes see this happen on image content on the site. I've only ever seen it happen on Chromium-based browsers (I'm using Arc these days, but pretty sure it's happened in Chrome too). Any idea what could be causing it? It's an odd rendering glitch. If I drag to select the image causing it to repaint, it does.