Frontend(navbar): Enhance Mobile Navigation with Sheet Component #368

[violaberg]

Adjustments to the current basic mobile dropdown menu with a modern Sheet/Drawer component to provide a better mobile user experience and replace current implementation of a simple dropdown with slide-in drawer.

Screenshots / Screen Recordings

Original mobile nav:

Updated mobile nav:

• Support both logged-in and logged-out user states

• Theme toggle should appear before hamburger menu on mobile devices

• Add proper close functionality
• Preserve existing hamburger menu icon and animation
• Add Assessment Icon, Chat Icon, Profile Icon
• Maintain consistency with existing design system and color scheme

How to Test

Please provide step-by-step testing instructions. If any specific test data or test accounts are needed, mention them here.

1. Pull this branch
2. Follow setup instructions correctly as per README-developers.md
3. Navigate to [page xyz]
4. Verify that [specific behavior] occurs

Checklist

Before submitting this PR, the following must be confirmed:

• Pulled the latest main branch and resolved any merge conflicts
• Ran cd frontend && npm run build to confirm no type or build errors
• Ran linter/formatter commands (e.g., npm run lint) and fixed warnings/errors
  Ran it alright and got almost 20k errors, didn't fix. added new issue for UserIcon ESlint errors: Fix ESLint Errors in UserIcon.tsx #395
• Manually tested the feature/fix on relevant browsers/devices (if UI-related)
• Linked related issue(s) correctly in the PR description using closing keywords
• Added Screenshots to the PR where applicable. Screenshots are mandatory for any frontend, styling, or layout changes.

Issue Links

Closes Frontend(navbar): Enhance Mobile Navigation with Sheet Component #368

Additional Notes

Not sure if we should change icon colour to white, especially for Profile link, might be contrast issue

[vercel]

@violaberg is attempting to deploy a commit to the lmcrean's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dottie-backend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 26, 2025 1:03pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
dottie	⬜️ Ignored (Inspect)			Jun 26, 2025 1:03pm

[violaberg]

@lmcrean, @josephk-O , @adi-ray Could have a look at changes I've made so far so someone else can take over and finish mobile nav.

[adi-ray]

@lmcrean, @josephk-O , @adi-ray Could have a look at changes I've made so far so someone else can take over and finish mobile nav.

I see you haven't pushed the changes yet

[violaberg]

@adi-ray let me see if I forgot to push

[violaberg]

@adi-ray Yeah, I never pushed. Some code is commented out for now as I didn't finish it but eslint errors wouldn't let me push otherwise of course

[adi-ray]

bump @dev-rafiu

[dev-rafiu]

bump @dev-rafiu

i guess i can go ahead then. @violaberg

[violaberg]

Sure, go ahead!