import React , { ComponentProps , VFC } from 'react' ; import styled , { css } from 'styled-components' ; import { Theme , useTheme } from '../../hooks/useTheme' ; import { OnClick , SideNavItem , SideNavSizeType } from './SideNavItem' ; import { useClassNames } from './useClassNames' ; type SideNavItemProps = Omit < ComponentProps < typeof SideNavItem > , 'size' | 'onClick' > ; type Props = { items : SideNavItemProps [ ] ; size ? : SideNavSizeType ; onClick ? : OnClick ; className ? : string ; } ; export const SideNav = ( { items , size = 'default' , onClick , className = '' } ) => { const theme = useTheme ( ) ; const classNames = useClassNames ( ) ; return ( < Wrapper themes = { theme } className = { `${ className } ${ classNames . wrapper }` } > { items . map ( ( item ) => ( < SideNavItem id = { item . id } title = { item . title } prefix = { item . prefix } isSelected = { item . isSelected } size = { size } key = { item . id } onClick = { onClick } / > ) ) } < /Wrapper>); } ; const Wrapper = styled . ul < { themes : Theme ; } > `
  ${ ( { themes } ) => { const { color } = themes ; return css `
      background-color: ${ color . COLUMN };
      list-style: none;
      padding: 0;
    ` ; } }
` ;