64 lines
1.5 KiB
JavaScript
Executable File
64 lines
1.5 KiB
JavaScript
Executable File
import React from 'react';
|
|
import classNames from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
import { Navbar as BSNavbar, Container } from 'reactstrap';
|
|
|
|
const Navbar = ({
|
|
themed,
|
|
fluid,
|
|
shadow,
|
|
className,
|
|
children,
|
|
dark,
|
|
light,
|
|
color,
|
|
...otherProps
|
|
}) => {
|
|
let navbarClass = classNames({
|
|
'navbar-themed': themed || !!color,
|
|
'navbar-shadow': shadow,
|
|
}, 'navbar-multi-collapse', className);
|
|
|
|
// When a combination of light or dark is present
|
|
// with a color - use a custom class instead of bootstrap's
|
|
if ((dark || light) && color) {
|
|
navbarClass = classNames(navbarClass,
|
|
`navbar-${light ? 'light' : '' }${dark ? 'dark' : ''}-${color}`);
|
|
}
|
|
|
|
return (
|
|
<BSNavbar
|
|
className={ navbarClass }
|
|
/*
|
|
Use the dark and light switches
|
|
only when color is not set
|
|
*/
|
|
dark={ dark && !color }
|
|
light={ light && !color }
|
|
{ ...otherProps }
|
|
>
|
|
{
|
|
<Container className="navbar-collapse-wrap" fluid={ fluid }>
|
|
{ children }
|
|
</Container>
|
|
}
|
|
</BSNavbar>
|
|
)
|
|
};
|
|
Navbar.propTypes = {
|
|
themed: PropTypes.bool,
|
|
fluid: PropTypes.bool,
|
|
shadow: PropTypes.bool,
|
|
className: PropTypes.string,
|
|
children: PropTypes.node,
|
|
color: PropTypes.string,
|
|
dark: PropTypes.bool,
|
|
light: PropTypes.bool
|
|
}
|
|
Navbar.defaultProps = {
|
|
fluid: false,
|
|
themed: false,
|
|
}
|
|
|
|
export { Navbar };
|