Core Organism Component: Header

[arcticicestudio]

Associated epic: #63, #2, #69
Depends on: #66, #70, #72

This issue documents the core organism component Header which is an essential part of Nord Docs. It'll provide the main site navigation and a user action component to toggle between the global theme modes.

Layout

The header will use a CSS flexbox layout consisting of two container components with the maximum of flexible space between both. The containers will contain the branding component and the navigation like documented in the sections below.

Navigation

To allows users to simply navigate around the site, the component will provide the quickly accessible navigation. The navigation will be placed in the right-sided container.

As of now the following items are planned:

• “Ports” — links to /ports, the landing page for all Nord port projects.
• “Docs” — links to /docs, the landing page for Nord's documentation.
• “Blog” — links to /blog, the landing page for Nord's blog.
• “Community” — links to /community, the landing page of the Nord community channels.

Branding

To represent Nord's branding, the left-sided container will contain the Nord logo with a label. It'll link to Nord Docs landing page to allow quick access to the root (/) page.

Theme Mode Switcher

The user action component mentioned in the introduction paragraph above will allows to toggle between the available global theme modes. Both modes will be represented through icons where a sun is used for “bright snow flurry” and a moon for “dark night frost” mode. They'll be implemented using the awesome React Pose project to animate the switching. The icons will “fly out and in” within the bounds of the component that'll take the form of a button.

Like documented in the Iconography design concept, the awesome Eva Icons project will be used where the “moon” and “sun” icons will represent the both available theme modes.

Responsive Design

For reduced width views (responsive design) the header will adjust several styles and composed components.

Slide Menu

The main navigation link list will be hidden and replaced by a user action element (button) that toggles an animated slide down menu containing the navigation links. The drop down will start right below the header and take up the available height and width to cover the full screen. As soon as the animation starts all scroll events will be removed from the underlying content (body) using the body-scroll-lock project. This prevents users from scrolling the content below the menu when the menu itself overflows the Y-axis and shows a scroll bar.

Behavior

To allow quick access while also being inconspicuous, the component will be sticky at the top of the site, but will collapse as soon as the user scrolls down. It'll only switch into expanded mode when at top of the site.
In expanded mode, the height of the header will be larger and the label of the logo will be visible. As soon as switching into collapsed mode the height will decrease and the logo label will fade out with a smooth transition animation.

To achieve the resizing animation based on the scroll position the subscribe-ui-event project will be used to listen to scroll events. It provides throttling by default, only calls document.body.scrollTop and window.innerWidth once and uses requestAnimationFrame for the best performance.

Tasks

• Install required dependencies:
  • body-scroll-lock
  • react-pose
  • subscribe-ui-event
  • eslint-import-resolver-jest
• Implement vector icon and logo components for the theme mode switcher.
• Adjust and improve CSS media query breakpoints.
• Install eslint-import-resolver-jest plugin for test util function path resolving.
• Implement test utility function to render components with the global theme and modes.
• Implement core container component to handle maximum content width.
• Implement navigation link data with route mappings.
• Implement modular scale utility function (see Design Concept: Typography #2).
• Implement utility function to handle the z-index order of all components.
• Improve core atom HTML element A to handle innerRef forwarding.
• Improve motion speed styles for new animations.
• Implement required local styled atom components for Header.
• Implement the main Header component.