Notifications: use bell/alert/news notification menu

[agjohnson]

For now, this menu is unused, but we have had some plans on how to use this space for notifications. Loosely related to this is #313

• 313

If there is a solution that uses this space for all notifications, that would also solve #313. But otherwise, we've discussed this menu being used for news alerts.

A few points on usability here:

• The icon should help indicate what is in the menu.
  • On Transferwise, I noticed they use the same bell icon menu for all site notifications, but they only show a dot on the menu. I just recently clicked on the menu and found many unseen notifications. Because the bell icon menu only had a dot (and the dot is easy to miss), there was no reason for me to click the menu.
  • Azure does a fairly good job here last I used it. When a notification is added, the drop down menu expands and shows the most recent notification in the menu. This helps with layout shift issues, as the notification is contained in the drop down menu.

For our UX, I might want to play around with:

• Show all top of page notifications in the drop down menu instead
• Show a count of unread notifications
• On new error/warning/info notifications, the menu is expanded automatically
• At very least the notification header is shown in the dropdown, saving some space in the menu. Clicking the notification would expand, or something similar

[humitos]

I think these are good ideas to explore 👍🏼