<commit_before>import React, { Component, useState } from 'react'
import { Link } from 'gatsby'
import { css } from 'glamor'
import Icon from '../components/Icon'

const styles_nav = {
  root: {
    fontWeight: '300',
    '& h1': {
      fontSize: '1.2rem',
      fontWeight: '300',
      margin: '2rem 0 0 0',
      padding: '0 1rem',
      display: 'flex',
      cursor: 'pointer',
      '& span': {
        flexGrow: '1',
      },
      ':hover button': {
        backgroundColor: 'rgba(255, 255, 255, .2)',
      },
    },
    '& > ul': {
      margin: '0',
      paddingTop: '0',
      boxSizing: 'border-box',
      overflow: 'hidden',
      height: '0',
      opacity: '0',
      '& ul': {
        margin: 0,
        '& li': {
          padding: '0 1rem 0 1rem',
          '& a': {
            padding: '.2rem 1rem .2rem 1rem',
          },
        },
      },
      '& li': {
        margin: '0 0',
        padding: '0',
        textIndent: 0,
        listStyleType: 'none',
        '& a': {
          padding: '.5rem 1rem .5rem 1rem',
        },
      },
      '& > li': {
        '& > a, & li': {
          '@media not all and (pointer: coarse)': {
            ':hover': {
              backgroundColor: 'rgba(255,255,255,.1)',
            },
          },
        },
      }
    },
    '& a': {
      textDecoration: 'none',
    },
  },
  current: {
    '& h1': {
      cursor: 'default',
      ':hover button': {
        backgroundColor: 'rgba(255, 255, 255, 0)',
      },
    },
    '& > ul': {
      // display: '',
      paddingTop: '1rem',
      overflow: 'visible',
      height: 'auto',
      opacity: '1',
      transition: 'opacity 1s',
    },
  },
  link: {
    color: '#FFFFFF',
    display: 'block',
    lineHeight: '1.2rem',
    padding: '.2rem 0',
  },
  linkActive: {
    color: '#00D0B4',
  },
  button: {
    width: '1.4rem !important',
    height: '1.4rem !important',
    // lineHeight: '1.6rem',
    float: 'right',
    textAlign: 'center',
    ':enabled:hover': {
      backgroundColor: 'rgba(255, 255, 255, .2)',
    }
  },
  icon: {
    color: '#FFF',
    padding: '.2rem .15rem',
    width: '1.2rem',
    height: '1.2rem',
  },
  icon_up: {
    transform: 'rotate(-90deg)',
    transition: 'transform .5s ease-out',
  },
  icon_down: {
    transform: 'rotate(0deg)',
  }
}

const List1 = ({
  onClickLink,
  pages
}) => (
  <ul>
    {pages.map( page => (
      <li key={'li'+page.slug} css={styles_nav.li}>
        <Link
          to={page.slug}
          className={css(styles_nav.link).toString()}
          activeClassName={css(styles_nav.linkActive).toString()}
          onClick={onClickLink}
        >
          {page.navtitle || page.title}
        </Link>
        { page.children &&
          <List
            onClickLink={onClickLink}
            pages={page.children}
          />
        }
      </li>
    ))}
  </ul>
)

const List = ({
  onClickLink,
  pages
}) => (
  <ul>
    {pages.map( page => (
      <li key={page.slug} css={styles_nav.li}>
        <Link
          to={page.slug}<commit_msg>fix: menu sorting<commit_after>import React, { Component, useState } from 'react'
import { Link } from 'gatsby'
import { css } from 'glamor'
import Icon from '../components/Icon'

const styles_nav = {
  root: {
    fontWeight: '300',
    '& h1': {
      fontSize: '1.2rem',
      fontWeight: '300',
      margin: '2rem 0 0 0',
      padding: '0 1rem',
      display: 'flex',
      cursor: 'pointer',
      '& span': {
        flexGrow: '1',
      },
      ':hover button': {
        backgroundColor: 'rgba(255, 255, 255, .2)',
      },
    },
    '& > ul': {
      margin: '0',
      paddingTop: '0',
      boxSizing: 'border-box',
      overflow: 'hidden',
      height: '0',
      opacity: '0',
      '& ul': {
        margin: 0,
        '& li': {
          padding: '0 1rem 0 1rem',
          '& a': {
            padding: '.2rem 1rem .2rem 1rem',
          },
        },
      },
      '& li': {
        margin: '0 0',
        padding: '0',
        textIndent: 0,
        listStyleType: 'none',
        '& a': {
          padding: '.5rem 1rem .5rem 1rem',
        },
      },
      '& > li': {
        '& > a, & li': {
          '@media not all and (pointer: coarse)': {
            ':hover': {
              backgroundColor: 'rgba(255,255,255,.1)',
            },
          },
        },
      }
    },
    '& a': {
      textDecoration: 'none',
    },
  },
  current: {
    '& h1': {
      cursor: 'default',
      ':hover button': {
        backgroundColor: 'rgba(255, 255, 255, 0)',
      },
    },
    '& > ul': {
      // display: '',
      paddingTop: '1rem',
      overflow: 'visible',
      height: 'auto',
      opacity: '1',
      transition: 'opacity 1s',
    },
  },
  link: {
    color: '#FFFFFF',
    display: 'block',
    lineHeight: '1.2rem',
    padding: '.2rem 0',
  },
  linkActive: {
    color: '#00D0B4',
  },
  button: {
    width: '1.4rem !important',
    height: '1.4rem !important',
    // lineHeight: '1.6rem',
    float: 'right',
    textAlign: 'center',
    ':enabled:hover': {
      backgroundColor: 'rgba(255, 255, 255, .2)',
    }
  },
  icon: {
    color: '#FFF',
    padding: '.2rem .15rem',
    width: '1.2rem',
    height: '1.2rem',
  },
  icon_up: {
    transform: 'rotate(-90deg)',
    transition: 'transform .5s ease-out',
  },
  icon_down: {
    transform: 'rotate(0deg)',
  }
}

const List1 = ({
  onClickLink,
  pages
}) => (
  <ul>
    {pages.sort( (p1, p2) => (
      String(p1.sort || p1.navtitle) > String(p2.sort || p2.navtitle) ? 1 : -1
    )).map( page => (
      <li key={'li'+page.slug} css={styles_nav.li}>
        <Link
          to={page.slug}
          className={css(styles_nav.link).toString()}
          activeClassName={css(styles_nav.linkActive).toString()}
          onClick={onClickLink}
        >
          {page.navtitle || page.title}
        </Link>
        { page.children &&
          <List
            onClickLink={onClickLink}
            pages={page.children}
          />
        }
      </li>
    ))}
  </ul>
)

const List = ({
  onClickLink,
  pages
}) => (
  <ul>
    {pages.map( page => (
      <li key={page.slug} css={styles_nav.li}>
        <Link
          to={page.slug}
{'fraction_non_alphanumeric': 0.18764117457244273, 'fraction_numerical': 0.03581800580832527, 'mean_word_length': 1.6685320705983642, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 39, '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': '465659', 'n_tokens_mistral': 2293, 'n_tokens_neox': 2194, 'n_words': 452}