fix(navbar): show theme toggle on mobile screens (JhaSourav07#918)

## Description

Fixes JhaSourav07#889

This PR fixes the issue where the theme toggle button was not visible on
small/mobile screen sizes.

Previously, the theme toggle button was placed inside a desktop-only
container, causing it to disappear on smaller devices. This update
ensures that the theme toggle remains accessible across mobile, tablet,
and desktop screen sizes while preserving the existing responsive navbar
behavior.

## Changes Made

* Fixed responsive visibility issue for the theme toggle button
* Added proper mobile accessibility for theme switching
* Preserved existing desktop navbar layout
* Improved responsive navigation experience across different screen
sizes

## Pillar

* [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview

### Desktop View
<img width="1349" height="96" alt="image"
src="https://github.com/user-attachments/assets/fb039ef7-1c7e-49bd-94d0-60994a4888e4"
/>

### Tablet / Large Mobile View
<img width="703" height="98" alt="image"
src="https://github.com/user-attachments/assets/6efbe57b-8a20-490a-a2e9-36ef3e1b20b0"
/>
<img width="704" height="175" alt="image"
src="https://github.com/user-attachments/assets/c4dac4e8-2995-4789-ae1f-96f53ea8d241"
/>

### Mobile View

<img width="614" height="91" alt="image"
src="https://github.com/user-attachments/assets/0c608e44-d96a-44b5-8f74-bdc9b5942b4a"
/>
<img width="620" height="215" alt="image"
src="https://github.com/user-attachments/assets/146c5960-1501-439f-a6e4-88df9c8d3976"
/>

## 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.
* [x] My commits follow the Conventional Commits format.
* [x] I have made sure that only relevant files are included in this PR.
* [x] I have made sure that I have only one commit to merge in this PR.
* [x] The UI remains responsive across different screen sizes.
* [x] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

@JhaSourav07 Kindly review this PR. Thank you!

Author: JhaSourav07

app/components/navbar.tsx

@@ -161,15 +161,25 @@ export default function Navbar() {
               ))}
             </div>
 
-            <button
-              type="button"
-              className="md:hidden inline-flex items-center justify-center rounded-xl border border-white/15 bg-white/5 p-2 text-white/90 transition hover:bg-white/10"
-              aria-label={open ? 'Close menu' : 'Open menu'}
-              aria-expanded={open}
-              onClick={() => setOpen((prev) => !prev)}
-            >
-              {open ? <X size={20} /> : <Menu size={20} />}
-            </button>
+            <div className="md:hidden inline-flex items-center justify-center gap-2">
+              <button
+                type="button"
+                onClick={toggleTheme}
+                className="hidden sm:inline-flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white transition hover:bg-white/10"
+                aria-label="Toggle theme"
+              >
+                {isDark ? <Sun size={18} /> : <Moon size={18} />}
+              </button>
+              <button
+                type="button"
+                className="md:hidden inline-flex items-center justify-center rounded-xl border border-white/15 bg-white/5 p-2 text-white/90 transition hover:bg-white/10"
+                aria-label={open ? 'Close menu' : 'Open menu'}
+                aria-expanded={open}
+                onClick={() => setOpen((prev) => !prev)}
+              >
+                {open ? <X size={20} /> : <Menu size={20} />}
+              </button>
+            </div>
           </nav>
 
           {open ? (
@@ -189,6 +199,17 @@ export default function Navbar() {
                     </a>
                   </li>
                 ))}
+                <li className="sm:hidden">
+                  <button
+                    type="button"
+                    onClick={toggleTheme}
+                    className="inline-flex w-full items-center gap-2 rounded-xl border border-white/15 bg-white/5 px-4 py-2 text-sm font-medium text-white/90 transition hover:border-white/45 hover:bg-white/10"
+                    aria-label="Toggle theme"
+                  >
+                    {isDark ? <Sun size={18} /> : <Moon size={18} />}
+                    {isDark ? 'Light Mode' : 'Dark Mode'}
+                  </button>
+                </li>
               </ul>
             </div>
           ) : null}