/
Navbar.js
84 lines (74 loc) · 1.74 KB
/
Navbar.js
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
82
83
84
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules, tagPropType } from './utils';
const propTypes = {
light: PropTypes.bool,
dark: PropTypes.bool,
full: PropTypes.bool,
fixed: PropTypes.string,
sticky: PropTypes.string,
color: PropTypes.string,
role: PropTypes.string,
tag: tagPropType,
container: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
className: PropTypes.string,
cssModule: PropTypes.object,
expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
children: PropTypes.node,
};
const defaultProps = {
tag: 'nav',
expand: false,
container: 'fluid',
};
const getExpandClass = (expand) => {
if (expand === false) {
return false;
} else if (expand === true || expand === 'xs') {
return 'navbar-expand';
}
return `navbar-expand-${expand}`;
};
const Navbar = (props) => {
const {
expand,
className,
cssModule,
light,
dark,
fixed,
sticky,
color,
container,
tag: Tag,
children,
...attributes
} = props;
const classes = mapToCssModules(classNames(
className,
'navbar',
getExpandClass(expand),
{
'navbar-light': light,
'navbar-dark': dark,
[`bg-${color}`]: color,
[`fixed-${fixed}`]: fixed,
[`sticky-${sticky}`]: sticky,
}
), cssModule);
const containerClass = container && (container === true) ? 'container' : `container-${container}`;
return (
<Tag {...attributes} className={classes}>
{ container ?
<div className={containerClass}>
{children}
</div> :
children
}
</Tag>
);
};
Navbar.propTypes = propTypes;
Navbar.defaultProps = defaultProps;
export default Navbar;