Hamburger shows/hides menu on mobile

[antonyharfield]

✅ DoD

• All work is complete
• Migrations: NA
• Documentation: NA
• Release notes: NA
• Issues linked: resolves [Home] Fix burger button #20

🛑 Problems

• Not sure if I did the right thing with the right button padding?

📝 Summary

• Hamburger shows/hides menu on mobile
• "Add an event" right nav bar button is compressed on mobile
• "Add an event" has subtler background normally, and crazy background on hover

💡 More ideas

I thought about changing it to be "Share an event", but we already have quite a few different words ("add", "create", "host", "suggest"). We might want to tidy our verbiage! Is that the right word? :p

📸 Screenshots

[charles-allen]

1. It's not clear to me if @Ref from vue-property-decorator is the "Vue-3" way to manage refs. There was a lot of discussion about @Prop which I consider semi-deprecated (because that design cannot support types). I don't know how this extends to @Ref (if at all); if it works for now, I guess let's do it; and just keep it in mind.

2. I don't know if there's precedent on iOS. The closest to this on Android is a navigation drawer. If you click a menu item, it closes the drawer too. I think on balance I slightly prefer that vs keeping the drawer open. It's a quick fix, so I'll commit it and we can revert if we decide not to go that way.

3. I'm also not sure about the lingering focus ring on the hamburger after closing the menu & mousing away - I think this is also an easy fix; so let's try it :)

   

[charles-allen]

I was seeing warnings related to vue-property-decorator (which I think mean vue-property-decorator & vue-class-component aren't in sync):

I've updated to vue-property-decorator@next, which seems to have sync'd the 2 libs & fixed the warnings. Everything still seems to work :)

[charles-allen]

LGTM. I made a couple of tweaks that I prefer; but we can revert if necessary.

[antonyharfield]

Noice tweaks!