Revised Mobile Navigation & Header
The mobile navigation has be updated in the following regards. Note that updating the navigation, has also led to some inherent changes within the header. Both sets of changes are listed below.
Mac App Demo Navigation_Demo.app.zip
Navigation
- The navigation is no longer its own screen. Rather is animates in from the left-side, and pushes the page contents to the right.
- The avatar/hamburger menu has been removed from the lower menu, and now resides top-left of the screen.
- What was the menu icon in the lower menu is now the messenger icon
- Swiping left-right should activate the side menu. This will replace the existing activate composer functionality.
- Swiping right-left, tapping the area right of the menu, or tapping a menu option will close the side menu.
- Note that a background overlay of 50% opacity just to the right of the active menu.
- All animation has the following easing. (0.25, 0.1, 0.25, 1)
- The animation of the menu items are each offset by 50ms, and each have a duration of 250ms.
## Header
- New header is illustrated here https://design.minds.com/hosted/mobile/michael/mobile%231642-navigation/#artboard1
- The users avatar has a stroke, and a small hamburger icon bottom-right.
- Header include a wallet icon with current wallet token balance.
- Search input field is included with the header.
- It may not always be appropriate to have the hamburger menu button available for screens further down the user journey. e.g. Channel, Individual Settings etc. In this case, the hamburger menu will be replaced with a back arrow -> https://design.minds.com/hosted/mobile/michael/mobile%231642-navigation/#artboard10
- The entire header will be positioned statically, and therefore always available to the user whilst they scroll.