...

Kai Reinhard

09.25.2019 170d30c36a1f09ae20ce5df96a9049a0b8f48351

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React from 'react';
import {NavLink as ReactRouterNavLink} from 'react-router-dom';
import {Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink} from 'reactstrap';
import LoadingOverlay from './loading/LoadingOverlay';
import FailedOverlay from './loading/failed/Overlay';
 
class Menu extends React.Component {
    getNavElement = (route, index) => {
        if (index === 0) {
            return '';
        }
        let addition = '';
        let className = '';
        // Additional Route Settings
        if (route.length >= 4) {
            if (route[3].badge) {
                addition = route[3].badge;
            }
 
            if (route[3].className) {
                className = route[3].className;
            }
        }
        return (
            <NavItem key={index}>
                <NavLink
                    to={route[1]}
                    tag={ReactRouterNavLink}
                    className={className}
                >
                    {route[0]} {addition}
                </NavLink>
            </NavItem>
        );
    };
 
    constructor(props) {
        super(props);
 
        this.toggle = this.toggle.bind(this);
        this.state = {
            loading: false,
            failed: false,
            isOpen: false
        };
    }
 
     toggle() {
        this.setState({
            isOpen: !this.state.isOpen
        });
    }
 
    render() {
        return (
            <Navbar className={'fixed-top'} color="light" light expand="lg">
                <NavbarBrand to="/" tag={ReactRouterNavLink}>
                    <img alt={'BorgButler logo'} src={'/images/merlin-icon.png'} width={'50px'} />BorgButler
                </NavbarBrand>
                <NavbarToggler onClick={this.toggle}/>
                <Collapse isOpen={this.state.isOpen} navbar>
                    <Nav className="ml-auto" navbar>
                        {
                            this.props.routes.map(this.getNavElement)
                        }
                    </Nav>
                </Collapse>
                <LoadingOverlay active={this.state.loading} />
                <FailedOverlay
                    title={'File Upload failed'}
                    text={this.state.failed}
                    closeModal={() => this.setState({failed: false})}
                    active={this.state.failed}
                />
            </Navbar>
        );
    }
}
 
export default Menu;