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';