fix: close mobile menu when Read Articles link is clicked

[Rashmi2806525]

PR Description

Please include a summary of the changes and the related issue. Describe your changes in detail.

Type of Change

• Bug fix (change which fixes an issue)
• New feature (change which adds functionality)
• Documentation update

Select your work-area

• Frontend
• Backend
• Documentation
• Others

Related Issue

Please provide a link to the issue solved if applicable.

Add your Work Example

📷 Add a Snapshot

Fixes (mention the issue number which this fixes)

#closes

Checklist

• I have updated my branch and synced it with the project's 'develop' branch before making this PR.
• I have optimized the file changes.
• I have added a snapshot of my work example.
• I have made a PR to the project's develop branch.

Undertaking

• My code follows the style guidelines of this project.

• I have performed a self-review of my code.

• I have commented my code, particularly in hard-to-understand areas.

• I have made corresponding changes to the documentation.

• I have checked for plagiarism and assure its authenticity.

• I have read and followed the code of conduct for this repository. I understand that violation of this undertaking may have legal consequences.

• I Agree

[github-actions]

Thank you @, for creating the PR and contributing to our UltimateHealth project 💗.
Our team will review the PR and will reach out to you soon! 😇
Make sure that you have marked all the tasks that you are done with ✅.
Thank you for your patience! 😀

[github-actions]

❌ PR Validation Failed

This PR was marked as gssoc:invalid because: No linked issues found in the PR description using standard keywords (e.g., 'Fixes #123', 'Issue #123').

To resolve this, please ensure your PR description links an issue (e.g., Fixes #123) and that you are either the creator or an assignee of that issue.

[Rashmi2806525]

@SB2318 i have submitted the pull request for issue #2169 .added onclick handler to the tead articles link in the mobile navbar to close the menu when tapped . please review.
thankyou

[Rashmi2806525]

"Hi @SB2318, could you please remove the gssoc:invalid label from this PR? I have added Fixes #2169 in the description. Thank you!"

[Rashmi2806525]

"Hi @SB2318, PR #2186 is ready for review. All checks have passed. Please review when you get a chance. Thank you!

[SB2318]

/review

[SB2318]

"Hi @SB2318, PR #2186 is ready for review. All checks have passed. Please review when you get a chance. Thank you!

The solution has not met the requirement yet. give me 15 mins

[SB2318]

## Problem Statement

The mobile navigation menu is not opening on certain pages such as `/articles` and `/medical-glossary`, even though the hamburger menu icon is being clicked.

### Root Cause Investigation

The issue appears to be related to the Navbar component used on these pages:

- `web/src/components/layout/Navbar.tsx`

Initial investigation suggests that the mobile navigation container may be using an inline style:

```tsx
style={{ display: 'none' }}

Since inline styles have higher priority than CSS classes, this could prevent the .mobile-nav.open class from changing the menu's visibility when the hamburger icon is toggled.

Proposed Fix

• Inspect web/src/components/layout/Navbar.tsx.
• Remove the hardcoded inline display: none style from the mobile navigation container.
• Allow the visibility to be controlled entirely through CSS classes (e.g., .mobile-nav and .mobile-nav.open).

Additional Investigation

While testing the application, the production build should also be verified using:

npm run build

If the build fails, inspect the reported files for syntax issues. One area to check is:

• web/src/app/globals.css

Look for any invalid CSS syntax, such as unmatched or extra braces, and correct them if found.

Acceptance Criteria

• Mobile navigation opens and closes correctly on /articles.
• Mobile navigation opens and closes correctly on /medical-glossary.
• No inline styles override the mobile navigation visibility.
• npm run build completes successfully without errors.

[github-actions]

❌ PR Validation Failed

This PR was marked as gssoc:invalid because: No linked issues found in the PR description using standard keywords (e.g., 'Fixes #123', 'Issue #123').

To resolve this, please ensure your PR description links an issue (e.g., Fixes #123) and that you are either the creator or an assignee of that issue.

[Rashmi2806525]

"Hi @SB2318, I have fixed both issues - removed the inline style={{ display: 'none' }} from the mobile nav container in Navbar.tsx and fixed the extra } syntax error in globals.css. Build is now passing successfully. Please review!"

[Rashmi2806525]

"Hi @SB2318, could you please also remove the gssoc:invalid label from this PR? I have added Fixes #2169 in the description. Thank you!"

[github-actions]

❌ PR Validation Failed

This PR was marked as gssoc:invalid because: No linked issues found in the PR description using standard keywords (e.g., 'Fixes #123', 'Issue #123').

To resolve this, please ensure your PR description links an issue (e.g., Fixes #123) and that you are either the creator or an assignee of that issue.

[github-actions]

Congratulations, Your pull request has been successfully merged 🥳🎉 Thank you for your contribution to the project 🚀 Keep Contributing!! ✨