CatsInTech / GitHub-ReadMe

This is a React Project where you can customise your GitHub ReadMe with all the available cool things.
http://githubreadme.co/
MIT License
52 stars 90 forks source link

🚀 Navbar does not automatically close when clicking outside of it (GSSOC'23) #175

Open Shakeelkhuhro opened 1 year ago

Shakeelkhuhro commented 1 year ago

Description of the enhancement. ✍🏻

Issue: When interacting with the website's navbar, there is an issue where it does not automatically close when clicking on a blank area of the screen outside of the navbar's boundaries.

Expected Behavior: Clicking on a blank area of the screen outside of the navbar's boundaries should trigger an event that closes the navbar, hiding it from view.

Please assign this issue to me under GSSOC'23 so that I can resolve it.

Describe briefly how you would implement this enhancement.

After Identifying the "blank" area outside the navbar where clicking should trigger the navbar to close, I'll follow the following steps.

1. Attach a click event listener to that area.
2. In the event handler function:
   - Check if the navbar is open.
   - If it is, close the navbar.
Clicked target should not be part of the navbar itself.
3. Optionally, CSS styles or animation transitions for a smooth closing effect.
4. Test thoroughly to ensure the navbar closes when clicking outside and remains open when clicking inside the navbar.
5. Debug any issues that arise during testing.

Screenshots Example (if applicable)

https://github.com/CatsInTech/GitHub-ReadMe/assets/95736430/3f129393-4698-46ec-a8a2-d3d6e3c59995

Additional information

No response

Contributor terms

github-actions[bot] commented 1 year ago

Hello @Shakeelkhuhro! Thank you for raising this issue.

Please make sure to follow our Contributing Guidelines. 💪🏻 Don't forget to ⭐ our GitHub-ReadMe. 📃

Our review team will carefully assess the issue and reach out to you soon! 😇 We appreciate your patience! 😀

Shakeelkhuhro commented 1 year ago

Hello @Shakeelkhuhro! Thank you for raising this issue.

Please make sure to follow our Contributing Guidelines. 💪🏻 Don't forget to ⭐ our GitHub-ReadMe. 📃

Our review team will carefully assess the issue and reach out to you soon! 😇 We appreciate your patience! 😀

plz assign this issue to me