Add responsive styles for navbar

[Dippp10-ally]

Summary

Improved navbar responsiveness across different screen sizes to ensure better layout consistency and usability on mobile, tablet, and desktop devices. This includes adjustments to navigation layout, spacing, and mobile behavior.

Closes #1320

Type of Change

• Bug fix
• New feature
• Documentation update
• Refactor / code cleanup

Changes Made

• Fixed navbar layout issues on smaller screen sizes
• Improved responsive behavior for navigation links
• Adjusted spacing and alignment for better UI consistency
• Ensured mobile menu displays correctly without overflow
• Added/updated responsive CSS rules for navigation components

How to Test

Steps for the reviewer to verify this works:

1. Run the project locally (npm run dev or equivalent)
2. Open the application in browser
3. Resize screen or use dev tools responsive mode
4. Verify navbar behavior on:
   • Mobile (≤480px)
   • Tablet (≤768px)
   • Desktop (>768px)
5. Check for:
   • No overflow issues
   • Proper alignment of nav items
   • Mobile menu visibility and toggle behavior (if applicable)

Screenshots (if UI change)

Add before/after screenshots showing navbar on mobile and desktop views.

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Added/updated tests if applicable (N/A for UI-only change)

[vercel]

@Dippp10-ally is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[github-actions]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!

[Dippp10-ally]

@Priyanshu-byte-coder ji , do assign labels called as gssoc:approved , level:intermediate , type:feature , quality:exceptional to above pull request number 1336....do merge above pull request number 1336....

[Dippp10-ally]

@Priyanshu-byte-coder ji , below is screenshot prior to changes are made.....

[Dippp10-ally]

@Priyanshu-byte-coder ji , below are screenshots after changes are made.....