fix: ensure side panel closes on outside click on mobile device

[rahulptl165]

Resolves #50 .

Checklist

Please ensure the following tasks are completed before submitting this pull request.

• Read and understand the Code of Conduct.
• Read and understood the licensing terms.
• Searched for existing issues and pull requests before submitting this pull request.
• Filed an issue (or an issue already existed) prior to submitting this pull request.
• Rebased onto latest master.
• Submitted against master branch.

Description

This PR enhances the SideMenu component to enure side panel closes on outside click on mobile device.

This pull request:

• Updates the Drawer component to switch between persistent and temporary variants based on screen width (<= 640px is considered mobile).
• Adds conditional onClose behavior: only triggers on mobile when the Drawer is temporary.
• Introduces mobile-specific CSS to adjust the close button’s styling at max-width: 640px.

Related Issues

Does this pull request have any related issues? yes

This pull request:

• resolves [Bug]: on small screens, clicking outside of the side panel should close the side panel #50
• fixes [Bug]: on small screens, clicking outside of the side panel should close the side panel #50

Questions

Any questions for reviewers of this pull request?

No.

Other

Video

Screen.Recording.2025-03-08.153138.1.mp4

No.

---

@stdlib-js/reviewers

[kgryte]

I believe we already check whether the device is a mobile device. If so, we should be pushing that down, rather than creating this sort of custom check.

[rahulptl165]

I will check the codebase to see if we can utilize the existing mobile device check, and update my pull request shortly.

[kgryte]

To help with PR review, it would help if you can provide screenshots and/or GIFs demonstrating new UI behavior. Otherwise, it is hard to know whether the changes introduced in this PR are what is desired.

[rahulptl165]

I have updated the pull request to include a video demonstrating the new UI behavior.

[rahulptl165]

Hi @kgryte, I have update the code to use viewport-width module for mobile detection as it is implemented in app.jsx. its working same as shown in video.