Add Masthead component

[antictor]

Applications require a top bar that communicates the application/service name and optionally provides features for: search, user profile info, notifications and navigation.

The Masthead may or may not be used in conjunction with the Sidebar.

The Masthead needs to be modular to the application in question is able to use any combination of its features, including all or none of them.

Currently we don't have any applications that require the Masthead to support mobile, but this will come in time.

As this is potentially complex it may be worth creating the Masthead in stages, though the design should include all options to ensure that it will evolve without issue.

Initially the primary project for this simply requires the ability to display a logo and service name.

Another project, re-starting soon will also require the user profile section to be added.

Finally there is a project being worked on elsewhere that requires a Masthead including search and navigation.

[antictor]

Creating a basic version first that just has the logo and service name for current project.

[hxltrhuxze]

I've updated both the mobile and desktop comps to include placement for:

• Search
• Notifications
• Profile

---

Desktop Masthead

The Desktop version of the Masthead keeps the placement of the Notification Badge and the Profile Avatar, however adds the ability to have a Search Button next to them.

When the Search Button is clicked, the new Search Bar replaces the the nav with a dark background input. The input takes up the full height of the nav.

---

Mobile Masthead

To maintain usage consistency, not a lot has changed between the desktop and mobile versions of the Masthead.

The Search Bar still functions the same as it does on desktop - clicking the Search Button will open the bar over the Nav. Clicking it again will revert the UI.

The Nav Links sit within a container that overflows on the x-axis. This removes the need for a separate dropdown mobile menu.

---

Notification Sheet

The notification sheet now behaves slightly different on Desktop and Mobile. On Desktop, the regular Notification Sheet stays in its popover, just below the Notification Button. On Mobile, when the Notification Button is clicked, the Notification Sheet now becomes full screen. The bars at the top and bottom of the Sheet are fixed in place, with the list of notifications becoming a scrolling list.

[antictor]

ok I'll make a start

[09txzS1qs]

Both look good generally. 2 questions:

• Mobile masthead: Like the overflow on the X axis rather than dropdown, however is it worth having an arrow pointing left to indicate you can swipe to see more options rather than half cut off words like "calend-" ? Might be overkill or be less clear.
• For full screen notifications, could we have headings? So Notficiations is a bit bigger, and then we have sub headings for time. Attached Jira mobile Notifications screenshot as a reference for what I mean.

[antictor]

Any chance of a Sketch file to go with this or something we can inspect?

[antictor]

Can you add focus states for the search/notification/avatar links/buttons for people using keyboard navigation?