- HeaderDropdown component example extracted out of Header

- Fix height and position problems with .fixed-footer
- Fix mobile sidebar height
- Fix mobile breadcrumb position with .fixed-breadcrumb
- Add new navbar toggler icon
- Update old bootstrap classes ex. `hidden-sm-down`
- Add gulp-autoprefixer

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## [react](./REACT.md) version `changelog`
 
+###### `v1.0.2`
+- `HeaderDropdown` component example extracted out of `Header`
+
 ###### `v1.0.1`
 - moved to react: `^16.0.0`
 - moved to reactstrap: `^5.0.0-alpha.3`

React_Full_Project/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "author": "Łukasz Holeczek <lukasz@holeczek.pl>",
   "url": "http://coreui.io",
@@ -26,10 +26,10 @@
     "sass-loader": "^6.0.6",
     "source-list-map": "^2.0.0",
     "style-loader": "^0.19.0",
-    "uglify-js": "^3.1.3",
+    "uglify-js": "^3.1.4",
     "url-loader": "^0.6.2",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1"
+    "webpack": "^3.7.1",
+    "webpack-dev-server": "^2.9.2"
   },
   "dependencies": {
     "bootstrap": "^4.0.0-beta",

React_Full_Project/scss/core/_footer.scss

@@ -1,9 +1,9 @@
 .app-footer {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   padding: 0 $spacer;
   color: $footer-color;
   background: $footer-bg;
-  flex-wrap: wrap;
-  align-items: center;
   @include borders($footer-borders);
 }

React_Full_Project/scss/core/_layout.scss

@@ -11,8 +11,8 @@
 app-dashboard,
 app-root {
   display: flex;
-  min-height: 100vh;
   flex-direction: column;
+  min-height: 100vh;
 }
 
 .app-header {
@@ -26,12 +26,12 @@ app-root {
 .app-body {
   display: flex;
   flex-direction: row;
-  overflow-x: hidden;
   flex-grow: 1;
+  overflow-x: hidden;
 
   .main {
-    min-width: 0;
     flex: 1;
+    min-width: 0;
   }
 
   .sidebar {
@@ -269,9 +269,11 @@ app-root {
 .footer-fixed {
   .app-footer {
     position: fixed;
+    right: 0;
     bottom: 0;
+    left: 0;
     z-index: $zindex-sticky;
-    width: 100%;
+    height: $footer-height;
   }
 
   .app-body {
@@ -328,17 +330,26 @@ app-root {
     margin-top: $navbar-height;
   }
 
+  .breadcrumb-fixed {
+    .main:nth-child(2) .breadcrumb {
+      right: auto;
+      left: auto;
+      width: 100%;
+    }
+  }
+
   .sidebar,
   .sidebar-fixed .sidebar {
     position: fixed;
     z-index: $zindex-sticky - 1;
     width: $mobile-sidebar-width;
-    height: 100%;
+    // height: 100%;
     margin-left: - $mobile-sidebar-width;
 
     .sidebar-nav,
     .nav {
       width: $mobile-sidebar-width !important;
+      height: calc(100vh - #{$navbar-height});
     }
 
     .sidebar-minimizer {
@@ -364,10 +375,6 @@ app-root {
     .sidebar {
       width: $mobile-sidebar-width;
       margin-left: 0;
-
-      .sidebar-nav {
-        height: calc(100vh - #{$navbar-height});
-      }
     }
 
     .main {
@@ -375,11 +382,4 @@ app-root {
       margin-left: $mobile-sidebar-width !important;
     }
   }
-
-  .breadcrumb-fixed {
-    .main .breadcrumb {
-      right: 0 !important;
-      left: 0 !important;
-    }
-  }
 }

React_Full_Project/scss/core/_navbar.scss

@@ -1,7 +1,7 @@
 .app-header.navbar {
   position: relative;
-  height: $navbar-height;
   flex-direction: row;
+  height: $navbar-height;
   padding: 0;
   margin: 0;
   background-color: $navbar-bg;
@@ -22,7 +22,17 @@
   }
 
   .navbar-toggler {
-    color: $navbar-color;
+    min-width: 50px;
+    padding: $navbar-toggler-padding-y 0;
+
+    &:hover .navbar-toggler-icon {
+      background-image: $navbar-toggler-icon-hover;
+    }
+  }
+
+  .navbar-toggler-icon {
+    height: 23px;
+    background-image: $navbar-toggler-icon;
   }
 
   .navbar-nav {

React_Full_Project/scss/core/_sidebar.scss

@@ -78,8 +78,8 @@
 
   .nav {
     @include sidebar-width($sidebar-borders, $sidebar-width);
-    min-height: 100%;
     flex-direction: column;
+    min-height: 100%;
   }
 
   .nav-title {

React_Full_Project/scss/core/_variables.scss

@@ -69,6 +69,9 @@ $navbar-hover-color:                  $gray-800 !default;
 $navbar-active-color:                 $gray-800 !default;
 $navbar-disabled-color:               $gray-300 !default;
 
+$navbar-toggler-icon:                 str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-toggler-icon-hover:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+
 // Sidebar
 
 $sidebar-width:                       200px !default;

React_Full_Project/scss/style.scss

@@ -1,10 +1,11 @@
 /*!
  * CoreUI - Open Source Bootstrap Admin Template
- * @version v1.0.1
+ * @version v1.0.2
  * @link http://coreui.io
  * Copyright (c) 2017 creativeLabs Łukasz Holeczek
  * @license MIT
  */
+
 // Override Boostrap variables
 @import "bootstrap-variables";
 

React_Full_Project/src/components/Aside/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Aside",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Aside.js"
 }

React_Full_Project/src/components/Breadcrumb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Breadcrumb",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Breadcrumb.js"
 }

React_Full_Project/src/components/Footer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Footer",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Footer.js"
 }

React_Full_Project/src/components/Header/Header.js

@@ -1,23 +1,19 @@
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {
-  Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavbarBrand, NavbarToggler, NavDropdown, NavItem, NavLink
+  Nav,
+  NavbarBrand,
+  NavbarToggler,
+  NavItem,
+  NavLink,
+  Badge
 } from 'reactstrap';
+import HeaderDropdown from './HeaderDropdown';
 
 class Header extends Component {
 
   constructor(props) {
     super(props);
-
-    this.toggle = this.toggle.bind(this);
-    this.state = {
-      dropdownOpen: false
-    };
-  }
-
-  toggle() {
-    this.setState({
-      dropdownOpen: !this.state.dropdownOpen
-    });
   }
 
   sidebarToggle(e) {
@@ -43,9 +39,13 @@ class Header extends Component {
   render() {
     return (
       <header className="app-header navbar">
-        <NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>&#9776;</NavbarToggler>
+        <NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>
+          <span className="navbar-toggler-icon"></span>
+        </NavbarToggler>
         <NavbarBrand href="#"></NavbarBrand>
-        <NavbarToggler className="d-md-down-none" onClick={this.sidebarToggle}>&#9776;</NavbarToggler>
+        <NavbarToggler className="d-md-down-none" onClick={this.sidebarToggle}>
+          <span className="navbar-toggler-icon"></span>
+        </NavbarToggler>
         <Nav className="d-md-down-none" navbar>
           <NavItem className="px-3">
             <NavLink href="#">Dashboard</NavLink>
@@ -67,29 +67,11 @@ class Header extends Component {
           <NavItem className="d-md-down-none">
             <NavLink href="#"><i className="icon-location-pin"></i></NavLink>
           </NavItem>
-          <NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
-            <DropdownToggle nav caret>
-              <img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
-              <span className="d-md-down-none">admin</span>
-            </DropdownToggle>
-            <DropdownMenu right>
-              <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-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 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>
-          </NavDropdown>
+          <HeaderDropdown/>
         </Nav>
-        <NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>&#9776;</NavbarToggler>
+        <NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>
+          <span className="navbar-toggler-icon"></span>
+        </NavbarToggler>
       </header>
     );
   }

React_Full_Project/src/components/Header/HeaderDropdown.js

@@ -0,0 +1,61 @@
+import React, {Component} from 'react';
+import {
+  Badge,
+  DropdownItem,
+  DropdownMenu,
+  DropdownToggle,
+  NavDropdown
+} from 'reactstrap';
+
+class HeaderDropdown extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      dropdownOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+
+  dropAccnt() {
+    return (
+      <NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+        <DropdownToggle nav caret={this.state.caretVisible}>
+          <img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+          <span className="d-md-down-none">admin</span>
+        </DropdownToggle>
+        <DropdownMenu right>
+          <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-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 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>
+      </NavDropdown>
+    );
+  }
+
+  render() {
+    const {...attributes} = this.props;
+    return (
+      this.dropAccnt()
+    );
+  }
+}
+
+export default HeaderDropdown;

React_Full_Project/src/components/Header/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Header",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Header.js"
 }

React_Full_Project/src/components/Sidebar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Sidebar",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Sidebar.js"
 }

React_Full_Project/src/components/SidebarFooter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "SidebarFooter",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./SidebarFooter.js"
 }

React_Full_Project/src/components/SidebarForm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "SidebarForm",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./SidebarForm.js"
 }

React_Full_Project/src/components/SidebarHeader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "SidebarHeader",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./SidebarHeader.js"
 }

React_Full_Project/src/components/SidebarMinimizer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "SidebarMinimizer",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./SidebarMinimizer.js"
 }

React_Full_Project/src/containers/Full/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Full",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Full.js"
 }

React_Full_Project/src/views/Charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Charts",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Charts.js"
 }

React_Full_Project/src/views/Components/Buttons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Buttons",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Buttons.js"
 }

React_Full_Project/src/views/Components/Cards/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Cards",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Cards.js"
 }

React_Full_Project/src/views/Components/Forms/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Forms",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Forms.js"
 }

React_Full_Project/src/views/Components/Modals/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Modals",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Modals.js"
 }

React_Full_Project/src/views/Components/SocialButtons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "SocialButtons",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./SocialButtons.js"
 }

React_Full_Project/src/views/Components/Switches/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Switches",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Switches.js"
 }

React_Full_Project/src/views/Components/Tables/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Tables",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Tables.js"
 }

React_Full_Project/src/views/Components/Tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Tabs",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Tabs.js"
 }

React_Full_Project/src/views/Dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashboard",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Dashboard.js"
 }

React_Full_Project/src/views/Icons/FontAwesome/package.json

@@ -1,6 +1,6 @@
 {
   "name": "FontAwesome",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./FontAwesome.js"
 }

React_Full_Project/src/views/Icons/SimpleLineIcons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "SimpleLineIcons",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./SimpleLineIcons.js"
 }

React_Full_Project/src/views/Pages/Login/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Login",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Login.js"
 }

React_Full_Project/src/views/Pages/Page404/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Page404",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Page404.js"
 }

React_Full_Project/src/views/Pages/Page500/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Page500",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Page500.js"
 }

React_Full_Project/src/views/Pages/Register/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Register",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Register.js"
 }

React_Full_Project/src/views/Widgets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Widgets",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Widgets.js"
 }

React_Starter/scss/core/_footer.scss

@@ -1,9 +1,9 @@
 .app-footer {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   padding: 0 $spacer;
   color: $footer-color;
   background: $footer-bg;
-  flex-wrap: wrap;
-  align-items: center;
   @include borders($footer-borders);
 }

React_Starter/scss/core/_layout.scss

@@ -11,8 +11,8 @@
 app-dashboard,
 app-root {
   display: flex;
-  min-height: 100vh;
   flex-direction: column;
+  min-height: 100vh;
 }
 
 .app-header {
@@ -26,12 +26,12 @@ app-root {
 .app-body {
   display: flex;
   flex-direction: row;
-  overflow-x: hidden;
   flex-grow: 1;
+  overflow-x: hidden;
 
   .main {
-    min-width: 0;
     flex: 1;
+    min-width: 0;
   }
 
   .sidebar {
@@ -269,9 +269,11 @@ app-root {
 .footer-fixed {
   .app-footer {
     position: fixed;
+    right: 0;
     bottom: 0;
+    left: 0;
     z-index: $zindex-sticky;
-    width: 100%;
+    height: $footer-height;
   }
 
   .app-body {
@@ -328,17 +330,26 @@ app-root {
     margin-top: $navbar-height;
   }
 
+  .breadcrumb-fixed {
+    .main:nth-child(2) .breadcrumb {
+      right: auto;
+      left: auto;
+      width: 100%;
+    }
+  }
+
   .sidebar,
   .sidebar-fixed .sidebar {
     position: fixed;
     z-index: $zindex-sticky - 1;
     width: $mobile-sidebar-width;
-    height: 100%;
+    // height: 100%;
     margin-left: - $mobile-sidebar-width;
 
     .sidebar-nav,
     .nav {
       width: $mobile-sidebar-width !important;
+      height: calc(100vh - #{$navbar-height});
     }
 
     .sidebar-minimizer {
@@ -364,10 +375,6 @@ app-root {
     .sidebar {
       width: $mobile-sidebar-width;
       margin-left: 0;
-
-      .sidebar-nav {
-        height: calc(100vh - #{$navbar-height});
-      }
     }
 
     .main {
@@ -375,11 +382,4 @@ app-root {
       margin-left: $mobile-sidebar-width !important;
     }
   }
-
-  .breadcrumb-fixed {
-    .main .breadcrumb {
-      right: 0 !important;
-      left: 0 !important;
-    }
-  }
 }

React_Starter/scss/core/_navbar.scss

@@ -1,7 +1,7 @@
 .app-header.navbar {
   position: relative;
-  height: $navbar-height;
   flex-direction: row;
+  height: $navbar-height;
   padding: 0;
   margin: 0;
   background-color: $navbar-bg;
@@ -22,7 +22,17 @@
   }
 
   .navbar-toggler {
-    color: $navbar-color;
+    min-width: 50px;
+    padding: $navbar-toggler-padding-y 0;
+
+    &:hover .navbar-toggler-icon {
+      background-image: $navbar-toggler-icon-hover;
+    }
+  }
+
+  .navbar-toggler-icon {
+    height: 23px;
+    background-image: $navbar-toggler-icon;
   }
 
   .navbar-nav {

React_Starter/scss/core/_sidebar.scss

@@ -78,8 +78,8 @@
 
   .nav {
     @include sidebar-width($sidebar-borders, $sidebar-width);
-    min-height: 100%;
     flex-direction: column;
+    min-height: 100%;
   }
 
   .nav-title {

React_Starter/scss/core/_variables.scss

@@ -69,6 +69,9 @@ $navbar-hover-color:                  $gray-800 !default;
 $navbar-active-color:                 $gray-800 !default;
 $navbar-disabled-color:               $gray-300 !default;
 
+$navbar-toggler-icon:                 str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-toggler-icon-hover:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+
 // Sidebar
 
 $sidebar-width:                       200px !default;

React_Starter/scss/style.scss

@@ -1,10 +1,11 @@
 /*!
  * CoreUI - Open Source Bootstrap Admin Template
- * @version v1.0.1
+ * @version v1.0.2
  * @link http://coreui.io
  * Copyright (c) 2017 creativeLabs Łukasz Holeczek
  * @license MIT
  */
+
 // Override Boostrap variables
 @import "bootstrap-variables";
 

React_Starter/src/components/Aside/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Aside",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Aside.js"
 }

React_Starter/src/components/Breadcrumb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Breadcrumb",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Breadcrumb.js"
 }

React_Starter/src/components/Footer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Footer",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Footer.js"
 }

React_Starter/src/components/Header/Header.js

@@ -31,10 +31,16 @@ class Header extends Component {
   render() {
     return (
       <header className="app-header navbar">
-        <NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>&#9776;</NavbarToggler>
+        <NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>
+          <span className="navbar-toggler-icon"></span>
+        </NavbarToggler>
         <NavbarBrand href="#"></NavbarBrand>
-        <NavbarToggler className="d-md-down-none mr-auto" onClick={this.sidebarToggle}>&#9776;</NavbarToggler>
-        <NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>&#9776;</NavbarToggler>
+        <NavbarToggler className="d-md-down-none mr-auto" onClick={this.sidebarToggle}>
+          <span className="navbar-toggler-icon"></span>
+        </NavbarToggler>
+        <NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>
+          <span className="navbar-toggler-icon"></span>
+        </NavbarToggler>
       </header>
     )
   }

React_Starter/src/components/Header/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Header",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Header.js"
 }

React_Starter/src/components/Sidebar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Sidebar",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Sidebar.js"
 }

React_Starter/src/components/SidebarFooter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "SidebarFooter",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./SidebarFooter.js"
 }

React_Starter/src/components/SidebarForm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "SidebarForm",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./SidebarForm.js"
 }

React_Starter/src/components/SidebarHeader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "SidebarHeader",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./SidebarHeader.js"
 }

React_Starter/src/components/SidebarMinimizer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "SidebarMinimizer",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./SidebarMinimizer.js"
 }

React_Starter/src/containers/Full/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Full",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Full.js"
 }

React_Starter/src/views/Dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashboard",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Dashboard.js"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Open Source React Admin Template",
   "main": "",
   "homepage": "http://coreui.io/react/",