Added an open / close button for the facility map.

src/actions/action-types.js

 export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';
+export const TOGGLE_SIDEBAR_MAP = 'TOGGLE_SIDEBAR_MAP';
 export const SET_FACILITIES = 'SET_FACILITIES';
 export const GET_FACILITIES = 'GET_FACILITIES';
 export const SET_SIDEBAR = 'SET_SIDEBAR';

src/actions/ui.js

@@ -4,6 +4,7 @@ import {
     SET_SEARCH_TERM,
     SET_SIDEBAR,
     TOGGLE_SIDEBAR,
+    TOGGLE_SIDEBAR_MAP,
     SET_ALL_FAVORITES
 } from './action-types';
 
@@ -11,6 +12,10 @@ export const toggleSidebar = () => ({
     type: TOGGLE_SIDEBAR,
 });
 
+export const toggleSidebarMap = () => ({
+   type: TOGGLE_SIDEBAR_MAP,
+});
+
 export const setSidebar = (facility) => ({
     type: SET_SIDEBAR,
     facility,

src/components/FacilitiesMap.js

@@ -93,11 +93,11 @@ class FacilitiesMap extends React.Component {
 
 
     render (){ 
-        const {facilities,facility,classes} = this.props
+        const {facilities,facility,classes,isMapOpen} = this.props
         const {position,positionReady,fitBounds,maxBounds,mappedRoute,fitBoundsOptions} = this.state
         console.log(fitBounds)
         return(
-        <div>
+        <div className={classes.mapContainer} style={{'height': isMapOpen ? '400px' : 0}}>
         <Map
         onStyleLoad={(map,e)=>{
        
@@ -105,8 +105,8 @@ class FacilitiesMap extends React.Component {
         style="mapbox://styles/mapbox/streets-v9"
         movingMethod={'easeTo'}
         containerStyle={{
-          height: "400px",
-          width: "400px"
+          height: "100%",
+          width: "100%"
         }}
         fitBounds={fitBounds} 
         fitBoundsOptions={fitBoundsOptions} 
@@ -136,8 +136,10 @@ class FacilitiesMap extends React.Component {
 }
 }
 const styleSheet  = {
-
-}
+    mapContainer: {
+        transition: '250ms ease-in-out'
+    }
+};
 
 
 export default withStyles(styleSheet)(FacilitiesMap)
\ No newline at end of file

src/components/Sidebar.js

@@ -6,9 +6,10 @@ import Typography from 'material-ui/Typography'
 import Divider from 'material-ui/Divider';
 import TextwTitle from '../components/TextwTitle'
 import FacilitiesMap from '../components/FacilitiesMap'
-import classNames from 'classnames'
+import classNames from 'classnames';
+import Button from 'material-ui/Button';
 
-const Sidebar = ({classes,facility,isSidebarOpen,facilities}) => {
+const Sidebar = ({classes,facility,isSidebarOpen,isSidebarMapOpen,toggleSidebarMap,facilities}) => {
     const removeBrackets = (name) => {
        if(typeof(name) === "undefined"){
            return ""
@@ -43,7 +44,9 @@ const Sidebar = ({classes,facility,isSidebarOpen,facilities}) => {
                </div>
            </div>
         <div className={classes.row2}>
-        <FacilitiesMap facilities={facilities}facility={facility}/>
+            <FacilitiesMap isMapOpen={isSidebarMapOpen} facilities={facilities} facility={facility}/>
+
+            <Button className={classes.toggleMapBtn} onClick={toggleSidebarMap}>{isSidebarMapOpen ? 'Close Map' : 'Open Map'}</Button>
         </div>
     </Paper>
     )
@@ -52,7 +55,7 @@ const styleSheet = {
     '@media screen and (max-width: 600px)': {
         root: {
             display: 'none !important'
-        }
+        },
     },
     labelRow:{
         display:'flex',
@@ -95,7 +98,12 @@ const styleSheet = {
         alignItems:'center'
     },
     row2:{
-
+        position: 'absolute',
+        bottom: '0px',
+        width: '100%'
+    },
+    toggleMapBtn: {
+        width: '100%'
     }
 }
 

src/containers/Layout.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {withStyles } from 'material-ui/styles';
 import {compose} from 'redux';
 import {connect} from 'react-redux';
-import {toggleSidebar,setAllFavorites} from '../actions/ui';
+import {toggleSidebar,toggleSidebarMap,setAllFavorites} from '../actions/ui';
 import AppBar from '../components/AppBar';
 import Sidebar from '../components/Sidebar';
 import { getFacilities, setFacilities } from '../actions/api';
@@ -74,7 +74,7 @@ class Layout extends React.Component {
     };
 
     render() {
-        const {classes, isSidebarOpen, toggleSidebar, getFacilities,sidebarFacility} = this.props;
+        const {classes, isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities,sidebarFacility} = this.props;
         return (
             <div className={classes.root}>
                 <AppBar isOpen={false} handleMenuClick={ ()=>{} }/>
@@ -95,7 +95,7 @@ class Layout extends React.Component {
                             }
                         </button>
                     </div>
-                    <Sidebar facilities={this.props.facilities} facility={sidebarFacility} isSidebarOpen={isSidebarOpen}/>
+                    <Sidebar facilities={this.props.facilities} facility={sidebarFacility} isSidebarOpen={isSidebarOpen} isSidebarMapOpen={isSidebarMapOpen} toggleSidebarMap={toggleSidebarMap}/>
                 </div> 
             </div>
         )
@@ -163,7 +163,8 @@ function mapStateToProps(state) {
         isLoading: state.facilities.isLoading,
         sidebarFacility:state.ui.sidebar.facility,
         isSidebarOpen: state.ui.sidebar.isOpen,
+        isSidebarMapOpen: state.ui.sidebar.isMapOpen,
     }
 }
 
-export default compose(connect(mapStateToProps,{toggleSidebar,getFacilities,setFacilities,setAllFavorites}), withStyles(styleSheet))(Layout);
+export default compose(connect(mapStateToProps,{toggleSidebar,toggleSidebarMap,getFacilities,setFacilities,setAllFavorites}), withStyles(styleSheet))(Layout);

src/reducers/ui.js

 import {
     TOGGLE_SIDEBAR, SET_SIDEBAR, SET_SEARCH_TERM, SET_FILTERED_LIST,
-    ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY,SET_ALL_FAVORITES
+    ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY, SET_ALL_FAVORITES, TOGGLE_SIDEBAR_MAP
 } from '../actions/action-types'
 
 const sidebarDefault = {
     facility:{},
     isOpen:false,
+    isMapOpen:true,
 }
 
 const sidebar = (state=sidebarDefault,action) => {
@@ -18,6 +19,10 @@ const sidebar = (state=sidebarDefault,action) => {
             return Object.assign({},state,{
                 isOpen:!state.isOpen
             });
+        case TOGGLE_SIDEBAR_MAP:
+            return Object.assign({}, state, {
+                isMapOpen: !state.isMapOpen
+            });
         default:
             return state;
     }