Show logo and project abbreviation on mobile

[josephmyers]

This allows navigation to My Projects when clicking the menu drawer on phones. It's a little confusing that the logo is present on desktop but not mobile. Users with both will be wondering where to go. This solution maintains the original intent of minimizing onscreen clutter for mobile.

(We don't have enough space to show the project name, but this is okay.)

---

This change is 

[josephmyers]

@Nateowami @nigel-wells we didn't discuss this change, so I'd like to get your thoughts. We don't have to wait til the next UX meeting.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 80.92%. Comparing base (f54210b) to head (ed5a5ea).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2915   +/-   ##
=======================================
  Coverage   80.91%   80.92%           
=======================================
  Files         533      533           
  Lines       31224    31227    +3     
  Branches     5085     5063   -22     
=======================================
+ Hits        25265    25269    +4     
- Misses       5198     5210   +12     
+ Partials      761      748   -13     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[nigel-wells]

That's an interesting approach - nice reveal animation.

There probably is enough room on mobile for the image to be there the whole time. 320px is as low as we need to go (that's probably increased by now with newer (load end still) phones

How about we just hide the project name but keep the image.

I do think at times if we need the language selector there all the time - surely its something you set once and you're done. Showing it all the time is only useful if you need quick access all the time. Help could probably move as well. Perhaps both could go into the nav drawer up the top. This would give a nice clean topbar for mobile - might even be able to put the project name back in with all the additional space!

[josephmyers]

Fair enough. I can certainly undo the animation and make it static.

My reasons for hiding it are:

• It's already hidden.
• It's one less button onscreen.
• If they're wanting to get to their projects, without using the avatar menu, they're probably going to tap the menu. I could absolutely picture a world where both are always shown and people tap the menu instead of the logo, just because it's the familiar menu icon and the logo is not. It's not insanely obvious that the logo is clickable, unless you've done it before. (You somewhat have this problem with my change, but my solution clearly communicates that the menu button does not lead you to your projects.)

As for the help:

• I believe we want it visible to be readily accessible. It's kind of intended to be our "emergency" button.
• I don't really think the top of the nav drawer would work, for mobile or desktop. It seems like an odd place to put it, and that would make us to redesign an extra row in above the Translate header. If we really want to move it, maybe in the avatar menu?

As for the language:

• Kind of the same thing about needing visibility and accessibility, but I do agree that, once they change it, they probably don't care about it anymore.
• I don't think the top of the nav drawer would work here, either. But I think the avatar menu does make a good bit more sense here. It's kind of associated with them as a person.

As for also showing the project name:

• I'm a little concerned that this would reduce the cleanliness of the top bar. Showing the button and the project, even after removing the language and maybe the help, would take up all the remaining empty space on that bar, and I think it'd look cramped.

E.g.:

[nigel-wells]

The animation was great - I liked that :)
All fair comments and sure, if help is used lots, then lets keep it there. Just as an example of where it could go in the nav menu, it could be tucked nicely down the bottom which I've seen on a number of other apps.
https://balsamiq.cloud/sghq53/pejrlz8/r4C63

How about if we showed just the shortcode? I think there is some value having the current project somewhere easy to discover. The short code won't take up too much space vs the project name.

Putting the language into the user menu makes sense to me - it is a set and forget thing. Also, putting it in the user menu means we can give it similar treatment like the razor page where the language word is in full alongside the supporting icon.

Feel free to come up with some other versions as well - or just go ahead with what you're thinking.

[josephmyers]

Yeah, let's flesh out some ideas in Balsamiq. I wanna make sure I understand you fully and get all the different scenarios processed.

[josephmyers]

I went ahead and split out the localization move to #2922. I'd like to keep things separated, so that we don't get everything hung up if one item turns out to be controversial.

[nigel-wells]

I think this looks great - will be even better when the language is moved too.