content: import React, { Component } from 'react';
  
  import Link from "./Link";
  
  import { NavigationActions, addNavigationHelpers } from 'react-navigation';
  
  const LinkableLi = Link.Linkable(props => <li {...props} />);
  
  function getConfig(router, state, action, configName) {
    if (action) {
      state = router.getStateForAction(action, state);
    }
    const Component = router.getComponentForState(state);
    return Component.navigationOptions[configName];
  }
  
  class PageWithSidebar extends Component {
    render() {
      const {router, navigation} = this.props;
      const {dispatch, state} = navigation;
      const ActiveScreen = router.getComponentForState(state);
      let prevAction = null;
      if (state.routes[state.index].index > 0) {
        const prev = state.routes[state.index].index - 1;
        prevAction = NavigationActions.navigate({
          routeName: state.routes[state.index].routes[prev].routeName,
        });
      }
      if (!prevAction && state.index > 0) {
        const prev = state.index - 1;
        prevAction = NavigationActions.navigate({
          routeName: state.routes[prev].routeName,
          action: NavigationActions.navigate({
            routeName: state.routes[prev].routes[state.routes[prev].routes.length - 1].routeName,
          })
        });
      }
      let nextAction = null;
      if (state.routes[state.index].index < state.routes[state.index].routes.length - 1) {
        const next = state.routes[state.index].index + 1;
        nextAction = NavigationActions.navigate({
          routeName: state.routes[state.index].routes[next].routeName,
        });
      }
      if (!nextAction && state.index < state.routes.length - 1) {
        const next = state.index + 1;
        nextAction = NavigationActions.navigate({
          routeName: state.routes[next].routeName,
        });
      }
      let prevName = prevAction && getConfig(router, state, prevAction, 'linkName');
      let nextName = nextAction && getConfig(router, state, nextAction, 'linkName');
      const docPath = getConfig(router, state, null, 'doc')+'.md';
      return (
        <div className="page-body"><div className="inner-page-body">
  
          <div className="left-sidebar">
            <ul className="pt-menu pt-elevation-1 navmenu">
              {state.routes && state.routes.map((route, i) => {
                const DocComponent = router.getComponentForRouteName(route.routeName);
                const childNavigation = addNavigationHelpers({
                  state: route,
                  dispatch,
                });
                const linkName = router.getScreenConfig(childNavigation, 'linkName');
                const icon = router.getScreenConfig(childNavigation, 'icon');
                const isActive = state.index === i;
                return (
                  <span key={i}>
                    <LinkableLi
                      to={route.routeName}
                      className={"pt-menu-header "+icon+' '+(isActive?'active':'')}>
                      <h6>{linkName}</h6>
                    </LinkableLi>
                    <div>
                      {route.routes && route.routes.map((childRoute, childI) => {
                        const isChildActive = isActive && route.index === childI;
                        const secondChildNavigation = addNavigationHelpers({
                          state: childRoute,
                          dispatch,
                        });
                        const routerLinkName = DocComponent.router && DocComponent.router.getScreenConfig(secondChildNavigation, 'linkName');
                        const linkName = routerLinkName || childRoute.routeName;
                        return (
                          <Link
                            to={childRoute.routeName}
                            className={`pt-menu-item page ${(isChildActive) ? 'active' : ''}`}
                            key={childI}>
                            {linkName}
                          </Link>
                        );
                      })}
                    </div>
                  </span>
                );
              })}
            </ul>
          </div>
  
          <div className="main-section">
            <ActiveScreen navigation={this.props.navigation} />
            <hr />
            {state.routeName === 'Docs' && <Link href={`https://github.com/react-community/react-navigation/tree/master/docs/${docPath}`} className="editLink"> Edit on GitHub</Link>}
            {prevAction && <Link to={prevAction}>Previous: {prevName}</Link>}
            {nextAction && <Link to={nextAction} className="nextLink">Next: {nextName}</Link>}
          </div>
  
        </div></div>
      );
    }
  }
  
  export default PageWithSidebar;
  