import React from 'react' ; import styled from 'styled-components' ; import { NavLink } from 'react-router-dom' ; import { matchPath } from 'react-router' ; import SideNavItemIcon from './SideNavItemIcon' ; import SideNavItem from './SideNavItem' ; import * as Icons from 'design/Icon' ; import { Item } from './useSideNav' ; const SideNavItemGroup = props => { const { item , path } = props ; const hasSelectedChild = isChildActive ( path , item ) ; const [ expanded , setExpanded ] = React . useState ( ( ) => isChildActive ( path , item ) ) ; React . useEffect ( ( ) => { if ( hasSelectedChild && ! expanded ) { setExpanded ( true ) ; } } , [ hasSelectedChild ] ) ; const ArrowIcon = expanded ? Icons . ArrowDown : Icons . ArrowRight ; const style = { display : expanded ? 'block' : 'none' , } ; const $children = item . items . map ( ( i , index ) => { return ( < SideNavItem key = { index } $nested = { true } as = { NavLink } exact = { i . exact } to = { i . route } > < StyledMarker className = "marker" > < /StyledMarker> < SideNavItemIcon as = { i . Icon } fontSize = "2" mr = { 2 } / > { i . title } < /SideNavItem>); } ) ; const className = hasSelectedChild ? 'actives' : '' ; return ( < > < StyledGroup className = { className } as = "button" onClick = { ( ) => setExpanded ( ! expanded ) } > < SideNavItemIcon as = { item . Icon } /> { item . title } < ArrowIcon ml = "auto" mr = { - 2 } color = "inherit" style = { { fontSize : '14px' } } /> < /StyledGroup> < StyledChildrenContainer style = { style } > { $children } < /StyledChildrenContainer> < />); } ; export default SideNavItemGroup ; function isChildActive ( url , item ) { return item . items . some ( i => ! ! matchPath ( url , { path : i . route , exact : i . exact , } ) ) ; } const fromTheme = ( { theme } ) => { return { fontSize : '12px' , fontWeight : theme . regular , fontFamily : theme . font , paddingLeft : theme . space [ 9 ] + 'px' , paddingRight : theme . space [ 5 ] + 'px' , background : theme . colors . primary . light , color : theme . colors . text . secondary , '&.active' : { borderLeftColor : theme . colors . accent , background : theme . colors . primary . lighter , color : theme . colors . primary . contrastText , '.marker' : { background : theme . colors . secondary . light , } , } , '&:hover' : { background : theme . colors . primary . lighter , } , '&:hover, &:focus' : { color : theme . colors . primary . contrastText , } , minHeight : '56px' , } ; } ; const StyledChildrenContainer = styled . div `
  background: ${ props => `linefar-gradient(140deg, ${ props . theme . colors . primary . lighter }, ${ props . theme . colors . primary . light });` };
` ; const StyledMarker = styled . div `
  height: 8px;
  width: 8px;
  position: absolute;
  top: 16px;
  left: 26px;
` ; const StyledGroup = styled . div `
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
  border-left: 4px solid transparent;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  width: 100%;
  line-height: 24px;
  ${ fromTheme }
` ;