test(ui): verify navbar responsive menu behavior (JhaSourav07#1767)

## Description

Fixes JhaSourav07#1535

Adds responsive Navbar test coverage for the mobile hamburger menu. The
test suite now verifies semantic navigation rendering, accessible
open/close state, mobile menu links, and closing the open menu when the
viewport crosses into the desktop breakpoint.

## 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 — test-only change.

## Checklist before requesting a review:

- [x] I have read the `CONTRIBUTING.md` file.
- [ ] 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.
- [ ] I have started 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).
- [ ] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

app/components/navbar.test.tsx

@@ -1,21 +1,46 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { act, render, screen, fireEvent } from '@testing-library/react';
 import Navbar from './navbar';
 import type { ReactNode } from 'react';
 
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: vi.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
-});
+type MatchMediaChangeListener = (event: MediaQueryListEvent) => void;
+
+function mockMatchMedia(initialMatches = false) {
+  let matches = initialMatches;
+  const listeners = new Set<MatchMediaChangeListener>();
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+      get matches() {
+        return matches;
+      },
+      media: query,
+      onchange: null,
+      addListener: vi.fn((listener: MatchMediaChangeListener) => listeners.add(listener)),
+      removeListener: vi.fn((listener: MatchMediaChangeListener) => listeners.delete(listener)),
+      addEventListener: vi.fn((event: string, listener: MatchMediaChangeListener) => {
+        if (event === 'change') listeners.add(listener);
+      }),
+      removeEventListener: vi.fn((event: string, listener: MatchMediaChangeListener) => {
+        if (event === 'change') listeners.delete(listener);
+      }),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+
+  return {
+    setMatches(nextMatches: boolean) {
+      matches = nextMatches;
+      listeners.forEach((listener) => {
+        listener({
+          matches,
+          media: '(min-width: 768px)',
+        } as MediaQueryListEvent);
+      });
+    },
+  };
+}
 
 vi.mock('framer-motion', () => ({
   motion: {
@@ -34,6 +59,9 @@ vi.mock('lucide-react', () => ({
 describe('Navbar mobile menu', () => {
   beforeEach(() => {
     window.innerWidth = 500;
+    mockMatchMedia(false);
+    window.localStorage.clear();
+    document.documentElement.className = '';
   });
 
   it('menu is hidden by default', () => {
@@ -63,23 +91,65 @@ describe('Navbar mobile menu', () => {
     expect(screen.queryByText(/closeicon/i)).toBeNull();
   });
 
-  it('closes menu on resize to desktop', () => {
+  it('keeps menu open when a plain resize event fires below desktop', () => {
     render(<Navbar />);
 
     const button = screen.getByLabelText(/open menu/i);
 
     fireEvent.click(button);
 
-    window.innerWidth = 1200;
-
-    window.matchMedia = vi.fn().mockImplementation(() => ({
-      matches: true,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-    }));
-
     window.dispatchEvent(new Event('resize'));
 
     expect(button.getAttribute('aria-expanded')).toBe('true');
   });
 });
+
+describe('Navbar responsive breakpoints', () => {
+  beforeEach(() => {
+    window.innerWidth = 500;
+    window.localStorage.clear();
+    document.documentElement.className = '';
+  });
+
+  it('renders semantic navigation and mobile menu controls at small widths', () => {
+    mockMatchMedia(false);
+
+    render(<Navbar />);
+
+    expect(screen.getByRole('navigation')).toBeTruthy();
+    expect(screen.getByRole('link', { name: /go to home/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /open menu/i }).getAttribute('aria-expanded')).toBe(
+      'false'
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /open menu/i }));
+
+    expect(screen.getByRole('button', { name: /close menu/i }).getAttribute('aria-expanded')).toBe(
+      'true'
+    );
+    expect(screen.getAllByRole('link', { name: /customization studio/i })).toHaveLength(2);
+    expect(screen.getAllByRole('link', { name: /github repo/i })).toHaveLength(2);
+  });
+
+  it('closes the open hamburger menu when crossing into the desktop breakpoint', () => {
+    const matchMedia = mockMatchMedia(false);
+
+    render(<Navbar />);
+
+    fireEvent.click(screen.getByRole('button', { name: /open menu/i }));
+
+    expect(screen.getByRole('button', { name: /close menu/i }).getAttribute('aria-expanded')).toBe(
+      'true'
+    );
+
+    act(() => {
+      matchMedia.setMatches(true);
+    });
+
+    expect(screen.getByRole('button', { name: /open menu/i }).getAttribute('aria-expanded')).toBe(
+      'false'
+    );
+    expect(screen.getAllByRole('link', { name: /customization studio/i })).toHaveLength(1);
+    expect(screen.getAllByRole('link', { name: /github repo/i })).toHaveLength(1);
+  });
+});