mirror of https://github.com/trezor/trezor-wallet
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.6 KiB
63 lines
1.6 KiB
/* @flow */
|
|
|
|
import * as React from 'react';
|
|
import styled from 'styled-components';
|
|
import colors from 'config/colors';
|
|
import { SCREEN_SIZE } from 'config/variables';
|
|
import { SLIDE_RIGHT, SLIDE_LEFT } from 'config/animations';
|
|
|
|
|
|
type Props = {
|
|
children?: React.Node,
|
|
isOpen: ?boolean,
|
|
}
|
|
|
|
type State = {
|
|
footerFixed: boolean,
|
|
}
|
|
|
|
const AbsoluteWrapper = styled.aside`
|
|
width: 320px;
|
|
position: relative;
|
|
overflow-y: auto;
|
|
|
|
background: ${colors.MAIN};
|
|
border-top-left-radius: 4px;
|
|
border-right: 1px solid ${colors.DIVIDER};
|
|
|
|
overflow-x: hidden;
|
|
|
|
@media screen and (max-width: ${SCREEN_SIZE.SM}) {
|
|
position: absolute;
|
|
height: calc(100vh - 52px);
|
|
z-index: 200;
|
|
top: 52px;
|
|
/* Prevents firing SLIDE_LEFT anim on page load. */
|
|
/* isOpen is null until user clicks on menu toggler */
|
|
display: ${props => (props.isOpen === null ? 'none' : 'block')};
|
|
animation: ${props => (props.isOpen ? SLIDE_RIGHT : SLIDE_LEFT)} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards;
|
|
}
|
|
|
|
@media screen and (max-width: ${SCREEN_SIZE.LG}) {
|
|
border-top-left-radius: 0px;
|
|
}
|
|
|
|
`;
|
|
|
|
const SidebarWrapper = styled.div`
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
`;
|
|
|
|
export default class Sidebar extends React.PureComponent<Props, State> {
|
|
render() {
|
|
return (
|
|
<AbsoluteWrapper isOpen={this.props.isOpen}>
|
|
<SidebarWrapper>
|
|
{this.props.children}
|
|
</SidebarWrapper>
|
|
</AbsoluteWrapper>
|
|
);
|
|
}
|
|
} |