Mobile Navigation Menu lacks backdrop overlay and body scroll lock

### **Description**:
While testing the mobile responsiveness of OWASP Nest, I noticed that the navigation menu doesn't provide a focused user experience. Currently, when the menu is open, the background content remains fully visible and scrollable, which can be distracting and leads to accidental interactions with the underlying page.

**_Steps to Reproduce:_**

1. Open the site on a mobile device or use Chrome DevTools (Mobile view).

1. Open the side navigation menu.

1. Try to scroll the page behind the menu.

1. Click on the area outside the menu.

**_Actual Behavior:_**

- The background content is still scrollable.

- There is no backdrop/blur to dim the background.

- Clicking outside the menu does not trigger it to close.

**_Expected Behavior:_**

- **Scroll Lock:** The body scroll should be disabled when the menu is active (e.g., using overflow: hidden).

- **Backdrop:** A semi-transparent overlay or blur should appear behind the menu to improve focus.

- **Dismissal:** Clicking the backdrop should automatically close the menu.

**_Suggested Fix:_**
I can help fix this by implementing a backdrop component using Tailwind CSS and managing the body scroll state when the menu toggles. I’ve handled similar UI challenges in my previous projects like Wateera and Procode.

**_Are you open to a PR for this?_**
I’d be happy to submit a pull request to improve this interaction.