diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
index de1e693..6d089d2 100644
--- a/src/components/Navigation/Navigation.js
+++ b/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 }) => (
- {children(Layout)}
+const Navigation = ({ children, isFixed }) => (
+ {children(Layout)}
);
+Navigation.propTypes = {
+ isFixed: PropTypes.bool
+};
+
+Navigation.defaultProps = {
+ isFixed: false
+};
+
export default Navigation;
diff --git a/src/components/Navigation/Navigation.styled.js b/src/components/Navigation/Navigation.styled.js
index ab3bdf2..6a077c3 100644
--- a/src/components/Navigation/Navigation.styled.js
+++ b/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;
`;
diff --git a/src/fitzy.js b/src/fitzy.js
index 99615ae..ea689ea 100644
--- a/src/fitzy.js
+++ b/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';