@rio-cloud/rio-uikit 0.16.1-beta-7 → 0.16.1-beta-10

package/lib/components/applicationHeader/AppMenu.js

@@ -17,7 +17,7 @@ var _AppMenuDropdown = _interopRequireDefault(require("./AppMenuDropdown"));
 
 var _modulePropTypes = _interopRequireDefault(require("./modulePropTypes"));
 
-var renderMenuContent = function renderMenuContent(props) {
+var MenuContent = function MenuContent(props) {
   var appMenuItems = props.appMenuItems,
       appNavigator = props.appNavigator; // In case there is a navigation component injected into the header,
   // render this component
@@ -53,7 +53,7 @@ var AppMenu = function AppMenu(props) {
   }, /*#__PURE__*/_react.default.createElement(_AppMenuDropdown.default, {
     title: label,
     caret: hasItems
-  }, renderMenuContent(props)));
+  }, /*#__PURE__*/_react.default.createElement(MenuContent, props)));
 };
 
 exports.AppMenu = AppMenu;
@@ -61,6 +61,7 @@ AppMenu.defaultProps = {
   appMenuItems: []
 };
 AppMenu.propTypes = {
+  // Support a list of items for services without the app navigator like internal MDM services
   appMenuItems: _propTypes.default.arrayOf(_modulePropTypes.default),
   appNavigator: _propTypes.default.element,
   appNavigatorClassName: _propTypes.default.string

package/lib/components/applicationHeader/AppMenuDropdown.js

@@ -17,6 +17,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
 var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -40,7 +42,7 @@ var ToggleButton = function ToggleButton(props) {
 var DropdownMenu = function DropdownMenu(props) {
   var children = props.children;
 
-  if (!children && !children.length) {
+  if ((0, _isEmpty.default)(children)) {
     return null;
   }
 
@@ -51,13 +53,13 @@ var DropdownMenu = function DropdownMenu(props) {
 };
 
 var AppMenuDropdownOpener = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var showAsOpen = props.showAsOpen,
+  var open = props.open,
       children = props.children,
       onDropdownClick = props.onDropdownClick;
   return /*#__PURE__*/_react.default.createElement("li", {
     ref: ref,
     className: (0, _classnames.default)('dropdown', {
-      open: showAsOpen
+      open: open
     }),
     onClick: onDropdownClick
   }, children);
@@ -81,9 +83,9 @@ var AppMenuDropdown = function AppMenuDropdown(props) {
     return setIsOpen(!isOpen);
   };
 
-  var openWithChildren = children && children.length && isOpen;
+  var openWithChildren = !(0, _isEmpty.default)(children) && isOpen;
   return /*#__PURE__*/_react.default.createElement(AppMenuDropdownOpener, {
-    showAsOpen: openWithChildren,
+    open: openWithChildren,
     onDropdownClick: handleDropdownClick,
     ref: wrapperRef
   }, /*#__PURE__*/_react.default.createElement(ToggleButton, {

package/lib/components/applicationHeader/ApplicationHeader.js

@@ -9,17 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ApplicationHeader = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -27,173 +17,105 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _debounce = _interopRequireDefault(require("lodash/fp/debounce"));
 
+var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _AppMenu = require("./AppMenu");
 
 var _ApplicationActionBar = require("./ApplicationActionBar");
 
+var _MobileSubmoduleNavigation = require("./MobileSubmoduleNavigation");
+
+var _useResizeObserver3 = _interopRequireDefault(require("../../hooks/useResizeObserver"));
+
 var _NavItems = _interopRequireDefault(require("./NavItems"));
 
 var _modulePropTypes = _interopRequireDefault(require("./modulePropTypes"));
 
+var _MobileAppMenu = require("./MobileAppMenu");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var RESIZE_THROTTELING = 10;
-var MOBILE_MAX_WIDTH = 580; //const COLLAPSED_DROPDOWN_WIDTH = 50;
-
-var ApplicationHeader = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(ApplicationHeader, _PureComponent);
-
-  var _super = _createSuper(ApplicationHeader);
-
-  function ApplicationHeader(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ApplicationHeader);
-    _this = _super.call(this, props);
-    _this.state = {
-      containerWidth: 0,
-      brandWidth: 0,
-      renderNavigation: false,
-      isMobile: false
-    };
-    _this.handleWindowResize = _this.handleWindowResize.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
-  }
-
-  (0, _createClass2.default)(ApplicationHeader, [{
-    key: "isMobile",
-    value: function isMobile() {
-      //const node = this.navRef;
-      // FIXME: collision check need to be done after second rendering of NavItems
-
-      /*let isColliding = false;
-       // check for collision of NavItems and ActionBar
-      if (this.refNavItems && this.refActionBar) {
-          const navItemsNode = ReactDOM.findDOMNode(this.refNavItems);
-          const actionBarNode = ReactDOM.findDOMNode(this.refActionBar);
-           // first empty <li> and second would be the collapsed dropdown
-          const navItemsCount = navItemsNode.childElementCount;
-          const collapsedDropdown = navItemsNode.children.item(1);
-          if (navItemsCount === 2 && collapsedDropdown) {
-              //isColliding = navItemsNode.scrollWidth - actionBarNode.scrollWidth < COLLAPSED_DROPDOWN_WIDTH;
-              //console.log("isColliding=" + isColliding + " | clientWidth=" + node.clientWidth);
-               const navItemsRight = navItemsNode.offsetLeft + collapsedDropdown.scrollWidth;
-              const actionBarItemsLeft = actionBarNode.offsetLeft;
-               isColliding = navItemsRight > actionBarItemsLeft;
-              console.log({ isColliding, navItemsRight, actionBarItemsLeft });
-          }
-      }*/
-      return (
-        /*isColliding || */
-        this.getContainerWidth() < MOBILE_MAX_WIDTH && this.props.label
-      );
-    }
-  }, {
-    key: "getContainerWidth",
-    value: function getContainerWidth() {
-      //return this.navRef.clientWidth;
-      return window.innerWidth;
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      this.resizer = (0, _debounce.default)(RESIZE_THROTTELING)(this.handleWindowResize);
-      window.addEventListener('resize', this.resizer);
-      this.setState(function () {
-        return {
-          containerWidth: _this2.getContainerWidth(),
-          renderNavigation: true,
-          isMobile: _this2.isMobile()
-        };
-      });
-      this.props.onMount();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('resize', this.resizer);
-      this.props.onUnmount();
-    }
-  }, {
-    key: "handleWindowResize",
-    value: function handleWindowResize() {
-      var _this3 = this;
-
-      this.setState(function () {
-        return {
-          renderNavigation: true,
-          containerWidth: _this3.getContainerWidth(),
-          isMobile: _this3.isMobile()
-        };
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-
-      var _this$props = this.props,
-          homeRoute = _this$props.homeRoute,
-          showHomeIcon = _this$props.showHomeIcon,
-          label = _this$props.label,
-          className = _this$props.className,
-          appNavigator = _this$props.appNavigator,
-          appNavigatorClassName = _this$props.appNavigatorClassName,
-          appMenuItems = _this$props.appMenuItems,
-          navItems = _this$props.navItems,
-          actionBarItems = _this$props.actionBarItems;
-      var classNames = (0, _classnames.default)('ApplicationHeader', 'navbar navbar-default', 'user-select-none', this.state.isMobile && 'mobile', className && className);
-
-      var renderNavItems = /*#__PURE__*/_react.default.createElement(_NavItems.default, {
-        key: "NavItems",
-        navItems: navItems,
-        isMobile: this.state.isMobile,
-        containerWidth: this.state.containerWidth,
-        actionBarItems: this.state.isMobile && actionBarItems,
-        ref: function ref(node) {
-          return _this4.refNavItems = node;
-        }
-      });
-
-      var renderActionItems = !this.state.isMobile && /*#__PURE__*/_react.default.createElement(_ApplicationActionBar.ApplicationActionBar, {
-        nodeRef: function nodeRef(node) {
-          return _this4.refActionBar = node;
-        },
-        items: actionBarItems
-      });
-
-      return /*#__PURE__*/_react.default.createElement("nav", {
-        className: classNames,
-        ref: function ref(node) {
-          return _this4.navRef = node;
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "navbar-header"
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "navbar-brand ".concat(showHomeIcon ? 'home-icon' : '')
-      }, homeRoute)), label && /*#__PURE__*/_react.default.createElement(_AppMenu.AppMenu, {
-        label: label,
-        key: "AppMenu",
-        appMenuItems: appMenuItems,
-        appNavigator: appNavigator,
-        appNavigatorClassName: appNavigatorClassName
-      }), navItems && renderNavItems, renderActionItems);
-    }
-  }]);
-  return ApplicationHeader;
-}(_react.PureComponent);
+var MOBILE_MAX_WIDTH = 580;
+
+var ApplicationHeader = function ApplicationHeader(props) {
+  var homeRoute = props.homeRoute,
+      showHomeIcon = props.showHomeIcon,
+      label = props.label,
+      className = props.className,
+      appNavigator = props.appNavigator,
+      appNavigatorClassName = props.appNavigatorClassName,
+      appMenuItems = props.appMenuItems,
+      navItems = props.navItems,
+      actionBarItems = props.actionBarItems;
+  var actionBarRef = (0, _react.useRef)();
+
+  var _useResizeObserver = (0, _useResizeObserver3.default)(),
+      _useResizeObserver2 = (0, _slicedToArray2.default)(_useResizeObserver, 2),
+      navRef = _useResizeObserver2[0],
+      contentRect = _useResizeObserver2[1].contentRect;
+
+  var getContentRect = (0, _react.useCallback)(function (key) {
+    return contentRect && Math.round(contentRect[key]);
+  }, [contentRect]);
+  var containerWidth = getContentRect('width') || 0;
+  var isMobileWidth = containerWidth <= MOBILE_MAX_WIDTH;
+  var hasActionBarItems = !(0, _isEmpty.default)(actionBarItems);
+  var classNames = (0, _classnames.default)('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
+  return /*#__PURE__*/_react.default.createElement("nav", {
+    className: classNames,
+    ref: navRef
+  }, isMobileWidth && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MobileAppMenu.MobileAppMenu, {
+    showHomeIcon: showHomeIcon,
+    homeRoute: homeRoute,
+    appMenuItems: appMenuItems,
+    appNavigator: appNavigator
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex-1-1-0 display-flex gap-10"
+  }, /*#__PURE__*/_react.default.createElement(_MobileSubmoduleNavigation.MobileSubmoduleNavigation, {
+    className: "flex-1-1",
+    label: label,
+    navItems: navItems,
+    actionBarItems: actionBarItems
+  }), hasActionBarItems && /*#__PURE__*/_react.default.createElement(Divider, null), /*#__PURE__*/_react.default.createElement(_ApplicationActionBar.ApplicationActionBar, {
+    className: "mobile",
+    items: actionBarItems
+  }))), !isMobileWidth && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "navbar-header"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "navbar-brand ".concat(showHomeIcon ? 'home-icon' : '')
+  }, homeRoute)), label && /*#__PURE__*/_react.default.createElement(_AppMenu.AppMenu, {
+    label: label,
+    key: "AppMenu",
+    appMenuItems: appMenuItems,
+    appNavigator: appNavigator,
+    appNavigatorClassName: appNavigatorClassName
+  }), (0, _isEmpty.default)(navItems) && /*#__PURE__*/_react.default.createElement("ul", {
+    className: "SubmoduleNavigation nav"
+  }), !(0, _isEmpty.default)(navItems) && /*#__PURE__*/_react.default.createElement(_NavItems.default, {
+    key: "NavItems",
+    navItems: navItems,
+    containerWidth: containerWidth,
+    actionBarItems: actionBarItems
+  }), /*#__PURE__*/_react.default.createElement(_ApplicationActionBar.ApplicationActionBar, {
+    nodeRef: actionBarRef,
+    items: actionBarItems
+  })));
+};
 
 exports.ApplicationHeader = ApplicationHeader;
+
+var Divider = function Divider() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "divider display-flex align-items-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "width-3 height-20 bg-lighter"
+  }));
+};
+
 var _default = ApplicationHeader;
 exports.default = _default;
 ApplicationHeader.defaultProps = {

package/lib/components/applicationHeader/MobileAppMenu.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MobileAppMenu = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
+
+var _MobileHeaderModal = require("./MobileHeaderModal");
+
+var _modulePropTypes = _interopRequireDefault(require("./modulePropTypes"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var MobileAppMenu = function MobileAppMenu(props) {
+  var appMenuItems = props.appMenuItems,
+      appNavigator = props.appNavigator,
+      showHomeIcon = props.showHomeIcon,
+      homeRoute = props.homeRoute;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isShown = _useState2[0],
+      setIsShown = _useState2[1];
+
+  var handleToggleNavigation = function handleToggleNavigation() {
+    return setIsShown(!isShown);
+  };
+
+  var hasAppContent = !(0, _isNil.default)(appMenuItems) || !(0, _isNil.default)(appNavigator);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "navbar-header min-width-50 padding-5 overflow-hidden position-relative",
+    onClick: handleToggleNavigation
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "navbar-brand height-40 width-40 ".concat(showHomeIcon ? 'home-icon' : '')
+  }, !hasAppContent && homeRoute), hasAppContent && /*#__PURE__*/_react.default.createElement("div", {
+    className: "position-absolute right-2 bottom-0 text-color-white rotate-45"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph rioglyph-triangle-right"
+  }))), appNavigator && /*#__PURE__*/_react.default.createElement(_MobileHeaderModal.MobileHeaderModal, {
+    show: isShown,
+    modalClassName: "padding-top-25",
+    onClose: handleToggleNavigation
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "width-100pct height-100pct"
+  }, appNavigator)), appMenuItems && /*#__PURE__*/_react.default.createElement(_MobileHeaderModal.MobileHeaderModal, {
+    show: isShown,
+    modalClassName: "padding-15",
+    onClose: handleToggleNavigation
+  }, appMenuItems.map(function (module) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      role: "presentation",
+      key: "link-icon-".concat(module.key)
+    }, module.route);
+  })));
+};
+
+exports.MobileAppMenu = MobileAppMenu;
+MobileAppMenu.propTypes = {
+  homeRoute: _propTypes.default.node,
+  showHomeIcon: _propTypes.default.bool,
+  appMenuItems: _propTypes.default.arrayOf(_modulePropTypes.default),
+  appNavigator: _propTypes.default.element
+};

package/lib/components/applicationHeader/MobileHeaderModal.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MobileHeaderModal = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _framerMotion = require("framer-motion");
+
+var _portalRoot = require("../../utils/portalRoot");
+
+var OFFSET_POSITION = -1000;
+
+var MobileHeaderModal = function MobileHeaderModal(props) {
+  var show = props.show,
+      showClose = props.showClose,
+      modalClassName = props.modalClassName,
+      className = props.className,
+      onClose = props.onClose,
+      children = props.children;
+  var wrapperClasses = (0, _classnames.default)('MobileHeaderModal', 'position-fixed left-0 right-0 bottom-0', 'z-index-max', className);
+  var modalClasses = (0, _classnames.default)('display-flex flex-column justify-content-center', 'margin-15', 'text-center', 'rounded', 'bg-white', 'shadow-hard', 'overflow-auto', modalClassName);
+  var modalRoot = (0, _portalRoot.getOrCreatePortalRoot)();
+  var pageHeight = window.innerHeight - 30;
+  var offset = OFFSET_POSITION - window.innerHeight;
+  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, show && /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+    className: wrapperClasses,
+    initial: {
+      opacity: 0,
+      top: offset
+    },
+    animate: {
+      opacity: 1,
+      y: 0,
+      top: 0
+    },
+    exit: {
+      opacity: 0,
+      transition: {
+        duration: 0.3
+      },
+      top: offset
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: modalClasses,
+    style: {
+      height: "".concat(pageHeight, "px")
+    }
+  }, children), showClose && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'position-absolute top-15 right-15 margin-top-15 margin-right-15 ' + 'text-size-20 text-color-dark',
+    onClick: onClose
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph rioglyph-remove"
+  })))), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, show && /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+    className: "bottom-sheet-backdrop",
+    initial: {
+      opacity: 0
+    },
+    animate: {
+      opacity: 0.5
+    },
+    exit: {
+      opacity: 0
+    }
+  }))), modalRoot);
+};
+
+exports.MobileHeaderModal = MobileHeaderModal;
+MobileHeaderModal.defaultProps = {
+  show: false,
+  showClose: true,
+  onClose: function onClose() {}
+};
+MobileHeaderModal.propTypes = {
+  show: _propTypes.default.bool,
+  showClose: _propTypes.default.bool,
+  modalClassName: _propTypes.default.string,
+  onClose: _propTypes.default.func,
+  className: _propTypes.default.string
+};

package/lib/components/applicationHeader/MobileSubmoduleNavigation.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MobileSubmoduleNavigation = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
+var _modulePropTypes = _interopRequireDefault(require("./modulePropTypes"));
+
+var _MobileHeaderModal = require("./MobileHeaderModal");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var MobileSubmoduleNavigation = function MobileSubmoduleNavigation(props) {
+  var navItems = props.navItems,
+      label = props.label,
+      className = props.className;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isShown = _useState2[0],
+      setIsShown = _useState2[1];
+
+  var handleToggleNavigation = function handleToggleNavigation() {
+    return setIsShown(!isShown);
+  };
+
+  var hasNavItems = !(0, _isEmpty.default)(navItems);
+  var classes = (0, _classnames.default)('MobileSubmoduleNavigation', 'display-flex gap-10 align-items-center', 'padding-x-10', 'cursor-pointer', 'ellipsis-1', className);
+  var labelClasses = (0, _classnames.default)(hasNavItems ? 'text-size-12' : 'text-size-14', 'text-color-dark line-height-14 width-100pct');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes,
+    onClick: handleToggleNavigation
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex-1-1 display-flex flex-column align-items-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: labelClasses
+  }, label), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-medium width-100pct"
+  }, navItems.map(function (navItem) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: navItem.key
+    }, /*#__PURE__*/_react.default.cloneElement(navItem.route, {
+      className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',
+      onClick: function onClick(event) {
+        return event.preventDefault();
+      }
+    }));
+  }))), hasNavItems && /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-size-16 text-color-dark"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph rioglyph-chevron-down"
+  })), hasNavItems && /*#__PURE__*/_react.default.createElement(_MobileHeaderModal.MobileHeaderModal, {
+    show: isShown
+  }, navItems.map(function (navItem) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: navItem.key,
+      className: "margin-y-15 font-size-20"
+    }, /*#__PURE__*/_react.default.cloneElement(navItem.route, {
+      className: 'text-size-20 text-color-darker'
+    }));
+  })));
+};
+
+exports.MobileSubmoduleNavigation = MobileSubmoduleNavigation;
+MobileSubmoduleNavigation.defaultProps = {
+  navItems: []
+};
+MobileSubmoduleNavigation.propTypes = {
+  label: _propTypes.default.node,
+  navItems: _propTypes.default.arrayOf(_modulePropTypes.default),
+  className: _propTypes.default.string
+};