Improve Dialog Box Closing Behavior and Expand Clickable Areas in Navigation Menu

[Priyasharma620064]

Describe the bug
I have encountered two issues with the current implementation of the dialog box and navigation menu:

1. Dialog Box Closing Behavior:

   • Currently, the dialog box only closes when the cross button (X) is clicked.
   • Expected Behavior: The dialog box should also close when clicking outside the box (anywhere in the overlay area). This would provide a more intuitive user experience.

2. Navigation Menu Clickable Area:

   • The blue selection bar in the navigation menu only highlights and responds to clicks within a specific region (the text area of each option).
   • Expected Behavior: The clickable area for each menu option should span the full width of the corresponding dialog box line. This will make it easier for users to interact with the menu, ensuring any click within the line triggers the intended action.

To Reproduce
Steps to reproduce the behavior:
Open the dialog box by clicking the menu icon.
For issue 1: Try clicking outside the dialog box—nothing happens. Only clicking the cross button closes it.
For issue 2: Observe that clicking outside the text area of a menu option does not trigger any action.

Expected behavior
1. Clicking anywhere outside the dialog box should close it.
2. The clickable area of each menu option should span the entire line width of the dialog box, with the blue selection bar extending to match the full line.

Screenshots
[Image](https://github.com/user-attachments/assets/80d7506c-bc07-4bef-a37a-c3005de29de5

Desktop (please complete the following information):

• OS: Ubuntu 22.04
• Browser: Firefox

[Priyasharma620064]

@rajutkarsh07 , I want to work on this issue,please assign it to me.