<commit_before>React = require 'react'
Router = require 'react-router'
{RouteHandler, Link, State} = Router
{Container, Grid, Breakpoint, Span} = require 'react-responsive-grid'
Typography = require 'typography'
sortBy = require 'lodash/collection/sortBy'

typography = Typography()
{rhythm, fontSizeToMS} = typography

module.exports = React.createClass
  mixins: [State]
  render: ->
    {rhythm} = @props.typography
    childPages = @props.childPages.map (child) ->
      {
        title: child.data.title
        order: child.data.order
        path: child.path
      }

    childPages = sortBy childPages, (child) -> child.order

    docPages = childPages.map (child) =>
      isActive = @isActive(child.path)
      <li
        style={{
          marginBottom: rhythm(1/2)
        }}
      >
        <Link
          to={child.path}
          style={{
            textDecoration: 'none'
          }}
        >
          {if isActive then <strong>{child.title}</strong> else child.title }
        </Link>
      </li>

    <div>
      <div
        style={{
          overflowY: 'auto'
          position: 'fixed'
          width: "calc(#{rhythm(8)} - 1px)"
          borderRight: '1px solid lightgrey'
        }}
      >
        <ul
          style={{
            listStyle: 'none'
            marginLeft: 0
            marginTop: rhythm(1/2)
          }}
        >
          {docPages}
        </ul>
      </div>
      <div
        style={{
          padding: "0 #{rhythm(1)}"
          paddingLeft: "calc(#{rhythm(8)} + #{rhythm(1)})"
        }}
      >
        <RouteHandler typography={typography} {...@props}/>
      </div>
    </div><commit_msg>Make documentation section responsive<commit_after>React = require 'react'
Router = require 'react-router'
{RouteHandler, Link, State, Navigation} = Router
{Container, Grid, Breakpoint, Span} = require 'react-responsive-grid'
Typography = require 'typography'
sortBy = require 'lodash/collection/sortBy'

typography = Typography()
{rhythm, fontSizeToMS} = typography

module.exports = React.createClass
  mixins: [State, Navigation]

  handleTopicChange: (e) ->
    # Transition to new topic that was selected.
    @transitionTo e.target.value

  render: ->
    {rhythm} = @props.typography
    childPages = @props.childPages.map (child) ->
      {
        title: child.data.title
        order: child.data.order
        path: child.path
      }

    childPages = sortBy childPages, (child) -> child.order

    docOptions = childPages.map (child) ->
      <option value={child.path}>{child.title}</option>

    docPages = childPages.map (child) =>
      isActive = @isActive(child.path)
      <li
        style={{
          marginBottom: rhythm(1/2)
        }}
      >
        <Link
          to={child.path}
          style={{
            textDecoration: 'none'
          }}
        >
          {if isActive then <strong>{child.title}</strong> else child.title }
        </Link>
      </li>

    <Breakpoint minWidth=700>
      <div>
        <div
          style={{
            overflowY: 'auto'
            position: 'fixed'
            width: "calc(#{rhythm(8)} - 1px)"
            borderRight: '1px solid lightgrey'
          }}
        >
          <ul
            style={{
              listStyle: 'none'
              marginLeft: 0
              marginTop: rhythm(1/2)
            }}
          >
            {docPages}
          </ul>
        </div>
        <div
          style={{
            padding: "0 #{rhythm(1)}"
            paddingLeft: "calc(#{rhythm(8)} + #{rhythm(1)})"
          }}
        >
          <RouteHandler typography={typography} {...@props}/>
        </div>
      </div>
    </Breakpoint>
    <Breakpoint maxWidth=700>
      <strong>Topics:</strong>
      {' '}
      <select
        defaultValue={@props.state.path}
        onChange={@handleTopicChange}
      >
        {docOptions}
      </select>
      <br />
      <br />
      <RouteHandler typography={typography} {...@props}/>
    </Breakpoint>
{'fraction_non_alphanumeric': 0.13884007029876977, 'fraction_numerical': 0.007532011046949535, 'mean_word_length': 1.7782426778242677, 'pattern_counts': {'":': 0, '<': 46, '<?xml version=': 0, '>': 56, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4219657', 'n_tokens_mistral': 1220, 'n_tokens_neox': 1205, 'n_words': 253}