All files / components/header-bar header-bar.jsx

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
81
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4x
4x
4x
4x
 
 
 
 
 
 
 
2x
2x
2x
 
 
 
 
 
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
import React from 'react';
import { toggleDropdown } from '../../services/common-functions';
import PropTypes from 'prop-types';
 
class HeaderBar extends React.Component {
  pushMenu() {
    const body = document.body;
    if (body.clientWidth > 786) {
      toggleDropdown(body, 'sidebar-collapse');
    } else {
      toggleDropdown(body, 'sidebar-open');
    }
  }
 
  getLogo(logoType = 'main') {
    const logoClass = logoType !== 'mini' ? 'logo-lg' : 'logo-mini';
    const logoFile = logoType !== 'mini' ? this.props.clientLogo : this.props.clientLogoMini;
    const altLogo = logoType !== 'mini' ? this.props.clientName : this.props.clientNameAbbr;
    return (
      <span className={logoClass} style={{ height: '100%', position: 'relative' }}>
        {logoFile ? <img src={logoFile} alt="The Brand." style={{ maxWidth: '90%', maxHeight: '90%', width: 'auto', height: 'auto' }} /> : altLogo}
      </span>
    );
  }
 
  render() {
    const logo = this.getLogo();
    const logoMini = this.props.clientNameAbbr || this.props.clientLogoMini ? this.getLogo('mini') : '';
    return (
      <header className="main-header">
        <a
          className="logo"
          href={this.props.logoLink}
          onClick={this.props.onLogoClick ? e => {
            e.preventDefault();
            e.stopPropagation();
            this.props.onLogoClick();
          } : () => {}}
        >
          {logoMini}
          {logo}
        </a>
        <nav className="navbar navbar-static-top" role="navigation">
          <a className="sidebar-toggle" data-toggle="offcanvas" role="button" onClick={this.pushMenu}>
            <span className="sr-only">Toggle navigation</span>
          </a>
          <div className="navbar-custom-menu">
            <ul className="nav navbar-nav">
              {this.props.children}
            </ul>
          </div>
        </nav>
      </header>
    );
  }
}
 
HeaderBar.propTypes = {
  clientName: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element
  ]),
  clientNameAbbr: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element
  ]),
  clientLogo: PropTypes.string,
  clientLogoMini: PropTypes.string,
  logoLink: PropTypes.string,
  onLogoClick: PropTypes.func
};
 
HeaderBar.defaultProps = {
  clientName: <span><b>Admin</b>LTE</span>,
  clientNameAbbr: <span><b>A</b>LT</span>,
  clientLogo: '',
  clientLogoMini: ''
};
 
export default HeaderBar;