Navigation UX

Goals

General Design

Includes:

Updated links and comments below

The horizontal and vertical lines should continue the full width and height of the screen at all times.
In medium screens, the nav icons should be right alined at all times.
- Design shows a width 900px. But if the viewport was 950px icons should be aligned to the right and not the left.

The entire bounding area of the text input should be clickable
Clicking anywhere outside of the search input or search dropdown should deactivate / close the search.
The five most recent search terms (for the device) should be displayed when the search is initially activated.
The user can clear device search history by clicking Clear History
As the user starts to type, the dropdown should show Predictive Search Terms and Suggested Results. Note that Suggest results should favour channels / groups etc that the user either is subscribed to, or as visited before. e.g. If I search Rami, I should see Rami Albatal before any other Rami out there.
On Desktop, the user should be able to navigate through the dropdown by using up/down arrow keys. Pressing enter should jump to the selected item.
Search input note: please disable autocomplete autocorrect autocapitalize and spellcheck

Need to distinguish between Seen and Unseen notifications.
Notifications should be grouped together. If a single post received 100 up-votes, we should not display 100 individual notification. Rather we should display them as a single notification. e.g. Michael and 99 others liked “My first post”.
A notification should be marked as seen, simply by activating the notification dropdown. In this case
A red dot, with unseen notification count should display when there are any unseen notifications.
If seen/unseen state should be persisted centrally, so between devices (e.g. web and mobile) the state of seen and unseen notifications are consistent.

Edited Jan 09, 2020 by Michael Bradley