<commit_before>import React, { Component } from 'react'
import styled from 'styled-components'
import { MEDIA, MEDIA_SIZES, Link } from './Framework'
import { StaticQuery, graphql } from 'gatsby'
import { sortPagesByIndex } from '../utils'
import X from 'react-feather/dist/icons/x'

const Navbar = styled.nav`
  position: fixed;
  top: 0;
  bottom: 0;
  width: 250px;
  border-right: 1px solid rgba(0, 16, 64, 0.08);
  background-clip: padding-box;
  padding: 16px 0;
  background: #f7f8fc;
  overflow-y: auto;
  z-index: 1;
  transition: transform ${props => (props.isOpen ? '0.45s' : '0.3s')};
  transition-timing-function: ${props =>
    props.isOpen
      ? 'cubic-bezier(.165, .84, .44, 1)'
      : 'cubic-bezier(.77, 0, .175, 1)'};
`

const List = styled.ul`
  list-style: none;
  padding-left: 0;
  margin: 0;
`

const ListItem = styled.li`
  margin: 0;

  &:not(:last-child) {
    border-bottom: 1px dotted rgba(0, 16, 64, 0.1);
  }

  > a {
    display: block;
    padding: 12px 25px;

    &:hover {
      border-bottom-color: transparent;
    }
  }
`

const XButton = styled.button`
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: inherit;
  padding: 0;

  ${MEDIA.lg} {
    display: none;
  }
`

class Nav extends Component {
  state = {
    windowWidth: 0,
    transitions: true,
  }

  get transform() {
    return this.props.isOpen || this.state.windowWidth >= MEDIA_SIZES.lg
      ? 'translate3d(0, 0, 0)'
      : 'translate3d(-100%, 0, 0)'
  }

  handleResize = () => {
    this.setState({
      windowWidth: window.innerWidth,
      transitions: false,
    })
    clearTimeout(this.timeout)<commit_msg>Default to 1200 window width<commit_after>import React, { Component } from 'react'
import styled from 'styled-components'
import { MEDIA, MEDIA_SIZES, Link } from './Framework'
import { StaticQuery, graphql } from 'gatsby'
import { sortPagesByIndex } from '../utils'
import X from 'react-feather/dist/icons/x'

const Navbar = styled.nav`
  position: fixed;
  top: 0;
  bottom: 0;
  width: 250px;
  border-right: 1px solid rgba(0, 16, 64, 0.08);
  background-clip: padding-box;
  padding: 16px 0;
  background: #f7f8fc;
  overflow-y: auto;
  z-index: 1;
  transition: transform ${props => (props.isOpen ? '0.45s' : '0.3s')};
  transition-timing-function: ${props =>
    props.isOpen
      ? 'cubic-bezier(.165, .84, .44, 1)'
      : 'cubic-bezier(.77, 0, .175, 1)'};
`

const List = styled.ul`
  list-style: none;
  padding-left: 0;
  margin: 0;
`

const ListItem = styled.li`
  margin: 0;

  &:not(:last-child) {
    border-bottom: 1px dotted rgba(0, 16, 64, 0.1);
  }

  > a {
    display: block;
    padding: 12px 25px;

    &:hover {
      border-bottom-color: transparent;
    }
  }
`

const XButton = styled.button`
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: inherit;
  padding: 0;

  ${MEDIA.lg} {
    display: none;
  }
`

class Nav extends Component {
  state = {
    windowWidth: 1200,
    transitions: true,
  }

  get transform() {
    return this.props.isOpen || this.state.windowWidth >= MEDIA_SIZES.lg
      ? 'translate3d(0, 0, 0)'
      : 'translate3d(-100%, 0, 0)'
  }

  handleResize = () => {
    this.setState({
      windowWidth: window.innerWidth,
      transitions: false,
    })
    clearTimeout(this.timeout)
{'fraction_non_alphanumeric': 0.15273601924233313, 'fraction_numerical': 0.04359591100420926, 'mean_word_length': 2.965435041716329, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, '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': '7124376', 'n_tokens_mistral': 1362, 'n_tokens_neox': 1229, 'n_words': 305}