AppFrame: “Enterprise Nav” phase 1.5 updates (HDS-3612)

[KristinLBradley]

APP FRAME UPDATES

---

📌 Summary

If merged, this PR updates the AppFrame to:

• Update AppFrame Showcase to add new framed example & longer content to test scrolling.
• Refactor positioning styles to move responsibility to AppFrame vs. child components.
• "Unstick" AppHeader when viewport height is under 480px in height.
• Style inoperable actions as disabled within AppHeader (when SideNav is expanded in mobile view).
• Remove the withAppHeader argument from the SideNav along with refactors removing the need for it.

👉 AppFrame Showcase: https://hds-showcase-git-hds-3612-app-frame-updates-hashicorp.vercel.app/layouts/app-frame
👉 AppFrame "framed" example including AppHeader & SideNav components

Related PR:

• AppHeader updates PR: AppHeader: “Enterprise Nav” phase 1.5 updates (HDS-3613) #2306

🔗 External links

• Jira ticket: HDS-3612

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Aug 9, 2024 3:41pm
hds-website	✅ Ready (Inspect)	Visit Preview	Aug 9, 2024 3:41pm

[jorytindall]

For me the interaction between all of these elements looks good, the overlay isn't very perceivable when it's on top of the AppHeader (the elements show through a bit), but I think that's fine.

I'm not sure if it's directly related to this PR, but in testing on my phone the interactive (specifically active) states of the menu button and the collapse button are seeming to persist in an odd way (attached screen recording)

ScreenRecording_07-31-2024.14-42-47_1.MP4

[KristinLBradley]

For me the interaction between all of these elements looks good, the overlay isn't very perceivable when it's on top of the AppHeader (the elements show through a bit), but I think that's fine.

I'm not sure if it's directly related to this PR, but in testing on my phone the interactive (specifically active) states of the menu button and the collapse button are seeming to persist in an odd way (attached screen recording)

ScreenRecording_07-31-2024.14-42-47_1.MP4

@jorytindall Do you have any ideas on how it could be improved? To me the overlay just has a slight transition between visible/not visible which looks fine to me but if it bothers you how would you want it changed?

I'm not quite getting what you mean by the active states persisting? I don't notice anything jumping out as overly weird personally.

[jorytindall]

@jorytindall Do you have any ideas on how it could be improved? To me the overlay just has a slight transition between visible/not visible which looks fine to me but if it bothers you how would you want it changed?

@KristinLBradley Sorry, I'll clarify, I think the transition of the overlay is fine, if anything were to change it would maybe be increasing the opacity of the overlay (making it less opaque), but that's a larger discussion that would affect other things as well, so I'd say let's not touch it.

I'm not quite getting what you mean by the active states persisting? I don't notice anything jumping out as overly weird personally.

I only noticed it on my phone, but when I press either of these buttons (menu or collapse), the persist in what looks like their hover state as I scroll around the page.