test(navbar): add mobile menu toggle unit tests (JhaSourav07#590)

## Description
Added unit tests for the Navbar mobile menu toggle behavior.

### Changes made
- Added `app/components/navbar.test.tsx`
- Mocked `framer-motion`
- Mocked `lucide-react`
- Added `window.matchMedia` mock for test environment
- Added tests for:
  - menu hidden by default
  - menu opens on button click
  - menu closes on second click
  - menu closes on desktop resize

Fixes JhaSourav07#346 

## Pillar

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

## Visual Preview
<img width="510" height="896" alt="Screenshot 2026-05-27 202550"
src="https://github.com/user-attachments/assets/67b4625f-8990-4b35-a7d8-e8e3aaee634c"
/>
<img width="510" height="896" alt="Screenshot 2026-05-27 202754"
src="https://github.com/user-attachments/assets/502c8b70-a8a1-4b77-94f1-10a1c2156a77"
/>


## 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): ...`).
- [ ] 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.
- [ ] 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

@@ -0,0 +1,85 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { 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(),
+  })),
+});
+
+vi.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  },
+}));
+
+vi.mock('lucide-react', () => ({
+  Menu: () => <div>MenuIcon</div>,
+  X: () => <div>CloseIcon</div>,
+  Activity: () => <div>ActivityIcon</div>,
+  Sun: () => <div>SunIcon</div>,
+  Moon: () => <div>MoonIcon</div>,
+}));
+
+describe('Navbar mobile menu', () => {
+  beforeEach(() => {
+    window.innerWidth = 500;
+  });
+
+  it('menu is hidden by default', () => {
+    render(<Navbar />);
+
+    expect(screen.queryByText(/closeicon/i)).toBeNull();
+  });
+
+  it('opens menu on button click', () => {
+    render(<Navbar />);
+
+    const button = screen.getByLabelText(/open menu/i);
+
+    fireEvent.click(button);
+
+    expect(screen.getByText(/closeicon/i)).toBeTruthy();
+  });
+
+  it('closes menu on second click', () => {
+    render(<Navbar />);
+
+    const button = screen.getByLabelText(/open menu/i);
+
+    fireEvent.click(button);
+    fireEvent.click(button);
+
+    expect(screen.queryByText(/closeicon/i)).toBeNull();
+  });
+
+  it('closes menu on resize to 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');
+  });
+});