Implement local styled components for Header

This commit implements the various local styled atom components the
`Header` organism component consists of.
This includes the main HTML `header` element with flexbox layout that
contains two containers.

The first left-sided container is the branding logo and caption while
the second one provides the navigation link list and global theme mode
switch button. The navigation link list will be replaced with a slide
menu when reaching the CSS breakpoint. This menu will slide down
starting right below the `header` and provides the navigation links for
shrinked width views.

The global theme mode switch consists of the `MoonIcon` and `SunIcon`
components which are animated to "rise up and go down" when toggled.

All components will adhere to maximum content width based on the
`Content` core container component.

Associated epic: GH-63
GH-64

src/components/organisms/core/Header/shared/styles.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Provides shared component styles.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+
+import { rgba } from "polished";
+
+import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+/**
+ * The default height (in `px`) of the header when in unpinned mode.
+ *
+ * @type {number}
+ */
+const HEADER_HEIGHT = 80;
+
+/**
+ * The default height (in `px`) of the header for the pinned mode in pixels.
+ *
+ * @type {number}
+ */
+const HEADER_HEIGHT_PINNED = 56;
+
+const backgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST]
+});
+
+const linkBackgroundColorHover = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.4),
+  [MODE_DARK_NIGHT_FROST]: rgba(colors.nord3, 0.8)
+});
+
+export { backgroundColor, linkBackgroundColorHover, HEADER_HEIGHT, HEADER_HEIGHT_PINNED };

src/components/organisms/core/Header/styled/ContentBox.jsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import Content from "containers/core/Content";
+
+/**
+ * A flexbox container that vertically aligns the content in the center with dynamic space.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+const ContentBox = styled(Content)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export default ContentBox;

src/components/organisms/core/Header/styled/Header.jsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+import { em } from "polished";
+
+import {
+  colors,
+  motion,
+  themedMode,
+  zIndexFor,
+  MODE_BRIGHT_SNOW_FLURRY,
+  MODE_DARK_NIGHT_FROST,
+  Z_INDEX_ELEMENTS
+} from "styles/theme";
+
+import { backgroundColor } from "../shared/styles";
+
+const dropShadow = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: `0 5px 10px 0 ${colors.shadow.minimal[MODE_BRIGHT_SNOW_FLURRY]}`,
+  [MODE_DARK_NIGHT_FROST]: `0 5px 10px 0 ${colors.shadow.minimal[MODE_DARK_NIGHT_FROST]}`
+});
+
+/**
+ * The styled header with a fixed position and flexible height for the pinned(collapsed) and unpinned (expanded) header
+ * modes.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+const Header = styled.header`
+  display: flex;
+  position: fixed;
+  top: 0;
+  height: ${({ height, heightPinned, isPinned }) => (isPinned ? `${em(heightPinned)}` : `${em(height)}`)};
+  width: 100%;
+  z-index: ${zIndexFor(Z_INDEX_ELEMENTS.HEADER)};
+  background-color: ${backgroundColor};
+  box-shadow: ${({ isPinned }) => isPinned && dropShadow};
+  transition: height ${motion.speed.duration.transition.area.medium}ms ease-in-out,
+    box-shadow ${motion.speed.duration.transition.area.medium}ms ease-in-out,
+    background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+  user-select: none;
+`;
+
+export default Header;

src/components/organisms/core/Header/styled/Logo.jsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+import { em } from "polished";
+
+import { Nord } from "atoms/core/vectors/logos";
+
+/**
+ * Nord's logo as SVG vector graphic component with a dynamic size based on the given `size` prop.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+const Logo = styled(Nord)`
+  display: block;
+  width: ${({ size }) => em(size * 0.45)};
+  height: ${({ size }) => em(size * 0.45)};
+`;
+
+export default Logo;

src/components/organisms/core/Header/styled/LogoBannerBox.jsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+/**
+ * A flexbox container for Nord's logo and caption components.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+const LogoBannerBox = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export default LogoBannerBox;

src/components/organisms/core/Header/styled/LogoCaption.jsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { motion, ms } from "styles/theme";
+
+/**
+ * Caption for Nord's logo component.
+ * It will fade out when the header changes into pinned (collapsed) mode.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+const LogoCaption = styled.span`
+  font-size: ${ms(6)};
+  font-weight: 500;
+  transition: opacity ${motion.speed.duration.transition.text.fade}ms ease-in-out;
+  opacity: ${({ isPinned }) => isPinned && 0};
+  margin-left: 0.2775em;
+`;
+
+export default LogoCaption;

src/components/organisms/core/Header/styled/MoonIcon.jsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import posed from "react-pose";
+
+import { Moon } from "atoms/core/vectors/icons";
+
+import { themeModeSwitchIconPoseConfig } from "./poseConfig";
+
+const PosedMoonIcon = React.forwardRef((props, ref) => <Moon svgRef={ref} {...props} />);
+
+/**
+ * The animated "moon" icon of the theme mode switcher button with pose configurations.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+const MoonIcon = posed(PosedMoonIcon)(themeModeSwitchIconPoseConfig);
+
+export default MoonIcon;

src/components/organisms/core/Header/styled/Nav.jsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+/**
+ * A flexbox navigation for the link components.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+const Nav = styled.nav`
+  display: flex;
+`;
+
+export default Nav;

src/components/organisms/core/Header/styled/NavLink.jsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { A } from "atoms/core/HTMLElements";
+import { motion } from "styles/theme";
+
+import { linkBackgroundColorHover } from "../shared/styles";
+
+/**
+ * A navigation link.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+const NavLink = styled(A)`
+  border-radius: 0.25em;
+  padding: 0.15em 0.5em;
+  transition: background-color ${motion.speed.duration.transition.area.small}ms ease-in-out;
+
+  &:active,
+  &:focus,
+  &:hover {
+    background-color: ${linkBackgroundColorHover};
+  }
+`;
+
+export default NavLink;

src/components/organisms/core/Header/styled/NavList.jsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { ms } from "styles/theme";
+
+/**
+ * A flexbox list for navigation links with dynamic spacing.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+const NavList = styled.div`
+  display: none;
+  justify-content: space-between;
+  font-size: ${ms(1)};
+
+  * {
+    margin: 0 0.556em;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
+  ${({ theme }) => theme.media.tabletPortrait`
+    display: flex;
+  `};
+`;
+
+export default NavList;

src/components/organisms/core/Header/styled/SlideMenuBox.jsx

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import posed from "react-pose";
+import { em } from "polished";
+
+import { motion, zIndexFor, Z_INDEX_ELEMENTS } from "styles/theme";
+import { HEADER_HEIGHT, HEADER_HEIGHT_PINNED } from "organisms/core/Header";
+
+import { backgroundColor } from "../shared/styles";
+import { slideMenuNavigationPoseConfig } from "./poseConfig";
+
+/**
+ * A compact responsive menu for small width layouts with a sliding animation starting below the main header container.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+const SlideMenuBox = styled(posed.div(slideMenuNavigationPoseConfig))`
+  position: absolute;
+  top: ${({ isPinned }) => (isPinned ? em(HEADER_HEIGHT_PINNED) : em(HEADER_HEIGHT))};
+  width: 100%;
+  background-color: ${backgroundColor};
+  text-align: center;
+  z-index: ${zIndexFor(Z_INDEX_ELEMENTS.HEADER_COMPACT_SLIDE_MENU)};
+  overflow-y: auto;
+  transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+
+  ${({ theme }) => theme.media.tabletPortrait`
+    display: none;
+  `};
+`;
+
+export default SlideMenuBox;