feat(Main Nav): Add Main Nav component (#111)

Author: GooBall

src/docs/pages/components/DocsHeaders.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { ButtonGhost } from '../../../buttons';
 import { PageActions, PageHeader, PageHeaderText, PageTitle } from '../../../headers';
-import { TabItem, TabMenu } from '../../../menus';
+import { TabItem, TabMenu } from '../../../navigation';
 import { Table, TableCell, TableRow } from '../../../tables';
 import { H1, H3, SizeType } from '../../../text';
 import { DocsPlayground, DocsPropsTableHeader } from '../../shared';

src/docs/pages/components/DocsMenus.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { TabItem, TabMenu } from '../../../menus';
+import { TabItem, TabMenu } from '../../../navigation';
 import { Table, TableCell, TableRow } from '../../../tables';
 import { H1, P, SizeType } from '../../../text';
 import { Align } from '../../../utils/AlignmentProps';

src/docs/shared/DocsPlayground.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { IconCode, IconEye, IconProject } from '../../icons';
-import { TabItem, TabMenu } from '../../menus';
+import { TabItem, TabMenu } from '../../navigation';
 import { H4 } from '../../text';
 import { Align } from '../../utils/AlignmentProps';
 import DocsCode from './DocsCode';

src/menus/index.ts

@@ -0,0 +1,9 @@
+import NavBar from './nav/NavBar';
+import TabItem from './tabs/TabItem';
+import TabMenu from './tabs/TabMenu';
+
+export {
+  TabMenu,
+  TabItem,
+  NavBar,
+};

src/navigation/index.ts

@@ -0,0 +1,21 @@
+import styled from '../../utils/mural-styled-components';
+
+interface TabMenuProps {
+  readonly children: React.ReactNode;
+  readonly ariaLabel?: string | undefined;
+}
+
+const NavBar = styled.nav.attrs<TabMenuProps>({
+  role: 'presentation',
+})`
+  display: flex;
+  height: 60px;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 6px solid ${(props) => props.theme.color.Primary};
+  background: ${(props) => props.theme.color.White};
+  box-shadow: ${(props) => props.theme.shadow.Medium};
+  position: relative;
+`;
+
+export default NavBar;

src/navigation/nav/NavBar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Align } from '../utils/AlignmentProps';
+import { Align } from '../../utils/AlignmentProps';
 
 interface TabMenuProps {
   readonly children: React.ReactNode;