1 | import { theme } from 'styled-tools';
|
2 | import _Sidebar from 'reakit/Sidebar';
|
3 | import styled, { css, palette, space } from '../styled';
|
4 | import Button from '../Button';
|
5 | import { SidebarCloseProps } from './SidebarClose';
|
6 | import { SidebarHideProps } from './SidebarHide';
|
7 | import { SidebarShowProps } from './SidebarShow';
|
8 | import { SidebarProps } from './Sidebar';
|
9 |
|
10 | export const SidebarClose = styled(Button)<SidebarCloseProps>`
|
11 | position: fixed;
|
12 | min-height: 24px;
|
13 | padding: 0 ${space(1, 'minor')}rem;
|
14 | top: ${space(2, 'minor')}rem;
|
15 |
|
16 | ${props =>
|
17 | props.sidebarAlign === 'left'
|
18 | ? css`
|
19 | left: calc(${(props: any) => props.sidebarWidth} + ${space(2, 'minor')}rem);
|
20 | `
|
21 | : css`
|
22 | right: calc(${(props: any) => props.sidebarWidth} + ${space(2, 'minor')}rem);
|
23 | `};
|
24 |
|
25 | &:hover {
|
26 | color: ${palette('white700')};
|
27 | fill: ${palette('white700')};
|
28 | }
|
29 |
|
30 | & {
|
31 | ${theme('fannypack.Sidebar.Close.base')};
|
32 | }
|
33 | `;
|
34 |
|
35 | export const SidebarHide = styled(_Sidebar.Hide)<SidebarHideProps>`
|
36 | ${theme('fannypack.Modal.Hide.base')};
|
37 | `;
|
38 |
|
39 | export const SidebarShow = styled(_Sidebar.Show)<SidebarShowProps>`
|
40 | ${theme('fannypack.Modal.Show.base')};
|
41 | `;
|
42 |
|
43 | export const Sidebar = styled(_Sidebar)<SidebarProps>`
|
44 | background-color: white;
|
45 | box-shadow: ${props => (props.align === 'left' ? '3px' : '-3px')} 0px 12px 0px rgba(0, 0, 0, 0.1);
|
46 | width: ${props => props.width};
|
47 |
|
48 | ${theme('fannypack.Modal.base')};
|
49 | `;
|
50 |
|
51 | export default Sidebar;
|
52 |
|
\ | No newline at end of file |