@plusscommunities/pluss-core-web 1.2.12-beta.0 → 1.3.1

package/dist/index.cjs.js

@@ -4489,13 +4489,13 @@ var ProfilePicComponent = /*#__PURE__*/function (_Component) {
   return ProfilePicComponent;
 }(React.Component);
 
-var mapStateToProps$5 = function mapStateToProps(state) {
+var mapStateToProps$6 = function mapStateToProps(state) {
   return {
     colourBrandingApp: getAppColourFromState(state)
   };
 };
 
-var ProfilePic = reactRedux.connect(mapStateToProps$5, {})(ProfilePicComponent);
+var ProfilePic = reactRedux.connect(mapStateToProps$6, {})(ProfilePicComponent);
 
 function _createSuper$v(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$v(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
@@ -5478,11 +5478,11 @@ var FileInputComponent = /*#__PURE__*/function (_Component) {
   return FileInputComponent;
 }(React.Component);
 
-var mapStateToProps$4 = function mapStateToProps() {
+var mapStateToProps$5 = function mapStateToProps() {
   return {};
 };
 
-var FileInput = reactRedux.connect(mapStateToProps$4, {}, null, {
+var FileInput = reactRedux.connect(mapStateToProps$5, {}, null, {
   withRef: true
 })(FileInputComponent);
 
@@ -5809,14 +5809,14 @@ var Header = /*#__PURE__*/function (_Component) {
   return Header;
 }(React.Component);
 
-var mapStateToProps$3 = function mapStateToProps(state) {
+var mapStateToProps$4 = function mapStateToProps(state) {
   return {
     auth: state.auth,
     isSideMenuOpen: state.nav.isSideMenuOpen
   };
 };
 
-var exportObj$3 = reactRedux.connect(mapStateToProps$3, {
+var exportObj$4 = reactRedux.connect(mapStateToProps$4, {
   setNavData: setNavData
 })(reactRouter.withRouter(Header));
 
@@ -5880,37 +5880,52 @@ var SideNavItem = /*#__PURE__*/function (_Component) {
         result += ' sideNav-item--active';
       }
 
+      if (this.props.subStyle) {
+        result += ' sideNav-item-subStyle';
+      }
+
       return result;
     }
   }, {
     key: "renderIcon",
     value: function renderIcon() {
+      if (!this.props.Icon) {
+        return null;
+      }
+
+      var content = null;
+
       if (this.props.isFontAwesome) {
-        return /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+        content = /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
           className: "sideNav-item-icon",
           name: this.props.Icon
         });
-      }
-
-      if (this.props.isSVG) {
-        return /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+      } else if (this.props.isSVG) {
+        content = /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
           className: "sideNav-item-icon",
           icon: this.props.Icon,
           colour: COLOUR_DUSK_LIGHTER
         });
+      } else {
+        content = /*#__PURE__*/React__default['default'].createElement(P60Icon, {
+          className: "sideNav-item-icon",
+          icon: this.props.Icon
+        });
       }
 
-      return /*#__PURE__*/React__default['default'].createElement(P60Icon, {
-        className: "sideNav-item-icon",
-        icon: this.props.Icon
-      });
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        style: _objectSpread$b(_objectSpread$b({}, styles$7.section), {}, {
+          width: 18,
+          marginRight: 16
+        })
+      }, content);
     }
   }, {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React__default['default'].createElement("div", {
         className: "sideNav-item".concat(this.getClassNames()),
-        style: _objectSpread$b(_objectSpread$b({}, styles$7.sideNavItem), this.props.style),
+        style: this.props.style,
         onClick: this.goTo
       }, !this.props.noSideDot && /*#__PURE__*/React__default['default'].createElement("div", {
         style: _objectSpread$b(_objectSpread$b({}, styles$7.section), {}, {
@@ -5919,12 +5934,7 @@ var SideNavItem = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "sideNav-item-dot",
         style: styles$7.sideNavDot
-      })), /*#__PURE__*/React__default['default'].createElement("div", {
-        style: _objectSpread$b(_objectSpread$b({}, styles$7.section), {}, {
-          width: 18,
-          marginRight: 16
-        })
-      }, this.renderIcon()), /*#__PURE__*/React__default['default'].createElement("div", {
+      })), this.renderIcon(), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "sideNav-item-text",
         style: styles$7.section
       }, this.props.Text), !___default['default'].isNil(this.props.count) && this.props.count > 0 && /*#__PURE__*/React__default['default'].createElement("div", {
@@ -5939,14 +5949,6 @@ var SideNavItem = /*#__PURE__*/function (_Component) {
 }(React.Component);
 
 var styles$7 = {
-  sideNavItem: {
-    width: '100%',
-    paddingLeft: 16,
-    paddingRight: 24,
-    paddingTop: 8,
-    paddingBottom: 8,
-    display: 'flex'
-  },
   section: {
     display: 'flex',
     alignItems: 'center',
@@ -5958,7 +5960,7 @@ var styles$7 = {
     borderRadius: 5
   }
 };
-var exportObj$2 = reactRedux.connect(null, {})(reactRouter.withRouter(SideNavItem));
+var exportObj$3 = reactRedux.connect(null, {})(reactRouter.withRouter(SideNavItem));
 
 function _createSuper$n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$n(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
@@ -5969,13 +5971,43 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
 
   var _super = _createSuper$n(HubSidebar);
 
-  function HubSidebar() {
+  function HubSidebar(props) {
+    var _this;
+
     _classCallCheck__default['default'](this, HubSidebar);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.state = {
+      showSidebar: false
+    };
+    return _this;
   }
 
   _createClass__default['default'](HubSidebar, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      this.props.setNavData({
+        condensedSidebar: true
+      });
+      setTimeout(function () {
+        _this2.setState({
+          showSidebar: true
+        });
+      }, 50);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.props.setNavData({
+        condensedSidebar: false
+      });
+      this.setState({
+        showSidebar: false
+      });
+    }
+  }, {
     key: "renderNewButton",
     value: function renderNewButton(item, index) {
       return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -5992,7 +6024,7 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderNavItem",
     value: function renderNavItem(item, index) {
-      return /*#__PURE__*/React__default['default'].createElement(exportObj$2, {
+      return /*#__PURE__*/React__default['default'].createElement(exportObj$3, {
         Text: item.text,
         Icon: item.icon,
         Link: item.url,
@@ -6006,7 +6038,7 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderSection",
     value: function renderSection(section, index) {
-      var _this = this;
+      var _this3 = this;
 
       return /*#__PURE__*/React__default['default'].createElement("div", {
         className: "hubSidebar_section",
@@ -6017,10 +6049,10 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
       }, section.title), section.items.map(function (item, itemIndex) {
         switch (item.type) {
           case 'newButton':
-            return _this.renderNewButton(item, itemIndex);
+            return _this3.renderNewButton(item, itemIndex);
 
           case 'navItem':
-            return _this.renderNavItem(item, itemIndex);
+            return _this3.renderNavItem(item, itemIndex);
 
           default:
             return null;
@@ -6030,15 +6062,15 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this4 = this;
 
       return /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "hubSidebar ".concat(this.props.className ? this.props.className : ''),
+        className: "hubSidebar".concat(this.state.showSidebar ? ' hubSidebar-show' : '', " ").concat(this.props.className ? this.props.className : ''),
         style: this.props.style
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "hubSidebar_content"
       }, this.props.sections.map(function (section, i) {
-        return _this2.renderSection(section, i);
+        return _this4.renderSection(section, i);
       })));
     }
   }]);
@@ -6046,6 +6078,17 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
   return HubSidebar;
 }(React.PureComponent);
 
+var mapStateToProps$3 = function mapStateToProps(state) {
+  return {
+    auth: state.auth,
+    isSideMenuOpen: state.nav.isSideMenuOpen
+  };
+};
+
+var exportObj$2 = reactRedux.connect(mapStateToProps$3, {
+  setNavData: setNavData
+})(HubSidebar);
+
 function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -10804,8 +10847,8 @@ var index = /*#__PURE__*/Object.freeze({
   DatePicker: DatePicker,
   FileInput: FileInput,
   GenericInput: GenericInput,
-  Header: exportObj$3,
-  HubSidebar: HubSidebar,
+  Header: exportObj$4,
+  HubSidebar: exportObj$2,
   ImageInput: ImageInput,
   MoreMenu: MoreMenu,
   OverlayPage: OverlayPage,
@@ -10820,7 +10863,7 @@ var index = /*#__PURE__*/Object.freeze({
   SVGIcon: SVGIcon,
   Tag: Tag,
   Text: Text,
-  SideNavItem: exportObj$2,
+  SideNavItem: exportObj$3,
   StatusButton: StatusButton,
   SuccessPopup: SuccessPopup,
   Reactions: Reactions,

package/dist/index.esm.js

@@ -4462,13 +4462,13 @@ var ProfilePicComponent = /*#__PURE__*/function (_Component) {
   return ProfilePicComponent;
 }(Component);
 
-var mapStateToProps$5 = function mapStateToProps(state) {
+var mapStateToProps$6 = function mapStateToProps(state) {
   return {
     colourBrandingApp: getAppColourFromState(state)
   };
 };
 
-var ProfilePic = connect(mapStateToProps$5, {})(ProfilePicComponent);
+var ProfilePic = connect(mapStateToProps$6, {})(ProfilePicComponent);
 
 function _createSuper$v(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$v(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -5451,11 +5451,11 @@ var FileInputComponent = /*#__PURE__*/function (_Component) {
   return FileInputComponent;
 }(Component);
 
-var mapStateToProps$4 = function mapStateToProps() {
+var mapStateToProps$5 = function mapStateToProps() {
   return {};
 };
 
-var FileInput = connect(mapStateToProps$4, {}, null, {
+var FileInput = connect(mapStateToProps$5, {}, null, {
   withRef: true
 })(FileInputComponent);
 
@@ -5782,14 +5782,14 @@ var Header = /*#__PURE__*/function (_Component) {
   return Header;
 }(Component);
 
-var mapStateToProps$3 = function mapStateToProps(state) {
+var mapStateToProps$4 = function mapStateToProps(state) {
   return {
     auth: state.auth,
     isSideMenuOpen: state.nav.isSideMenuOpen
   };
 };
 
-var exportObj$3 = connect(mapStateToProps$3, {
+var exportObj$4 = connect(mapStateToProps$4, {
   setNavData: setNavData
 })(withRouter(Header));
 
@@ -5853,37 +5853,52 @@ var SideNavItem = /*#__PURE__*/function (_Component) {
         result += ' sideNav-item--active';
       }
 
+      if (this.props.subStyle) {
+        result += ' sideNav-item-subStyle';
+      }
+
       return result;
     }
   }, {
     key: "renderIcon",
     value: function renderIcon() {
+      if (!this.props.Icon) {
+        return null;
+      }
+
+      var content = null;
+
       if (this.props.isFontAwesome) {
-        return /*#__PURE__*/React.createElement(FontAwesome, {
+        content = /*#__PURE__*/React.createElement(FontAwesome, {
           className: "sideNav-item-icon",
           name: this.props.Icon
         });
-      }
-
-      if (this.props.isSVG) {
-        return /*#__PURE__*/React.createElement(SVGIcon, {
+      } else if (this.props.isSVG) {
+        content = /*#__PURE__*/React.createElement(SVGIcon, {
           className: "sideNav-item-icon",
           icon: this.props.Icon,
           colour: COLOUR_DUSK_LIGHTER
         });
+      } else {
+        content = /*#__PURE__*/React.createElement(P60Icon, {
+          className: "sideNav-item-icon",
+          icon: this.props.Icon
+        });
       }
 
-      return /*#__PURE__*/React.createElement(P60Icon, {
-        className: "sideNav-item-icon",
-        icon: this.props.Icon
-      });
+      return /*#__PURE__*/React.createElement("div", {
+        style: _objectSpread$b(_objectSpread$b({}, styles$7.section), {}, {
+          width: 18,
+          marginRight: 16
+        })
+      }, content);
     }
   }, {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement("div", {
         className: "sideNav-item".concat(this.getClassNames()),
-        style: _objectSpread$b(_objectSpread$b({}, styles$7.sideNavItem), this.props.style),
+        style: this.props.style,
         onClick: this.goTo
       }, !this.props.noSideDot && /*#__PURE__*/React.createElement("div", {
         style: _objectSpread$b(_objectSpread$b({}, styles$7.section), {}, {
@@ -5892,12 +5907,7 @@ var SideNavItem = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement("div", {
         className: "sideNav-item-dot",
         style: styles$7.sideNavDot
-      })), /*#__PURE__*/React.createElement("div", {
-        style: _objectSpread$b(_objectSpread$b({}, styles$7.section), {}, {
-          width: 18,
-          marginRight: 16
-        })
-      }, this.renderIcon()), /*#__PURE__*/React.createElement("div", {
+      })), this.renderIcon(), /*#__PURE__*/React.createElement("div", {
         className: "sideNav-item-text",
         style: styles$7.section
       }, this.props.Text), !_.isNil(this.props.count) && this.props.count > 0 && /*#__PURE__*/React.createElement("div", {
@@ -5912,14 +5922,6 @@ var SideNavItem = /*#__PURE__*/function (_Component) {
 }(Component);
 
 var styles$7 = {
-  sideNavItem: {
-    width: '100%',
-    paddingLeft: 16,
-    paddingRight: 24,
-    paddingTop: 8,
-    paddingBottom: 8,
-    display: 'flex'
-  },
   section: {
     display: 'flex',
     alignItems: 'center',
@@ -5931,7 +5933,7 @@ var styles$7 = {
     borderRadius: 5
   }
 };
-var exportObj$2 = connect(null, {})(withRouter(SideNavItem));
+var exportObj$3 = connect(null, {})(withRouter(SideNavItem));
 
 function _createSuper$n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$n(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -5942,13 +5944,43 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
 
   var _super = _createSuper$n(HubSidebar);
 
-  function HubSidebar() {
+  function HubSidebar(props) {
+    var _this;
+
     _classCallCheck(this, HubSidebar);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.state = {
+      showSidebar: false
+    };
+    return _this;
   }
 
   _createClass(HubSidebar, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      this.props.setNavData({
+        condensedSidebar: true
+      });
+      setTimeout(function () {
+        _this2.setState({
+          showSidebar: true
+        });
+      }, 50);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.props.setNavData({
+        condensedSidebar: false
+      });
+      this.setState({
+        showSidebar: false
+      });
+    }
+  }, {
     key: "renderNewButton",
     value: function renderNewButton(item, index) {
       return /*#__PURE__*/React.createElement("div", {
@@ -5965,7 +5997,7 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderNavItem",
     value: function renderNavItem(item, index) {
-      return /*#__PURE__*/React.createElement(exportObj$2, {
+      return /*#__PURE__*/React.createElement(exportObj$3, {
         Text: item.text,
         Icon: item.icon,
         Link: item.url,
@@ -5979,7 +6011,7 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderSection",
     value: function renderSection(section, index) {
-      var _this = this;
+      var _this3 = this;
 
       return /*#__PURE__*/React.createElement("div", {
         className: "hubSidebar_section",
@@ -5990,10 +6022,10 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
       }, section.title), section.items.map(function (item, itemIndex) {
         switch (item.type) {
           case 'newButton':
-            return _this.renderNewButton(item, itemIndex);
+            return _this3.renderNewButton(item, itemIndex);
 
           case 'navItem':
-            return _this.renderNavItem(item, itemIndex);
+            return _this3.renderNavItem(item, itemIndex);
 
           default:
             return null;
@@ -6003,15 +6035,15 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this4 = this;
 
       return /*#__PURE__*/React.createElement("div", {
-        className: "hubSidebar ".concat(this.props.className ? this.props.className : ''),
+        className: "hubSidebar".concat(this.state.showSidebar ? ' hubSidebar-show' : '', " ").concat(this.props.className ? this.props.className : ''),
         style: this.props.style
       }, /*#__PURE__*/React.createElement("div", {
         className: "hubSidebar_content"
       }, this.props.sections.map(function (section, i) {
-        return _this2.renderSection(section, i);
+        return _this4.renderSection(section, i);
       })));
     }
   }]);
@@ -6019,6 +6051,17 @@ var HubSidebar = /*#__PURE__*/function (_PureComponent) {
   return HubSidebar;
 }(PureComponent);
 
+var mapStateToProps$3 = function mapStateToProps(state) {
+  return {
+    auth: state.auth,
+    isSideMenuOpen: state.nav.isSideMenuOpen
+  };
+};
+
+var exportObj$2 = connect(mapStateToProps$3, {
+  setNavData: setNavData
+})(HubSidebar);
+
 function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -10777,8 +10820,8 @@ var index = /*#__PURE__*/Object.freeze({
   DatePicker: DatePicker,
   FileInput: FileInput,
   GenericInput: GenericInput,
-  Header: exportObj$3,
-  HubSidebar: HubSidebar,
+  Header: exportObj$4,
+  HubSidebar: exportObj$2,
   ImageInput: ImageInput,
   MoreMenu: MoreMenu,
   OverlayPage: OverlayPage,
@@ -10793,7 +10836,7 @@ var index = /*#__PURE__*/Object.freeze({
   SVGIcon: SVGIcon,
   Tag: Tag,
   Text: Text,
-  SideNavItem: exportObj$2,
+  SideNavItem: exportObj$3,
   StatusButton: StatusButton,
   SuccessPopup: SuccessPopup,
   Reactions: Reactions,

package/dist/index.umd.js

@@ -4464,13 +4464,13 @@
     return ProfilePicComponent;
   }(React.Component);
 
-  var mapStateToProps$5 = function mapStateToProps(state) {
+  var mapStateToProps$6 = function mapStateToProps(state) {
     return {
       colourBrandingApp: getAppColourFromState(state)
     };
   };
 
-  var ProfilePic = reactRedux.connect(mapStateToProps$5, {})(ProfilePicComponent);
+  var ProfilePic = reactRedux.connect(mapStateToProps$6, {})(ProfilePicComponent);
 
   function _createSuper$v(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$v(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
@@ -5453,11 +5453,11 @@
     return FileInputComponent;
   }(React.Component);
 
-  var mapStateToProps$4 = function mapStateToProps() {
+  var mapStateToProps$5 = function mapStateToProps() {
     return {};
   };
 
-  var FileInput = reactRedux.connect(mapStateToProps$4, {}, null, {
+  var FileInput = reactRedux.connect(mapStateToProps$5, {}, null, {
     withRef: true
   })(FileInputComponent);
 
@@ -5784,14 +5784,14 @@
     return Header;
   }(React.Component);
 
-  var mapStateToProps$3 = function mapStateToProps(state) {
+  var mapStateToProps$4 = function mapStateToProps(state) {
     return {
       auth: state.auth,
       isSideMenuOpen: state.nav.isSideMenuOpen
     };
   };
 
-  var exportObj$3 = reactRedux.connect(mapStateToProps$3, {
+  var exportObj$4 = reactRedux.connect(mapStateToProps$4, {
     setNavData: setNavData
   })(reactRouter.withRouter(Header));
 
@@ -5855,37 +5855,52 @@
           result += ' sideNav-item--active';
         }
 
+        if (this.props.subStyle) {
+          result += ' sideNav-item-subStyle';
+        }
+
         return result;
       }
     }, {
       key: "renderIcon",
       value: function renderIcon() {
+        if (!this.props.Icon) {
+          return null;
+        }
+
+        var content = null;
+
         if (this.props.isFontAwesome) {
-          return /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+          content = /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
             className: "sideNav-item-icon",
             name: this.props.Icon
           });
-        }
-
-        if (this.props.isSVG) {
-          return /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+        } else if (this.props.isSVG) {
+          content = /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
             className: "sideNav-item-icon",
             icon: this.props.Icon,
             colour: COLOUR_DUSK_LIGHTER
           });
+        } else {
+          content = /*#__PURE__*/React__default['default'].createElement(P60Icon, {
+            className: "sideNav-item-icon",
+            icon: this.props.Icon
+          });
         }
 
-        return /*#__PURE__*/React__default['default'].createElement(P60Icon, {
-          className: "sideNav-item-icon",
-          icon: this.props.Icon
-        });
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          style: _objectSpread$b(_objectSpread$b({}, styles$7.section), {}, {
+            width: 18,
+            marginRight: 16
+          })
+        }, content);
       }
     }, {
       key: "render",
       value: function render() {
         return /*#__PURE__*/React__default['default'].createElement("div", {
           className: "sideNav-item".concat(this.getClassNames()),
-          style: _objectSpread$b(_objectSpread$b({}, styles$7.sideNavItem), this.props.style),
+          style: this.props.style,
           onClick: this.goTo
         }, !this.props.noSideDot && /*#__PURE__*/React__default['default'].createElement("div", {
           style: _objectSpread$b(_objectSpread$b({}, styles$7.section), {}, {
@@ -5894,12 +5909,7 @@
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "sideNav-item-dot",
           style: styles$7.sideNavDot
-        })), /*#__PURE__*/React__default['default'].createElement("div", {
-          style: _objectSpread$b(_objectSpread$b({}, styles$7.section), {}, {
-            width: 18,
-            marginRight: 16
-          })
-        }, this.renderIcon()), /*#__PURE__*/React__default['default'].createElement("div", {
+        })), this.renderIcon(), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "sideNav-item-text",
           style: styles$7.section
         }, this.props.Text), !___default['default'].isNil(this.props.count) && this.props.count > 0 && /*#__PURE__*/React__default['default'].createElement("div", {
@@ -5914,14 +5924,6 @@
   }(React.Component);
 
   var styles$7 = {
-    sideNavItem: {
-      width: '100%',
-      paddingLeft: 16,
-      paddingRight: 24,
-      paddingTop: 8,
-      paddingBottom: 8,
-      display: 'flex'
-    },
     section: {
       display: 'flex',
       alignItems: 'center',
@@ -5933,7 +5935,7 @@
       borderRadius: 5
     }
   };
-  var exportObj$2 = reactRedux.connect(null, {})(reactRouter.withRouter(SideNavItem));
+  var exportObj$3 = reactRedux.connect(null, {})(reactRouter.withRouter(SideNavItem));
 
   function _createSuper$n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$n(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
@@ -5944,13 +5946,43 @@
 
     var _super = _createSuper$n(HubSidebar);
 
-    function HubSidebar() {
+    function HubSidebar(props) {
+      var _this;
+
       _classCallCheck__default['default'](this, HubSidebar);
 
-      return _super.apply(this, arguments);
+      _this = _super.call(this, props);
+      _this.state = {
+        showSidebar: false
+      };
+      return _this;
     }
 
     _createClass__default['default'](HubSidebar, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        var _this2 = this;
+
+        this.props.setNavData({
+          condensedSidebar: true
+        });
+        setTimeout(function () {
+          _this2.setState({
+            showSidebar: true
+          });
+        }, 50);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.props.setNavData({
+          condensedSidebar: false
+        });
+        this.setState({
+          showSidebar: false
+        });
+      }
+    }, {
       key: "renderNewButton",
       value: function renderNewButton(item, index) {
         return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -5967,7 +5999,7 @@
     }, {
       key: "renderNavItem",
       value: function renderNavItem(item, index) {
-        return /*#__PURE__*/React__default['default'].createElement(exportObj$2, {
+        return /*#__PURE__*/React__default['default'].createElement(exportObj$3, {
           Text: item.text,
           Icon: item.icon,
           Link: item.url,
@@ -5981,7 +6013,7 @@
     }, {
       key: "renderSection",
       value: function renderSection(section, index) {
-        var _this = this;
+        var _this3 = this;
 
         return /*#__PURE__*/React__default['default'].createElement("div", {
           className: "hubSidebar_section",
@@ -5992,10 +6024,10 @@
         }, section.title), section.items.map(function (item, itemIndex) {
           switch (item.type) {
             case 'newButton':
-              return _this.renderNewButton(item, itemIndex);
+              return _this3.renderNewButton(item, itemIndex);
 
             case 'navItem':
-              return _this.renderNavItem(item, itemIndex);
+              return _this3.renderNavItem(item, itemIndex);
 
             default:
               return null;
@@ -6005,15 +6037,15 @@
     }, {
       key: "render",
       value: function render() {
-        var _this2 = this;
+        var _this4 = this;
 
         return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "hubSidebar ".concat(this.props.className ? this.props.className : ''),
+          className: "hubSidebar".concat(this.state.showSidebar ? ' hubSidebar-show' : '', " ").concat(this.props.className ? this.props.className : ''),
           style: this.props.style
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "hubSidebar_content"
         }, this.props.sections.map(function (section, i) {
-          return _this2.renderSection(section, i);
+          return _this4.renderSection(section, i);
         })));
       }
     }]);
@@ -6021,6 +6053,17 @@
     return HubSidebar;
   }(React.PureComponent);
 
+  var mapStateToProps$3 = function mapStateToProps(state) {
+    return {
+      auth: state.auth,
+      isSideMenuOpen: state.nav.isSideMenuOpen
+    };
+  };
+
+  var exportObj$2 = reactRedux.connect(mapStateToProps$3, {
+    setNavData: setNavData
+  })(HubSidebar);
+
   function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
   function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -10779,8 +10822,8 @@
     DatePicker: DatePicker,
     FileInput: FileInput,
     GenericInput: GenericInput,
-    Header: exportObj$3,
-    HubSidebar: HubSidebar,
+    Header: exportObj$4,
+    HubSidebar: exportObj$2,
     ImageInput: ImageInput,
     MoreMenu: MoreMenu,
     OverlayPage: OverlayPage,
@@ -10795,7 +10838,7 @@
     SVGIcon: SVGIcon,
     Tag: Tag,
     Text: Text,
-    SideNavItem: exportObj$2,
+    SideNavItem: exportObj$3,
     StatusButton: StatusButton,
     SuccessPopup: SuccessPopup,
     Reactions: Reactions,

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@plusscommunities/pluss-core-web",
-  "version": "1.2.12-beta.0",
+  "version": "1.3.1",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/index.cjs.js",
   "scripts": {
     "build": "npm i && rollup -c",
     "betapatch": "npm version prepatch --preid=beta",
     "patch": "npm version patch",
-    "betaupload": "npm run build && npm publish --access public --tag beta",
+    "betaupload": "npm run build && npm publish --access public --tag beta && rm -rf node_modules",
     "betaupload:p": "npm run betapatch && npm run betaupload",
-    "upload": "npm run build && npm publish --access public",
+    "upload": "npm run build && npm publish --access public && rm -rf node_modules",
     "upload:p": "npm run patch && npm run upload"
   },
   "author": "Phillip Suh",

package/src/components/HubSidebar.js

@@ -1,10 +1,40 @@
 import React, { PureComponent } from 'react';
 import _ from 'lodash';
+import { connect } from 'react-redux';
+import { setNavData } from '../actions';
 import { SideNavItem } from './SideNavItem';
 import { Button } from './Button';
 import { Text } from './Text';
 
 class HubSidebar extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showSidebar: false,
+    };
+  }
+
+  componentDidMount() {
+    this.props.setNavData({
+      condensedSidebar: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        showSidebar: true,
+      });
+    }, 50);
+  }
+
+  componentWillUnmount() {
+    this.props.setNavData({
+      condensedSidebar: false,
+    });
+    this.setState({
+      showSidebar: false,
+    });
+  }
+
   renderNewButton(item, index) {
     return (
       <div className="hubSidebar_newButtonContainer">
@@ -52,7 +82,10 @@ class HubSidebar extends PureComponent {
 
   render() {
     return (
-      <div className={`hubSidebar ${this.props.className ? this.props.className : ''}`} style={this.props.style}>
+      <div
+        className={`hubSidebar${this.state.showSidebar ? ' hubSidebar-show' : ''} ${this.props.className ? this.props.className : ''}`}
+        style={this.props.style}
+      >
         {/* Top Add Button */}
         <div className="hubSidebar_content">
           {/* Title */}
@@ -65,4 +98,10 @@ class HubSidebar extends PureComponent {
   }
 }
 
-export { HubSidebar };
+const mapStateToProps = (state) => {
+  return { auth: state.auth, isSideMenuOpen: state.nav.isSideMenuOpen };
+};
+
+let exportObj = connect(mapStateToProps, { setNavData })(HubSidebar);
+
+export { exportObj as HubSidebar };

package/src/components/SideNavItem.js

@@ -37,28 +37,36 @@ class SideNavItem extends Component {
     if (this.state.url === this.props.Link || this.props.selected) {
       result += ' sideNav-item--active';
     }
+    if (this.props.subStyle) {
+      result += ' sideNav-item-subStyle';
+    }
     return result;
   }
 
   renderIcon() {
-    if (this.props.isFontAwesome) {
-      return <FontAwesome className="sideNav-item-icon" name={this.props.Icon} />;
+    if (!this.props.Icon) {
+      return null;
     }
-    if (this.props.isSVG) {
-      return <SVGIcon className="sideNav-item-icon" icon={this.props.Icon} colour={COLOUR_DUSK_LIGHTER} />;
+    let content = null;
+    if (this.props.isFontAwesome) {
+      content = <FontAwesome className="sideNav-item-icon" name={this.props.Icon} />;
+    } else if (this.props.isSVG) {
+      content = <SVGIcon className="sideNav-item-icon" icon={this.props.Icon} colour={COLOUR_DUSK_LIGHTER} />;
+    } else {
+      content = <P60Icon className="sideNav-item-icon" icon={this.props.Icon} />;
     }
-    return <P60Icon className="sideNav-item-icon" icon={this.props.Icon} />;
+    return <div style={{ ...styles.section, width: 18, marginRight: 16 }}>{content}</div>;
   }
 
   render() {
     return (
-      <div className={`sideNav-item${this.getClassNames()}`} style={{ ...styles.sideNavItem, ...this.props.style }} onClick={this.goTo}>
+      <div className={`sideNav-item${this.getClassNames()}`} style={this.props.style} onClick={this.goTo}>
         {!this.props.noSideDot && (
           <div style={{ ...styles.section, marginRight: 15 }}>
             <div className="sideNav-item-dot" style={styles.sideNavDot} />
           </div>
         )}
-        <div style={{ ...styles.section, width: 18, marginRight: 16 }}>{this.renderIcon()}</div>
+        {this.renderIcon()}
         <div className="sideNav-item-text" style={styles.section}>
           {this.props.Text}
         </div>
@@ -73,14 +81,6 @@ class SideNavItem extends Component {
 }
 
 const styles = {
-  sideNavItem: {
-    width: '100%',
-    paddingLeft: 16,
-    paddingRight: 24,
-    paddingTop: 8,
-    paddingBottom: 8,
-    display: 'flex',
-  },
   section: {
     display: 'flex',
     alignItems: 'center',