test(ui): verify responsive rendering and mobile elements of Navbar #… (JhaSourav07#2124)

…1515

## Description

Fixes JhaSourav07#1515

Adds a comprehensive responsive layout validation test suite for the
Navbar component (`app/components/navbar.test.tsx`). The test simulates
a mobile viewport width ($375\text{px}$) and programmatically triggers
interaction with the hamburger menu toggle button. It asserts that
clicking the menu seamlessly expands the navigation element (updating
`aria-expanded` to `"true"` and revealing the close icon) and that
clicking it a second time closes the drawer smoothly (returning
`aria-expanded` to `"false"`).

All test assertions utilize native Vitest matchers to align cleanly with
the repository's workspace configurations.

## Pillar

- [ ] 🎨 Pillar 1 — New Theme Design
- [ ] 📐 Pillar 2 — Geometric SVG Improvement
- [ ] 🕐 Pillar 3 — Timezone Logic Optimization
- [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview

*(N/A - This is a pure backend/UI testing suite improvement; no visual
elements or styles were added or modified)*

## Checklist before requesting a review:

- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
- [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
- [x] I have updated `README.md` if I added a new theme or URL
parameter.
- [x] I have starred the repo.
- [x] I have made sure that i have only one commit to merge in this PR.
- [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).
- [x] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

app/components/navbar.test.tsx

@@ -152,4 +152,27 @@ describe('Navbar responsive breakpoints', () => {
     expect(screen.getAllByRole('link', { name: /customization studio/i })).toHaveLength(1);
     expect(screen.getAllByRole('link', { name: /github repo/i })).toHaveLength(1);
   });
+
+  it('should verify responsive rendering and elements of Navbar (Variation 1) by toggling hamburger menu state smoothly', () => {
+    window.innerWidth = 375;
+    mockMatchMedia(false);
+
+    render(<Navbar />);
+
+    const toggleButton = screen.getByRole('button', { name: /open menu/i });
+    expect(toggleButton).toBeTruthy();
+    expect(toggleButton.getAttribute('aria-expanded')).toBe('false');
+
+    fireEvent.click(toggleButton);
+
+    expect(screen.getByRole('button', { name: /close menu/i }).getAttribute('aria-expanded')).toBe(
+      'true'
+    );
+    expect(screen.getByText(/closeicon/i)).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: /close menu/i }));
+    expect(screen.getByRole('button', { name: /open menu/i }).getAttribute('aria-expanded')).toBe(
+      'false'
+    );
+  });
 });