import React from 'react' ; import styled from 'styled-components' ; import { NavLink , Link } from 'react-router-dom' ; import { Flex , Image } from 'design' ; import SideNavItemIcon from './SideNavItemIcon' ; import SideNavItem from './SideNavItem' ; import SideNavItemGroup from './SideNavItemGroup' ; import logoSvg from './logo' ; import cfg from 'teleport/config' ; import useSideNav from './useSideNav' ; export default function Container ( ) { const state = useSideNav ( ) ; return < SideNav { ... state } / > ; } export function SideNav ( props ) { const { items , path } = props ; const $items = items . map ( ( item , index ) => { const isChild = item . items . length > 0 ; if ( isChild ) { return < SideNavItemGroup path = { path } item = { item } key = { index } / > ; } return ( < SideNavItem key = { index } as = { NavLink } exact = { item . exact } to = { item . route } > < SideNavItemIcon as = { item . Icon } /> { item . title } < /SideNavItem>); } ) ; return ( < Nav > < LogoItem pl = "4" width = "208px" as = { Link } to = { cfg . routes . root } > < Image src = { logoSvg } mx = "3" maxHeight = "24px" maxWidth = "160px" / > < /LogoItem> < div style = { { display : 'flex' , flexDirection : 'column' , overflow : 'auto' } } > { $items } < /div> < /Nav>); } const LogoItem = styled ( Flex ) ( props => `
  min-height: 56px;
  align-items: center;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  width: 100%;
  &:hover {
    background ${ props . theme . colors . primary . lighter };
    color ${ props . theme . colors . primary . contrastText };
  }
` ) ; const Nav = styled . nav `
  background: ${ props => props . theme . colors . primary . light };
  border-right: 1px solid ${ props => props . theme . colors . primary . dark };
  min-width: 240px;
  width: 240px;
  overflow: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
` ;