fix(Navigation): Adding Basic Navigation

src/components/Navigation/Navigation.js

@@ -1,10 +1,19 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import Layout from './Layout';
 import { FitzyHeader, FitzyNavigation } from './Navigation.styled';
 
-const Navigation = ({ children }) => (
-  <FitzyHeader>{children(Layout)}</FitzyHeader>
+const Navigation = ({ children, isFixed }) => (
+  <FitzyHeader isFixed={isFixed}>{children(Layout)}</FitzyHeader>
 );
 
+Navigation.propTypes = {
+  isFixed: PropTypes.bool
+};
+
+Navigation.defaultProps = {
+  isFixed: false
+};
+
 export default Navigation;

src/components/Navigation/Navigation.styled.js

@@ -1,19 +1,26 @@
 import styled from 'styled-components';
 
 export const FitzyHeader = styled.header`
+  position: ${p => (p.isFixed ? 'fixed' : 'relative')};
+  top: 0;
+  left: 0;
+  width: 100%;
   display: grid;
-  grid-template:
-    '↩ 👾 ↪' /
-    auto 1fr auto;
+  grid-template: 'left 👾 right' / auto 1fr auto;
   width: 100%;
+  border: 1px solid;
 `;
 
 export const FitzyNavigation = styled.nav``;
 
 export const FitzyRight = styled.div`
-  grid-area: ↪;
+  grid-area: right;
+  display: flex;
+  align-items: center;
 `;
 
 export const FitzyLeft = styled.div`
-  grid-area: ↩;
+  grid-area: left;
+  display: flex;
+  align-items: center;
 `;

src/fitzy.js

@@ -5,6 +5,9 @@ export { default as Dropdown } from './components/Dropdown/Dropdown';
 export { default as RadioGroup } from './components/RadioGroup/RadioGroup';
 export { default as RadioOption } from './components/RadioGroup/RadioOption';
 
+// Layout
+export { default as Navigation } from './components/Navigation/Navigation';
+
 // Components
 export { default as Alert } from './components/Alert/Alert';