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

[Shakeelkhuhro]

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)

nav-issue-made-with-clipchamp-1_AS4CphGw.mp4

Additional information

No response

Contributor terms

• I agree to follow the Contributing Instructions

[github-actions]

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]

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