Init

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

app/routes/components/Navbars/NavbarExample.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import {
+    Avatar,
+    AvatarAddOn,
+    Button,
+    DropdownToggle,
+    NavbarThemeProvider,
+    Navbar,
+    NavbarBrand,
+    Nav,
+    NavItem,
+    NavLink,
+    NavbarToggler,
+    UncontrolledCollapse,
+    UncontrolledDropdown,
+} from './../../../components';
+
+import { NavbarActivityFeed } from './../../../layout/components/NavbarActivityFeed';
+import { NavbarMessages } from './../../../layout/components/NavbarMessages';
+import { NavbarUser } from './../../../layout/components/NavbarUser';
+import { NavbarNavigation } from './NavbarNavigation';
+import { DropdownProfile } from './../Dropdowns/DropdownProfile';
+
+import { randomAvatar } from './../../../utilities';
+
+const NavbarExample = ({ themeColor, themeStyle, navStyle }) => {
+    return (
+        <NavbarThemeProvider style={ themeStyle } color={ themeColor } className="shadow-sm">
+            <Navbar expand="lg" themed>
+                <Link to="/">
+                    <NavbarBrand className="mb-0" tag="div">
+                        react.bs4
+                    </NavbarBrand>
+                </Link>
+
+                <Nav pills>
+                    <NavItem>
+                        <NavLink tag={ NavbarToggler } id="navbar-navigation-toggler" className="b-0">
+                            <i className="fa fa-fw fa-bars"></i>
+                        </NavLink>
+                    </NavItem>
+                </Nav>
+
+                { /* Navigation with Collapse */ }
+                <UncontrolledCollapse navbar toggler="#navbar-navigation-toggler">
+                    <NavbarNavigation
+                        pills={ navStyle === 'pills' }
+                        accent={ navStyle === 'accent' }
+                    />
+                </UncontrolledCollapse>
+
+                { /* END Navbar: Left Side */ }
+                { /* START Navbar: Right Side */ }
+                <Nav className="ml-auto" pills>
+                    <NavbarMessages />
+                    <NavbarActivityFeed />
+                    { /* START Navbar: Dropdown */ }
+                    <UncontrolledDropdown nav inNavbar>
+                        <DropdownToggle nav>
+                            <Avatar.Image
+                                size="sm"
+                                src={ randomAvatar() }
+                                addOns={[
+                                    <AvatarAddOn.Icon 
+                                        className="fa fa-circle"
+                                        color="white"
+                                        key="avatar-icon-bg"
+                                    />,
+                                    <AvatarAddOn.Icon 
+                                        className="fa fa-circle"
+                                        color="danger"
+                                        key="avatar-icon-fg"
+                                    />
+                                ]}
+                            /> 
+                        </DropdownToggle>
+                        <DropdownProfile  
+                            right  
+                        />
+                    </UncontrolledDropdown>
+                    { /* END Navbar: Dropdown */ }
+                    <NavbarUser className="d-none d-lg-block" />
+                </Nav>
+                { /* END Navbar: Right Side */ }
+            </Navbar>
+
+            <Navbar light expand="lg" className="py-3 bg-white">
+                <h1 className="mb-0 h4">
+                    Navbar Only
+                </h1>
+                
+                <Button color={ themeColor } className="px-4 my-sm-0">
+                    Download <i className="fa ml-1 fa-fw fa-download"></i>
+                </Button>
+            </Navbar>
+        </NavbarThemeProvider>
+    );
+}
+
+NavbarExample.propTypes = {
+    navStyle: PropTypes.oneOf(['pills', 'accent', 'default']),
+    themeStyle: PropTypes.string,
+    themeColor: PropTypes.string,
+};
+NavbarExample.defaultProps = {
+    navStyle: 'default',
+    themeStyle: 'dark',
+    themeColor: 'primary'
+};
+
+export { NavbarExample };