fix: make mobile navbar search bar compact

[chethanamp22-tech]

Summary [required]

The mobile navbar menu existed in HTML and CSS but was non-functional because the initMobileNav() function in the JS file was incomplete — it located the toggle and menu elements but never attached any event listeners. This PR completes the function and also fixes the mobile search bar which was oversized due to shared CSS rules between desktop and mobile inputs.

Related Issue [required]

Closes #835

Type of Change [required]

• Bug fix — resolves a broken behaviour
• Feature — adds new functionality
• Data — adds new projects to data/projects.json
• Documentation — updates docs, README, or code comments only
• Style — CSS or visual changes only, no logic change
• Refactor — restructures code without changing behaviour
• Test — adds or updates tests

What Was Changed [required]

File	Change made
static/main.js	Completed initMobileNav() with click toggle and link-close listeners
static/style.css	Split #topic-search and #topic-search-mobile into separate rules to fix oversized mobile search bar
templates/index.html	Added hamburger button HTML for mobile navbar toggle

How to Test This PR [required]

1. Clone this branch: git checkout fix/mobile-navbar
2. Install dependencies: pip install -r requirements.txt
3. Run the app: python app.py
4. Open http://127.0.0.1:5000/ in DevTools mobile view (375px)
5. Click the hamburger menu icon — menu should open
6. Click any nav link — menu should close
7. Verify search bar appears as a single compact row

Expected test output:

27 passed, 0 failed out of 27 tests

Test Results [required]

Pre-existing test failure on main branch unrelated to this PR:
ImportError: cannot import name 'WEIGHT_LEVEL' from 'utils.recommender'

This PR only modifies static/style.css, static/script.js and index.html.
No Python files were touched.

paste output here

Screenshots (if UI change)

Before	After

|

Self-Review Checklist [required]

• I have read CONTRIBUTING.md and followed all guidelines
• My branch name follows the convention: feat/, fix/, docs/, data/, style/, test/
• I have run python tests/test_basic.py and all 27 tests pass
• I have run flake8 . locally and there are no errors
• I have not introduced any print() or console.log() debug statements
• Every new function I wrote has a docstring
• I have not modified files outside the scope of the linked issue
• If I changed the UI, I tested it at 375px (mobile) and 1280px (desktop)
• If I added a project to the dataset, it has all required JSON fields

Notes for Reviewer

The initMobileNav() function was stubbed out but never completed. No new dependencies or logic changes outside the navbar scope.

[vercel]

@chethanamp22-tech is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your first pull request to DevPath.

Before review:

• Complete the PR template fully
• Ensure all tests pass
• Link your PR to an issue
• Keep changes scoped to the issue

A maintainer will review your contribution soon.