Added sidebar close button.

src/components/Sidebar.js

@@ -8,14 +8,25 @@ import FacilitiesMap from '../components/FacilitiesMap';
 import classNames from 'classnames';
 import WeekHours from './WeekHours';
 import FacilityTags from './FacilityTags';
+import CloseIcon from 'material-ui-icons/Close';
+import IconButton from 'material-ui/IconButton';
 import {removeBrackets} from '../utils/nameUtils';
 
-const Sidebar = ({facility, isSidebarOpen, facilities}) => {
+const Sidebar = ({facility, isSidebarOpen, facilities, setSidebar, setSelectedFacility}) => {
+
+    const handleSidebarClose = () => {
+        setSelectedFacility(null);
+        setSidebar(false);
+    };
+
     return (
         <div
             className={classNames(['card-container-offset', (isSidebarOpen && 'card-container-offset-open'), (!isSidebarOpen && 'card-container-offset-closed')])}>
             <Paper
                 className={classNames(['sidebar-root', (isSidebarOpen && 'sidebar-open'), (!isSidebarOpen && 'sidebar-closed')])}>
+                <IconButton className={'sidebar-close-btn'} onClick={handleSidebarClose}>
+                    <CloseIcon />
+                </IconButton>
                 <div className={'sidebar-row1'}>
                     <Avatar className={'sidebar-avatar'} src={facility.logo} />
                     <div className={'sidebar-title'}>

src/containers/Layout.js

@@ -4,6 +4,7 @@ import {setAllFavorites} from '../actions/ui';
 import AppBar from '../components/AppBar';
 import Sidebar from '../components/Sidebar';
 import {getFacilities, setFacilities, sortByFavorites} from '../actions/api';
+import {setSidebar, setSelectedFacility} from '../actions/ui';
 import CardContainer from '../components/CardContainer';
 
 class Layout extends React.Component {
@@ -37,7 +38,7 @@ class Layout extends React.Component {
     };
 
     render() {
-        const {isSidebarOpen, selectedFacility, facilities, searchTerm, campusRegion} = this.props;
+        const {isSidebarOpen, selectedFacility, facilities, searchTerm, campusRegion, setSidebar, setSelectedFacility} = this.props;
 
         return (
             <div className={'layout-root'}>
@@ -50,7 +51,7 @@ class Layout extends React.Component {
                         </div>
                     </div>
 
-                    <Sidebar facilities={facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen} />
+                    <Sidebar facilities={facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen} setSidebar={setSidebar} setSelectedFacility={setSelectedFacility}/>
                 </div>
             </div>
         );
@@ -73,5 +74,7 @@ export default connect(mapStateToProps, {
     getFacilities,
     setFacilities,
     setAllFavorites,
-    sortByFavorites
+    sortByFavorites,
+    setSidebar,
+    setSelectedFacility
 })(Layout);

src/styles/components/sidebar.scss

@@ -34,6 +34,14 @@
   @include transition(300ms cubic-bezier(0.820, 0.165, 0.340, 0.930));
 }
 
+.sidebar-close-btn {
+  position: absolute !important;
+  width: 24px !important;
+  height: 24px !important;
+  top: 5px;
+  right: 5px;
+}
+
 .sidebar-root::-webkit-scrollbar {
   display: none;
 }