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

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'; ...@@ -8,14 +8,25 @@ import FacilitiesMap from '../components/FacilitiesMap';
import classNames from 'classnames'; import classNames from 'classnames';
import WeekHours from './WeekHours'; import WeekHours from './WeekHours';
import FacilityTags from './FacilityTags'; import FacilityTags from './FacilityTags';
import CloseIcon from 'material-ui-icons/Close';
import IconButton from 'material-ui/IconButton';
import {removeBrackets} from '../utils/nameUtils'; import {removeBrackets} from '../utils/nameUtils';
const Sidebar = ({facility, isSidebarOpen, facilities}) => { const Sidebar = ({facility, isSidebarOpen, facilities, setSidebar, setSelectedFacility}) => {
const handleSidebarClose = () => {
setSelectedFacility(null);
setSidebar(false);
};
return ( return (
<div <div
className={classNames(['card-container-offset', (isSidebarOpen && 'card-container-offset-open'), (!isSidebarOpen && 'card-container-offset-closed')])}> className={classNames(['card-container-offset', (isSidebarOpen && 'card-container-offset-open'), (!isSidebarOpen && 'card-container-offset-closed')])}>
<Paper <Paper
className={classNames(['sidebar-root', (isSidebarOpen && 'sidebar-open'), (!isSidebarOpen && 'sidebar-closed')])}> className={classNames(['sidebar-root', (isSidebarOpen && 'sidebar-open'), (!isSidebarOpen && 'sidebar-closed')])}>
<IconButton className={'sidebar-close-btn'} onClick={handleSidebarClose}>
<CloseIcon />
</IconButton>
<div className={'sidebar-row1'}> <div className={'sidebar-row1'}>
<Avatar className={'sidebar-avatar'} src={facility.logo} /> <Avatar className={'sidebar-avatar'} src={facility.logo} />
<div className={'sidebar-title'}> <div className={'sidebar-title'}>
......
...@@ -4,6 +4,7 @@ import {setAllFavorites} from '../actions/ui'; ...@@ -4,6 +4,7 @@ import {setAllFavorites} from '../actions/ui';
import AppBar from '../components/AppBar'; import AppBar from '../components/AppBar';
import Sidebar from '../components/Sidebar'; import Sidebar from '../components/Sidebar';
import {getFacilities, setFacilities, sortByFavorites} from '../actions/api'; import {getFacilities, setFacilities, sortByFavorites} from '../actions/api';
import {setSidebar, setSelectedFacility} from '../actions/ui';
import CardContainer from '../components/CardContainer'; import CardContainer from '../components/CardContainer';
class Layout extends React.Component { class Layout extends React.Component {
...@@ -37,7 +38,7 @@ class Layout extends React.Component { ...@@ -37,7 +38,7 @@ class Layout extends React.Component {
}; };
render() { render() {
const {isSidebarOpen, selectedFacility, facilities, searchTerm, campusRegion} = this.props; const {isSidebarOpen, selectedFacility, facilities, searchTerm, campusRegion, setSidebar, setSelectedFacility} = this.props;
return ( return (
<div className={'layout-root'}> <div className={'layout-root'}>
...@@ -50,7 +51,7 @@ class Layout extends React.Component { ...@@ -50,7 +51,7 @@ class Layout extends React.Component {
</div> </div>
</div> </div>
<Sidebar facilities={facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen} /> <Sidebar facilities={facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen} setSidebar={setSidebar} setSelectedFacility={setSelectedFacility}/>
</div> </div>
</div> </div>
); );
...@@ -73,5 +74,7 @@ export default connect(mapStateToProps, { ...@@ -73,5 +74,7 @@ export default connect(mapStateToProps, {
getFacilities, getFacilities,
setFacilities, setFacilities,
setAllFavorites, setAllFavorites,
sortByFavorites sortByFavorites,
setSidebar,
setSelectedFacility
})(Layout); })(Layout);
...@@ -34,6 +34,14 @@ ...@@ -34,6 +34,14 @@
@include transition(300ms cubic-bezier(0.820, 0.165, 0.340, 0.930)); @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 { .sidebar-root::-webkit-scrollbar {
display: none; 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