Feature/navigation

.eslintrc

@@ -15,7 +15,7 @@
         "node": true,
         "es6": true
     },
-    "ignorePatterns": ["dist", "setupTests.ts", "babel.config.js"],
+    "ignorePatterns": ["dist", "setupTests.ts", "babel.config.js", "www"],
     "rules": {
         "comma-dangle": "off",
         "class-methods-use-this": "off",

src/components/Navigation/Horizontal/Divider.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+type NavigationDividerProps = React.HTMLAttributes<HTMLDivElement>;
+
+const NavigationDivider = React.forwardRef<HTMLDivElement, NavigationDividerProps>((
+    _,
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className="vertical-navigation-divider"
+    />
+));
+
+NavigationDivider.displayName = 'NavigationDivider';
+
+export default NavigationDivider;

src/components/Navigation/Horizontal/List.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+type NavigationListProps = React.HTMLAttributes<HTMLElement>;
+
+const NavigationList = React.forwardRef<HTMLElement, NavigationListProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <nav
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-list',
+            className
+        )}
+    >
+        {children}
+    </nav>
+));
+
+NavigationList.displayName = 'NavigationList';
+NavigationList.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
+export default NavigationList;

src/components/Navigation/Horizontal/ListItem.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+interface NavigationListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    active?: boolean;
+    icon?: React.ReactElement;
+}
+
+const NavigationListItem = React.forwardRef<HTMLDivElement, NavigationListItemProps>((
+    {
+        active,
+        children,
+        className,
+        icon
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-list-item',
+            active && 'active',
+            className
+        )}
+    >
+        {icon && (
+            <div className="vertical-navigation-list-item-icon">
+                {icon}
+            </div>
+        )}
+        {children}
+    </div>
+));
+
+NavigationListItem.displayName = 'NavigationListItem';
+NavigationListItem.propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    icon: PropTypes.element
+};
+
+export default NavigationListItem;

src/components/Navigation/Navigation.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Panel } from '@/components';
+import clsx from 'clsx';
+
+interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
+    sticky?: boolean;
+}
+
+const Navigation = React.forwardRef<HTMLElement, NavigationProps>((
+    {
+        children,
+        className,
+        sticky
+    },
+    ref
+): React.ReactElement => (
+    <nav
+        ref={ref}
+        className={clsx(
+            'navigation-list',
+            sticky && 'navigation-sticky',
+            className
+        )}
+    >
+        {children}
+    </nav>
+));
+
+Navigation.displayName = 'PageNavigation';
+Navigation.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    sticky: PropTypes.bool
+}
+
+export default Navigation;

src/components/Navigation/Vertical/Divider.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+type NavigationDividerProps = React.HTMLAttributes<HTMLDivElement>;
+
+const NavigationDivider = React.forwardRef<HTMLDivElement, NavigationDividerProps>((
+    _,
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className="vertical-navigation-divider"
+    />
+));
+
+NavigationDivider.displayName = 'NavigationDivider';
+
+export default NavigationDivider;

src/components/Navigation/Vertical/List.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+type NavigationListProps = React.HTMLAttributes<HTMLElement>;
+
+const NavigationList = React.forwardRef<HTMLElement, NavigationListProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <nav
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-list',
+            className
+        )}
+    >
+        {children}
+    </nav>
+));
+
+NavigationList.displayName = 'NavigationList';
+NavigationList.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
+export default NavigationList;

src/components/Navigation/Vertical/ListItem.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { NavigationContext } from './NavigationContext';
+
+interface NavigationListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    active?: boolean;
+    content?: React.ReactNode;
+    icon?: React.ReactElement;
+}
+
+const NavigationListItem = React.forwardRef<HTMLDivElement, NavigationListItemProps>((
+    {
+        active,
+        children,
+        className,
+        icon
+    },
+    ref
+): React.ReactElement => {
+    return (
+        <NavigationContext.Consumer>
+            {() => (
+                <div
+                    ref={ref}
+                    className={clsx(
+                        'vertical-navigation-list-item',
+                        active && 'active',
+                        className
+                    )}
+                >
+                    {icon && (
+                        <div className="vertical-navigation-list-item-icon">
+                            {icon}
+                        </div>
+                    )}
+                    <span className="vertical-navigation-list-item-text">
+                        {children}
+                    </span>
+                </div>
+            )}
+        </NavigationContext.Consumer>
+    )
+});
+
+NavigationListItem.displayName = 'NavigationListItem';
+NavigationListItem.propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    icon: PropTypes.element
+};
+
+export default NavigationListItem;

src/components/Navigation/Vertical/NavigationContext.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+export interface NavigationContextProps {
+    tooltipsWhenCollapsed: boolean;
+    collapsed: boolean;
+}
+
+export const NavigationContext = createContext<NavigationContextProps>({
+    tooltipsWhenCollapsed: true,
+    collapsed: false
+});

src/components/Navigation/Vertical/Top.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+type NavigationTopProps = React.HTMLAttributes<HTMLDivElement>;
+
+const NavigationTop = React.forwardRef<HTMLDivElement, NavigationTopProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-top',
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+NavigationTop.displayName = 'NavigationTop';
+NavigationTop.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+}
+
+export default NavigationTop;

src/components/Navigation/Vertical/VerticalNavigationScope.ts

@@ -0,0 +1,4 @@
+export interface VerticalNavigationScope {
+    collapsed: boolean;
+    collapse: () => void;
+}