Init

Preview: http://dashboards.webkom.co/react/airframe

app/components/Navbar/navbar.js

@@ -0,0 +1,63 @@
+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 };