2017-11-19 23:56:50 +00:00
|
|
|
// @flow
|
2018-05-05 23:16:08 +00:00
|
|
|
import * as React from 'react';
|
2017-11-19 23:56:50 +00:00
|
|
|
import { withRouter } from 'react-router-dom';
|
|
|
|
import type { Location } from 'react-router-dom';
|
|
|
|
import styled from 'styled-components';
|
2018-02-11 07:24:12 +00:00
|
|
|
import breakpoint from 'styled-components-breakpoint';
|
2017-11-19 23:56:50 +00:00
|
|
|
import { observer, inject } from 'mobx-react';
|
2018-05-03 04:51:39 +00:00
|
|
|
import { CloseIcon, MenuIcon } from 'outline-icons';
|
2019-03-13 04:35:35 +00:00
|
|
|
import Fade from 'components/Fade';
|
2017-11-19 23:56:50 +00:00
|
|
|
import Flex from 'shared/components/Flex';
|
|
|
|
import UiStore from 'stores/UiStore';
|
|
|
|
|
2019-03-13 04:35:35 +00:00
|
|
|
let firstRender = true;
|
|
|
|
|
2017-11-19 23:56:50 +00:00
|
|
|
type Props = {
|
2018-05-05 23:16:08 +00:00
|
|
|
children: React.Node,
|
2017-11-19 23:56:50 +00:00
|
|
|
location: Location,
|
|
|
|
ui: UiStore,
|
|
|
|
};
|
|
|
|
|
|
|
|
@observer
|
2018-05-05 23:16:08 +00:00
|
|
|
class Sidebar extends React.Component<Props> {
|
2018-02-11 07:24:12 +00:00
|
|
|
componentWillReceiveProps = (nextProps: Props) => {
|
|
|
|
if (this.props.location !== nextProps.location) {
|
|
|
|
this.props.ui.hideMobileSidebar();
|
|
|
|
}
|
2017-11-19 23:56:50 +00:00
|
|
|
};
|
|
|
|
|
2018-02-11 07:24:12 +00:00
|
|
|
toggleSidebar = () => {
|
|
|
|
this.props.ui.toggleMobileSidebar();
|
2017-11-19 23:56:50 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
2018-02-11 07:24:12 +00:00
|
|
|
const { children, ui } = this.props;
|
2019-03-13 04:35:35 +00:00
|
|
|
const content = (
|
2018-02-11 07:24:12 +00:00
|
|
|
<Container
|
|
|
|
editMode={ui.editMode}
|
|
|
|
mobileSidebarVisible={ui.mobileSidebarVisible}
|
|
|
|
column
|
|
|
|
>
|
|
|
|
<Toggle
|
|
|
|
onClick={this.toggleSidebar}
|
|
|
|
mobileSidebarVisible={ui.mobileSidebarVisible}
|
|
|
|
>
|
2020-02-27 03:36:23 +00:00
|
|
|
{ui.mobileSidebarVisible ? (
|
|
|
|
<CloseIcon size={32} />
|
|
|
|
) : (
|
|
|
|
<MenuIcon size={32} />
|
|
|
|
)}
|
2018-02-11 07:24:12 +00:00
|
|
|
</Toggle>
|
|
|
|
{children}
|
2017-11-19 23:56:50 +00:00
|
|
|
</Container>
|
|
|
|
);
|
2019-03-13 04:35:35 +00:00
|
|
|
|
|
|
|
// Fade in the sidebar on first render after page load
|
|
|
|
if (firstRender) {
|
|
|
|
firstRender = false;
|
|
|
|
return <Fade>{content}</Fade>;
|
|
|
|
}
|
|
|
|
|
|
|
|
return content;
|
2017-11-19 23:56:50 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Container = styled(Flex)`
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
2018-02-11 07:24:12 +00:00
|
|
|
width: 100%;
|
2019-03-13 04:35:35 +00:00
|
|
|
background: ${props => props.theme.sidebarBackground};
|
2019-04-20 22:19:35 +00:00
|
|
|
transition: left 100ms ease-out, ${props => props.theme.backgroundTransition};
|
2018-02-11 07:24:12 +00:00
|
|
|
margin-left: ${props => (props.mobileSidebarVisible ? 0 : '-100%')};
|
2019-12-18 03:55:23 +00:00
|
|
|
z-index: 1000;
|
2017-12-03 00:27:45 +00:00
|
|
|
|
|
|
|
@media print {
|
|
|
|
display: none;
|
|
|
|
left: 0;
|
|
|
|
}
|
2018-02-11 07:24:12 +00:00
|
|
|
|
2018-07-01 02:19:37 +00:00
|
|
|
&:before,
|
|
|
|
&:after {
|
|
|
|
content: '';
|
2019-03-13 04:35:35 +00:00
|
|
|
background: ${props => props.theme.sidebarBackground};
|
2018-07-01 02:19:37 +00:00
|
|
|
position: absolute;
|
|
|
|
top: -50vh;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 50vh;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
top: auto;
|
|
|
|
bottom: -50vh;
|
|
|
|
}
|
|
|
|
|
2018-02-11 07:24:12 +00:00
|
|
|
${breakpoint('tablet')`
|
2019-12-18 03:55:23 +00:00
|
|
|
left: ${props => (props.editMode ? `-${props.theme.sidebarWidth}` : 0)};
|
2018-06-10 02:10:30 +00:00
|
|
|
width: ${props => props.theme.sidebarWidth};
|
2018-02-11 07:24:12 +00:00
|
|
|
margin: 0;
|
2019-12-18 03:55:23 +00:00
|
|
|
z-index: 2;
|
2018-02-11 07:24:12 +00:00
|
|
|
`};
|
2017-11-19 23:56:50 +00:00
|
|
|
`;
|
|
|
|
|
2018-02-11 07:24:12 +00:00
|
|
|
const Toggle = styled.a`
|
2019-12-18 03:55:23 +00:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2018-02-11 07:24:12 +00:00
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: ${props => (props.mobileSidebarVisible ? 'auto' : 0)};
|
|
|
|
right: ${props => (props.mobileSidebarVisible ? 0 : 'auto')};
|
|
|
|
z-index: 1;
|
2018-07-01 17:20:57 +00:00
|
|
|
margin: 12px;
|
2018-02-11 07:24:12 +00:00
|
|
|
|
|
|
|
${breakpoint('tablet')`
|
|
|
|
display: none;
|
|
|
|
`};
|
|
|
|
`;
|
|
|
|
|
|
|
|
export default withRouter(inject('ui')(Sidebar));
|