Fix useEffect() in sky nav

[calebeby]

Closes #1909

The useEffect was being called multiple times, where it was before. I don't think it should have been placed where it was, because that is not in the top-level of a component, which is the only place where hooks are allowed.

It seems like Storybook made a change where story components now get rendered multiple times. Because of our placement of useEffect, the sky nav JS gets initialized twice. This caused it to expand and retract immediately when you click the menu button.

I changed the useEffect to be called in a decorator which I think is actually a component, so it should be OK to use useEffect there.

This problem exists in other components too. I can go through them and fix them if there are any others where the multiple-initialization of JS is causing a problem, but I figure that is not a launch blocker since for most of them it seems to not matter.

@tylersticka the sky nav JS in the prototypes that I added in #1503 is broken also, but I think for a different reason. I didn't look into fixing that since I'm not sure if it's important that those continue to work since we've implemented the production version now. Let me know if you want me to fix those!

https://deploy-preview-1918--cloudfour-patterns.netlify.app/?path=/story/components-sky-nav--dark

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4288ba1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for cloudfour-patterns ready!

Name	Link
🔨 Latest commit	4288ba1
🔍 Latest deploy log	https://app.netlify.com/sites/cloudfour-patterns/deploys/62c74532a7b8d40009a532d3
😎 Deploy Preview	https://deploy-preview-1918--cloudfour-patterns.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[tylersticka]

This problem exists in other components too. I can go through them and fix them if there are any others where the multiple-initialization of JS is causing a problem, but I figure that is not a launch blocker since for most of them it seems to not matter.

Can you create an issue for the broader problem?

the sky nav JS in the prototypes that I added in #1503 is broken also, but I think for a different reason. I didn't look into fixing that since I'm not sure if it's important that those continue to work since we've implemented the production version now. Let me know if you want me to fix those!

It's not important for those to continue to work. Maybe we should remove them if we know they're broken?

[calebeby]

Can you create an issue for the broader problem?

✅ #1919

It's not important for those to continue to work. Maybe we should remove them if we know they're broken?

Remove all the prototypes which have the sky nav? Or remove the sky nav JS from those? I'm fine with either. Should that be in this PR or another?

[tylersticka]

Remove all the prototypes which have the sky nav? Or remove the sky nav JS from those? I'm fine with either. Should that be in this PR or another?

Either one. (Both questions.)

[calebeby]

@tylersticka I removed all the prototypes which call useSkyNav