← Tasks

Mobile: Improved navigation

With the new sidebar, desktop navigation is vastly improved, however moving back and forth between workspace and projects on mobile is still very painful/confusing. E.g. from a user:

I found myself having a hard time to navigate back and forth between project and workspace, maybe something like a breadcrumb would make that more intuitive

Can we improve the mobile UX to fix this?

We should also fix the following during this work:

  • no clear way to login on mobile
  • no dark mode toggle on mobile

Requirements

There are 3 main groups of links: Workspace links, project links, and general links. This is a lot (!), so to simplify, we can keep project links separate, and build an expandable nav (perhaps full height/screen) with 2 variants, signed in, and signed out.

Signed in

  • Home
  • Projects
  • Updates
  • Members
  • Settings (Admin only)

_

  • Switch workspace
  • Help / support
  • Dark mode
  • Account settings
  • Sign out

Signed out

  • Projects
  • Updates
  • Members

_

  • Help / support
  • Dark mode
  • Login / sign up

Steps

  1. Pattern: Project nav
  2. Pattern: Workspace nav
  3. Pattern: Default nav
  4. Update default pages with new nav
  5. Update workspace pages with new nav
  6. Update project pages with new nav
  7. Release!
F
fwuensche 1 year ago

❤️

T
tyro 1 year ago

Looking at something like this:

mobile_nav.png

  • breadcrumbs to fix navigating between workspace <-> project
  • always visible project nav
  • collapsed workspace/general nav

NB. On very narrow/older phones, there will be some horizontal scrolling to access the right-most project link.

🚀 1
fwuensche reacted with :rocket
T
tyro 1 year ago

Improved mobile nav is now live. Not perfect, but should be much better than before.

image.png

T
tyro 1 year ago

Dark mode 🌙

image.png

❤️ 1
fwuensche reacted with :heart
Status
Done
Assignee
T
tyro
Due
Nov 25th
Following
F
T
Follow You're not tracking this item.