Commit 6d12c375 authored by Andrew Hrdy's avatar Andrew Hrdy

Added sidebar close button.

parent 93316138
Pipeline #1974 passed with stage
in 1 minute and 37 seconds
......@@ -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'}>
......
......@@ -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);
......@@ -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;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment