<commit_before>// @flow
import * as React from 'react';
import { EditorMenuButton } from './EditorMenu';
import Box from './Box';
import Set from './Set';
import A from './A';
import { ManageYourWebsMessage } from '../pages';

type EditorMenuHamburgerProps = {||};

type EditorMenuHamburgerState = {|
  open: boolean,
|};

const initialState = {
  open: false,
};

const ToggleButton = props => <EditorMenuButton {...props}>☰</EditorMenuButton>;

class EditorMenuHamburger extends React.Component<
  EditorMenuHamburgerProps,
  EditorMenuHamburgerState,
> {
  state = initialState;

  handleToggleButtonPress = () => {
    this.setState(state => ({ open: !state.open }));
  };

  render() {
    return (
      <Box paddingLeft={1} alignItems="flex-end">
        <ToggleButton
          onPress={this.handleToggleButtonPress}
          opacity={this.state.open ? 0.5 : 1}
        />
        {this.state.open && (
          <Set marginBottom={0} marginTop={1}>
            <A href={{ pathname: '/' }}>
              <ManageYourWebsMessage />
            </A>
          </Set>
        )}
      </Box>
    );
  }
}<commit_msg>Handle escape key in menu hamburger<commit_after>// @flow
import * as React from 'react';
import { EditorMenuButton } from './EditorMenu';
import Box from './Box';
import Set from './Set';
import A from './A';
import { ManageYourWebsMessage } from '../pages';

type EditorMenuHamburgerProps = {||};

type EditorMenuHamburgerState = {|
  open: boolean,
|};

const initialState = {
  open: false,
};

const ToggleButton = props => <EditorMenuButton {...props}>☰</EditorMenuButton>;

class EditorMenuHamburger extends React.Component<
  EditorMenuHamburgerProps,
  EditorMenuHamburgerState,
> {
  state = initialState;

  handleToggleButtonPress = () => {
    this.setState(state => ({ open: !state.open }));
  };

  handleToggleButtonKeyDown = (
    event: SyntheticKeyboardEvent<HTMLButtonElement>,
  ) => {
    if (event.key === 'Escape') {
      this.setState(state => ({ open: false }));
    }
  };

  render() {
    return (
      <Box paddingLeft={1} alignItems="flex-end">
        <ToggleButton
          onPress={this.handleToggleButtonPress}
          onKeyDown={this.handleToggleButtonKeyDown}
          opacity={this.state.open ? 0.5 : 1}
        />
        {this.state.open && (
          <Set marginBottom={0} marginTop={1}>
            <A href={{ pathname: '/' }}>
              <ManageYourWebsMessage />
            </A>
          </Set>
        )}
      </Box>
    );
  }
}
{'fraction_non_alphanumeric': 0.1542447190115584, 'fraction_numerical': 0.004782781984854523, 'mean_word_length': 2.702064896755162, 'pattern_counts': {'":': 0, '<': 26, '<?xml version=': 0, '>': 34, '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': '7037634', 'n_tokens_mistral': 794, 'n_tokens_neox': 776, 'n_words': 165}