fix(header): close mobile menu when switching to desktop view

[PRAteek-singHWY]

What this PR does

Fixes an edge-case where the mobile navigation sidebar remains open when switching
from mobile to desktop viewport sizes during responsive testing.

The mobile menu now automatically closes when the viewport crosses the desktop
breakpoint, ensuring the UI state always matches the active layout.

---

Changes included

• Automatically closes the mobile navigation menu when switching to desktop view
• Prevents stale mobile UI from persisting during responsive resizing
• Visual / UX behavior fix only

---

Why this is needed

While testing responsive behavior on desktop (using browser resize / DevTools),
the mobile sidebar could remain visible even after entering desktop view.
This creates a confusing UI state where both desktop navigation and mobile
sidebar are visible at the same time.

Although this usually resolves on a full page refresh, developers commonly
test responsive layouts without refreshing — making this a real usability
and testing bug.

This change aligns behavior with production-grade applications, where
mobile navigation state is reset automatically on breakpoint changes.

---

Screenshots

Issue observed during responsive testing

Mobile navigation remains open after switching to desktop viewport:

---

Technical notes

• Uses a matchMedia('(min-width: 768px)') listener to detect breakpoint changes
• Closes mobile menu state when entering desktop view
• No routing, styling, or dependency changes
• No impact on existing mobile navigation behavior

---

Scope

• Header component only
• No logic changes outside responsive state handling