Revamp mobile UI

I've been thinking about this for a while... Flarum's mobile UI can be a little annoying sometimes:
- You can only access the hamburger menu (and consequently search, notifications, log out, etc.) when you're on the homepage – not from any other page.
- Notifications, which are pretty important, are two taps away (hamburger > notifications). Would be better if they were one tap away.
- Whenever I want to filter by a certain tag, I instinctively press the hamburger button. Cannot unlearn. It's not obvious that you need to press the "All Discussions" title, especially when the hamburger button is right next to it.
- Search is hidden and cramped in the hamburger menu.

The solution? A tab bar.

Google have [just come around](http://www.theverge.com/2016/3/15/11236152/material-design-update-bottom-navigation-bar) to this way of thinking too. Really, hamburger menus suck as a _primary_ means of navigation.

Here's what I propose:


(Don't mind the out-of-date discussion list styles! I based this mockup on some old mockup files I had lying around :P)

The four tabs are inspired by Facebook's mobile web interface:
- **Home** is the equivalent of clicking the forum title. It takes you to the forum's default route. We could potentially allow this icon to be replaced with a custom brand icon.
- **Search** shows a blank page with a search box, ready to show you suggestions as you type.
- **Notifications** shows the notifications page. (I also want to merge Flags into Notifications and add the ability to filter the notifications list by type so you can still see a list of just flags. But I'll make another issue for that later.)
- **More** shows a page with the forum title/logo, the user menu, and any other links in the header.

Additionally, discussion list sort-by and "mark all as read" would go into a dropdown menu.

The tab bar would be the same on every page, stuck to the top when scrolling down, with the current tab (if any) highlighted. When viewing a discussion, there would be an additional sticky bar below the tab bar with the reply button and the post index/count.

Technically speaking, we can probably make this work with (more or less) the same component structure/markup as the desktop UI uses currently:

| Desktop | Mobile |
| --- | --- |
| Header | Tab bar |
| Forum logo | Home tab |
| Primary header links | (hidden) |
| Search box | Search tab, linking to a mobile-only page |
| Notifications dropdown | Notifications tab, linking to a mobile-only page |
| (hidden) | More tab, linking to a mobile-only page |

Any thoughts?

Start by reviewing the existing desktop component structure and markup alongside the proposed mobile mockup. Define how the tab bar, mobile-only Search, Notifications, and More pages, discussion controls, and sticky discussion bar should map onto the current UI. Done means mobile navigation is available on every page and the listed actions are accessible through the proposed layout.

Written by the indexing model from the issue text.