{"size": 2872, "ext": "js", "max_stars_repo_path": "frontend/src/handlers/view/structureHandler.js", "max_stars_repo_name": "SBI-/HUNTeR", "max_stars_repo_stars_event_min_datetime": "2018-02-25T18:27:02.000Z", "max_stars_repo_stars_event_max_datetime": "2018-05-11T19:42:19.000Z", "max_issues_repo_path": "frontend/src/handlers/view/structureHandler.js", "max_issues_repo_name": "SBI-/HUNTeR", "max_issues_repo_issues_event_min_datetime": "2018-03-02T07:52:00.000Z", "max_issues_repo_issues_event_max_datetime": "2018-04-06T08:35:53.000Z", "max_forks_repo_path": "frontend/src/handlers/view/structureHandler.js", "max_forks_repo_name": "japt-epj/HUNTeR", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": 24, "max_forks_count": null, "avg_line_length": 31.5604395604, "max_line_length": 114, "alphanum_fraction": 0.5870473538}
import React from 'react';
import {NavLink} from 'react-router-dom';

import {Button, Grid, Header, Image, Menu, Sidebar} from 'semantic-ui-react';
import {isMobile} from 'react-device-detect';

import {colors} from '../../config/hunterUiDefaults';
import Logo from '../../images/icons/e.png';

export default {
  toggleVisibility() {
    let iconNames = new Map([['bars', 'close'], ['close', 'bars']]);
    this.setState({visible: !this.state.visible});
    this.setState({iconName: iconNames.get(this.state.iconName)});
  },

  hideSidebar() {
    let iconNames = new Map([['bars', 'close'], ['close', 'bars']]);
    this.setState({visible: false});
    this.setState({iconName: iconNames.get('close')});
  },

  getHeader() {
    return (
      <Grid.Row columns="equal" verticalAlign="middle" className="gridHeader">
        <Grid.Column textAlign="left">
          <NavLink to="/">
            <Image
              src={Logo}
              alt="HUNTeR Logo - Link to home site"
              className="logoImage"
              onClick={this.hideSidebar.bind(this)}
            />
          </NavLink>
        </Grid.Column>
        <Grid.Column textAlign="center" className="headerElement">
          <Header size="medium" color={colors.buttonColors.normal} content="HUNTeR" />
        </Grid.Column>
        <Grid.Column textAlign="right">
          <Button color={colors.buttonColors.normal} icon={this.state.iconName} onClick={this.toggleVisibility} />
        </Grid.Column>
      </Grid.Row>
    );
  },

  getLoginHeader() {
    return (
      <Grid.Row columns="equal" verticalAlign="middle" className="gridHeader">
        <Grid.Column textAlign="left">
          <Image src={Logo} alt="HUNTeR Logo - Link to home site" className="logoImage" />
        </Grid.Column>
        <Grid.Column textAlign="right" className="headerElement">
          <Header size="medium" color={colors.buttonColors.normal} content="Login Seite" />
        </Grid.Column>
      </Grid.Row>
    );
  },

  getSideBar(paths) {
    return (
      <Sidebar
        as={Menu}
        animation="overlay"
        width={isMobile ? 'thin' : 'wide'}
        direction="right"
        visible={this.state.visible}
        icon="labeled"
        vertical
        inverted
      >
        {this.getStructurePaths(paths)}
      </Sidebar>
    );
  },

  getStructurePaths(elements) {
    return elements.map(mainElement => (
      <Menu.Item key={mainElement.name}>
        <Menu.Header className="sideMenuHeader" content={mainElement.name} />
        <Menu.Menu>
          {mainElement.subPaths.map(subElement => (
            <NavLink key={'NavLink' + subElement.path} to={'/' + subElement.path}>
              <Menu.Item className="sideMenuItem" icon={subElement.icon} content={subElement.name} />
            </NavLink>
          ))}
        </Menu.Menu>
      </Menu.Item>
    ));
  }
};
