Improve header UI on mobile

[ZhangYiJiang]

The current two row v3 mobile header takes up too much space. I'm opening the discussion to what we can do to improve it

For the space problem, I see three possible solutions

• Don't sticky the header at all - the navigation buttons are not frequently used enough to warrant making them sticky. The downside is that on longer pages this may make it harder to navigate to other pages
• Sticky only the navtabs - since the top bar only has the NUSMods logo, which takes you back to the timetable anyway, we can make only the navtabs sticky
• Show only on scroll up - using something like React Headroom, we can implement the previous idea, but adopt a more app-like approach of only showing the navtabs when the user scrolls upwards

Comments?

[taneliang]

I don't like the idea of using React Headroom - they've always felt annoying because they'll jump in your face the moment you scroll up. I'd say that sticky only navtabs is the best solution but it may still be too tall on landscape mobile though.

Also it may be acceptable not to sticky the header on iPhones as you can still scroll to the top easily, but having an exception for one platform is probably not the best way to go.