fix:Hamburger opening issue

[Ash-Misty]

Pull Request

Summary [required]

Improved the mobile navigation experience by fixing the misbehavior of hamburger menu drawer. Added a modern slide-in menu with smoother animations, better spacing, improved accessibility, and a dedicated overlay backdrop. The updated design provides a cleaner and more responsive user experience on mobile devices.

Related Issue [required]

Closes #1127

Type of Change [required]

• Bug fix — resolves a broken behaviour
• Feature — adds new functionality
• Data — adds new projects to data/projects.json
• Documentation — updates docs, README, or code comments only
• Style — CSS or visual changes only, no logic change
• Refactor — restructures code without changing behaviour
• Test — adds or updates tests

What Was Changed [required]

File	Change Made

| style.css | Improved spacing and typography for mobile navigation links and made the hamburger menu working |
| index.html | form tag mispplaced |
| script.js | Enhanced hover and focus states for accessibility |

How to Test This PR [required]

1. Checkout this branch:

   git checkout <branch-name>

2. Run the project locally.

3. Open the website in a mobile viewport (375px width recommended).

4. Click the hamburger menu icon.

5. Verify the drawer slides in smoothly from the right.

6. Verify the overlay appears behind the menu.

7. Verify all navigation links remain functional.

8. Close the menu using the toggle button and by clicking outside the drawer.

9. Verify the desktop navigation remains unchanged.

Expected Result

• Hamburger icon displays correctly.
• Mobile drawer opens and closes smoothly.
• Overlay covers the background when the drawer is open.
• Navigation links remain accessible and responsive.
• No layout issues occur on mobile screens.

Test Results [required]

Tested manually on:
✓ Mobile View (375px)
✓ Tablet View (768px)
✓ Desktop View (1280px)

No visual regressions observed.

Screenshots (if UI change)

Before	After
Old hamburger menu	Redesigned mobile drawer

Self-Review Checklist [required]

• I have read CONTRIBUTING.md and followed all guidelines
• My branch name follows the convention: style/mobile-menu-redesign
• I tested the changes manually
• I have not introduced any debug statements
• I have not modified files outside the scope of the linked issue
• I tested the UI at 375px (mobile) and 1280px (desktop)

Notes for Reviewer

This PR focuses exclusively on visual and UX improvements for the mobile navigation drawer. No business logic or navigation functionality was modified.

[vercel]

@Ash-Misty is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your first pull request to DevPath.

Before review:

• Complete the PR template fully
• Ensure all tests pass
• Link your PR to an issue
• Keep changes scoped to the issue

A maintainer will review your contribution soon.

[komalharshita]

@Ash-Misty kindly resolve the merge conflicts

[Ash-Misty]

solved the conflicts

[komalharshita]

@Ash-Misty kindly check again