import { theme } from 'styled-tools' ; import _Sidebar from 'reakit/Sidebar' ; import styled , { css , palette , space } from '../styled' ; import Button from '../Button' ; import { SidebarCloseProps } from './SidebarClose' ; import { SidebarHideProps } from './SidebarHide' ; import { SidebarShowProps } from './SidebarShow' ; import { SidebarProps } from './Sidebar' ; export const SidebarClose = styled ( Button ) < SidebarCloseProps > `
  position: fixed;
  min-height: 24px;
  padding: 0 ${ space ( 1 , 'minor' ) }rem;
  top: ${ space ( 2 , 'minor' ) }rem;

  ${ props => props . sidebarAlign === 'left' ? css `
          left: calc(${ ( props ) => props . sidebarWidth } + ${ space ( 2 , 'minor' ) }rem);
        ` : css `
          right: calc(${ ( props ) => props . sidebarWidth } + ${ space ( 2 , 'minor' ) }rem);
        ` };

  &:hover {
    color: ${ palette ( 'white700' ) };
    fill: ${ palette ( 'white700' ) };
  }

  & {
    ${ theme ( 'fannypack.Sidebar.Close.base' ) };
  }
` ; export const SidebarHide = styled ( _Sidebar . Hide ) < SidebarHideProps > `
  ${ theme ( 'fannypack.Modal.Hide.base' ) };
` ; export const SidebarShow = styled ( _Sidebar . Show ) < SidebarShowProps > `
  ${ theme ( 'fannypack.Modal.Show.base' ) };
` ; export const Sidebar = styled ( _Sidebar ) < SidebarProps > `
  background-color: white;
  box-shadow: ${ props => ( props . align === 'left' ? '3px' : '-3px' ) } 0px 12px 0px rgba(0, 0, 0, 0.1);
  width: ${ props => props . width };

  ${ theme ( 'fannypack.Modal.base' ) };
` ; export default Sidebar ;