henrikfredriksson /
algorithm-visualizer
| Total Complexity | 5 |
| Complexity/F | 1.67 |
| Lines of Code | 90 |
| Function Count | 3 |
| Duplicated Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
| 1 | import React, { Component } from 'react' |
||
| 2 | import Dock from 'react-dock' |
||
| 3 | import { Link } from 'react-router-dom' |
||
| 4 | import LoadingBar from 'react-top-loading-bar' |
||
| 5 | |||
| 6 | import './navbar.css' |
||
| 7 | |||
| 8 | |||
| 9 | export default class NavBar extends Component { |
||
| 10 | constructor () { |
||
| 11 | super() |
||
| 12 | |||
| 13 | this.state = { |
||
| 14 | isVisible: true, |
||
| 15 | isLeavingPage: false |
||
| 16 | } |
||
| 17 | } |
||
| 18 | |||
| 19 | componentDidMount () { |
||
| 20 | this.setState({ |
||
| 21 | isVisible: false |
||
| 22 | }) |
||
| 23 | |||
| 24 | this.listener = window.addEventListener('keydown', e => { |
||
| 25 | if (e.key === 'F1' || e.key === ' ') { |
||
| 26 | this.setState({ |
||
| 27 | isVisible: !this.state.isVisible |
||
| 28 | }) |
||
| 29 | } |
||
| 30 | }) |
||
| 31 | } |
||
| 32 | |||
| 33 | componentWillUnmount () { |
||
| 34 | window.removeEventListener('keydown', this.listener) |
||
| 35 | } |
||
| 36 | |||
| 37 | render () { |
||
| 38 | return ( |
||
| 39 | <div> |
||
| 40 | <Dock |
||
| 41 | fluid |
||
| 42 | position='top' |
||
| 43 | size={0.1} |
||
| 44 | isVisible={this.state.isVisible} |
||
| 45 | dockStyle={this.style} |
||
| 46 | dim='transparent' |
||
| 47 | > |
||
| 48 | <div |
||
| 49 | id='menuContent' |
||
| 50 | onMouseLeave={() => { |
||
| 51 | if (!this.state.isLeavingPage) { |
||
| 52 | this.setState({ |
||
| 53 | isVisible: false |
||
| 54 | }) |
||
| 55 | } |
||
| 56 | }} |
||
| 57 | > |
||
| 58 | <ul> |
||
| 59 | <li> |
||
| 60 | <Link |
||
| 61 | onClick={() => { |
||
| 62 | this.setState({ |
||
| 63 | isLeavingPage: true |
||
| 64 | }) |
||
| 65 | }} |
||
| 66 | to='/insertion' |
||
| 67 | > |
||
| 68 | Insertion sort |
||
| 69 | </Link> |
||
| 70 | </li> |
||
| 71 | <li> |
||
| 72 | <Link |
||
| 73 | onClick={() => { |
||
| 74 | this.setState({ |
||
| 75 | isLeavingPage: true |
||
| 76 | }) |
||
| 77 | }} |
||
| 78 | to='/bubble' |
||
| 79 | > |
||
| 80 | Bubble Sort |
||
| 81 | </Link> |
||
| 82 | </li> |
||
| 83 | </ul> |
||
| 84 | </div> |
||
| 85 | </Dock> |
||
| 86 | </div> |
||
| 87 | ) |
||
| 88 | } |
||
| 89 | } |
||
| 90 |
