Improvements

Author: mrholek

React_Full_Project/src/components/Header/Header.js

@@ -52,14 +52,10 @@ class Header extends Component {
   render() {
     return (
       <header className="app-header navbar">
-        <NavbarToggler className="mobile-sidebar-toggler d-lg-none" onClick={this.mobileSidebarToggle}>&#9776;</NavbarToggler>
-        {/*        <button className="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" onClick={this.mobileSidebarToggle}>&#9776;</button>*/}
+        <NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>&#9776;</NavbarToggler>
         <NavbarBrand href="#"></NavbarBrand>
-        <Nav className="navbar-nav d-md-down-none">
-          <NavItem>
-            <NavbarToggler className="nav-link sidebar-toggler" type="button"
-                           onClick={this.sidebarToggle}>&#9776;</NavbarToggler>
-          </NavItem>
+        <NavbarToggler className="d-md-down-none" onClick={this.sidebarToggle}>&#9776;</NavbarToggler>
+        <Nav className="d-md-down-none" navbar>
           <NavItem className="px-3">
             <NavLink href="#">Dashboard</NavLink>
           </NavItem>
@@ -70,7 +66,7 @@ class Header extends Component {
             <NavLink href="#">Settings</NavLink>
           </NavItem>
         </Nav>
-        <Nav className="navbar-nav ml-auto">
+        <Nav className="ml-auto" navbar>
           <NavItem className="d-md-down-none">
             <NavLink href="#"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
           </NavItem>
@@ -87,33 +83,24 @@ class Header extends Component {
                 <span className="d-md-down-none">admin</span>
               </DropdownToggle>
               <DropdownMenu right className={this.state.dropdownOpen ? 'show' : ''}>
-                <DropdownItem header className="text-center"><strong>Account</strong></DropdownItem>
-
+                <DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
                 <DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
-                <DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge
-                  color="success">42</Badge></DropdownItem>
+                <DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
                 <DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
-                <DropdownItem><i className="fa fa-comments"></i> Comments<Badge
-                  color="warning">42</Badge></DropdownItem>
-
-                <DropdownItem header className="text-center"><strong>Settings</strong></DropdownItem>
-
+                <DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
+                <DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
                 <DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
                 <DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
                 <DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
                 <DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
                 <DropdownItem divider/>
                 <DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
                 <DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
-
               </DropdownMenu>
             </Dropdown>
           </NavItem>
-          <NavItem className="d-md-down-none">
-            <NavbarToggler className="nav-link aside-menu-toggler" type="button"
-                           onClick={this.asideToggle}>&#9776;</NavbarToggler>
-          </NavItem>
         </Nav>
+        <NavbarToggler className="d-md-down-none" type="button" onClick={this.asideToggle}>&#9776;</NavbarToggler>
       </header>
     )
   }

React_Starter/src/components/Header/Header.js

@@ -31,13 +31,9 @@ class Header extends Component {
   render() {
     return (
       <header className="app-header navbar">
-        <NavbarToggler className="mobile-sidebar-toggler d-lg-none" onClick={this.mobileSidebarToggle}>&#9776;</NavbarToggler>
+        <NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>&#9776;</NavbarToggler>
         <NavbarBrand href="#"></NavbarBrand>
-        <Nav className="navbar-nav d-md-down-none mr-auto">
-          <NavItem>
-            <NavbarToggler className="nav-link sidebar-toggler" type="button" onClick={this.sidebarToggle}>&#9776;</NavbarToggler>
-          </NavItem>
-        </Nav>
+        <NavbarToggler className="d-md-down-none mr-auto" onClick={this.sidebarToggle}>&#9776;</NavbarToggler>
       </header>
     )
   }