Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 32x 32x 32x 32x 32x 32x 6x 6x 6x 6x 6x 6x 6x 12x 6x 6x 32x 32x | import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
import * as CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import { ComponentProps } from '../../types';
export interface SideBarProps extends HTMLProps<HTMLElement>, ComponentProps {
/**
* SideBar is hidden off screen if this is falsy.
*/
open?: boolean;
/**
* Position the SideBar to the left or right of the screen.
*/
position: 'left' | 'right';
/**
* Remove SideBar shadow
*/
noShadow?: boolean;
/**
* Callback to trigger when the user clicks outside of the `SideBar`.
*/
onClickOutside(event: React.MouseEvent<HTMLDivElement>): void;
}
/**
* SideBar navigation that opens over the content. Often used as the primary navigation on small devices.
* See the [Nav](#nav) section for more details.
*/
export class SideBar extends PureComponent<SideBarProps, {}> {
public render() {
const {
className,
children,
open,
position,
onClickOutside,
noShadow,
component: Component = 'div',
...remainingProps
} = this.props;
return (
<div className={classNames('side-bar-container', className)}>
<CSSTransitionGroup
transitionName="side-bar-transition"
transitionEnterTimeout={300}
transitionLeaveTimeout={200}
>
{open && (
<div className="side-bar-overlay" onClick={onClickOutside} />
)}
</CSSTransitionGroup>
<Component
{...remainingProps}
className={classNames(
'side-bar',
noShadow && 'no-shadow',
position,
open && 'open'
)}
>
{children}
</Component>
</div>
);
}
}
export default SideBar;
|