text: import React from 'react';
  import { Link } from 'react-router-dom';
  import {
      Button,
      DropdownToggle,
      Nav,
      NavItem,
      NavLink,
      Avatar,
      AvatarAddOn,
      Navbar,
      NavbarToggler,
      UncontrolledDropdown,
      ThemeConsumer,
  } from './../../../../components';
  import { randomAvatar } from '../../../../utilities';
  
  import { NavbarActivityFeed } from
      './../../../../layout/components/NavbarActivityFeed';
  import { NavbarMessages } from
      './../../../../layout/components/NavbarMessages';
  import { NavbarUser } from
      './../../../../layout/components/NavbarUser';
  import { DropdownProfile } from
      './../../../components/Dropdowns/DropdownProfile';
  import { NavbarNavigation } from
      './../../../components/Navbars/NavbarNavigation';
  import { LogoThemed } from
      './../../../components/LogoThemed/LogoThemed';
  
  export const LayoutNavbar = () => (
      <React.Fragment>
          <Navbar light expand="lg" themed>
              <Link to="/" className="navbar-brand mr-0 mr-sm-3">
                  <LogoThemed className="mb-1" checkBackground />
              </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 */ }
              <NavbarNavigation pills />
  
              { /* 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 shadow expand="lg" className="py-3 bg-white">
              <h1 className="mb-0 h4">
                  Navbar Only
              </h1>
              
              <ThemeConsumer>
              {
                  ({ color }) => (
                      <Button color={ color } className="px-4 my-sm-0">
                          Download <i className="fa ml-1 fa-fw fa-download"></i>
                      </Button>
                  )
              }
              </ThemeConsumer>
          </Navbar>
      </React.Fragment>
  );
  