Add dark overlay when search bar is open

[Shashika6]

Fixes #783

Notes

• Add dark overlay when search is open

Screenshot

[changeset-bot]

🦋 Changeset detected

Latest commit: fe9cca6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@ilo-org/react	Patch
@ilo-org/twig	Patch
@ilo-org/styles	Patch

Not sure what this means? Click here to learn what changesets are.

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

[netlify]

✅ Deploy Preview for ilo-ui-react ready!

Name	Link
🔨 Latest commit	fe9cca6
🔍 Latest deploy log	https://app.netlify.com/sites/ilo-ui-react/deploys/66fce173d49d8d0008c5abd0
😎 Deploy Preview	https://deploy-preview-1197--ilo-ui-react.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 configuration.

[netlify]

✅ Deploy Preview for ilo-ui-twig-develop ready!

Name	Link
🔨 Latest commit	fe9cca6
🔍 Latest deploy log	https://app.netlify.com/sites/ilo-ui-twig-develop/deploys/66fce1732b75560008b63c68
😎 Deploy Preview	https://deploy-preview-1197--ilo-ui-twig-develop.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 configuration.

[netlify]

✅ Deploy Preview for ilo-ui-twig ready!

Name	Link
🔨 Latest commit	fe9cca6
🔍 Latest deploy log	https://app.netlify.com/sites/ilo-ui-twig/deploys/66fce1732b75560008b63c66
😎 Deploy Preview	https://deploy-preview-1197--ilo-ui-twig.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 configuration.

[Shashika6]

@justintemps what do you think about this implementation :)

[Shashika6]

Looks like theres an issue with the build in twig @GGKapanadze said he will have a look at it.

[GGKapanadze]

The styling issue is resolved right now we have to check why the search isn't propagating the correct js inside the base theme. \cc @Shashika6

[Shashika6]

Thanks @GGKapanadze will have a look a this one.

[Shashika6]

@justintemps this seems to be okay now will do a bit more testing on this and this should be ready :)

[Shashika6]

This is ready for review :)

[justintemps]

Hey @Shashika6 I think this needs a closer look. The transitions look really janky to me.

1. Why is the search menu sliding out from the top blue part of the nav?
2. The search icon blinks weirdly when you click on it

It's not a very smooth user experience.

Screen.Recording.2024-10-01.at.09.28.19.mov

[Shashika6]

Sure @justintemps, Will fix the UX issues.

[Shashika6]

Hey @justintemps I fixed the transition issues you mentioned can you have a look now :)