asab_webui_shell 25.1.1

package/dist/containers/Application.scss

@@ -0,0 +1,104 @@
+#app {
+	height: 100vh;
+	overflow: hidden; /* This disable visible scroll of the whole app container for some browsers (Chrome, etc.) - Dont remove it unless handled different way */
+
+	display: grid; 
+	grid-template-columns: 150px 1fr; 
+	grid-template-rows: 65px 1fr; 
+	grid-column-gap: 0px;
+	grid-row-gap: 0px;
+
+	transition: all 0.2s linear; // This is speed of sidebar collapsing
+
+	> #app-brandimage {
+		grid-area: 1 / 1 / 2 / 2;
+	}
+
+	> #app-header {
+		grid-area: 1 / 2 / 2 / 4;
+	}
+
+	> #app-sidebar {
+		grid-area: 2 / 1 / 3 / 2;
+	} 
+
+	> #app-main {
+		grid-area: 2 / 2 / 4 / 3;
+		overflow: auto;
+	}
+
+	> #app-sidepanel {
+		grid-area: 2/ 3 / 4 / 4;
+	}
+
+	#app-networking-indicator {
+		position: fixed;
+		z-index: 2000;
+
+		width: 100%;
+		height: 7px;
+		transition: all 0.1s linear;
+
+		opacity: 100%;
+
+		&.transparent {
+			opacity: 0%;
+		}
+	}
+}
+
+body {
+	&.fullscreen {
+		#app-header > ul > li:not(.fullscreen-visible) {
+			display: none;
+		}
+
+		#app-sidebar {
+			opacity: 0;
+			transform: translateX(-100%);
+		}
+
+		#app-main {
+			grid-area: 2/1/4/4 !important;
+		}
+	}
+
+	#app-sidebar {
+		transition: opacity 0.5s ease, transform 0.5s ease;
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+// This is for printing
+
+@media print {
+
+#app {
+	grid-template-columns: 0px 1fr; 
+	grid-template-rows: 0px 1fr; 
+	grid-column-gap: 0px;
+	grid-row-gap: 0px;
+
+	// No brand image when printing
+	> #app-brandimage {
+		display: none;
+	}
+
+	// No header when printing
+	> #app-header {
+		display: none;
+	}
+
+	// No sidebar when printing
+	> #app-sidebar {
+		display: none;
+	} 
+
+	> #app-main {
+		overflow-y: visible; // We want the full content to be displayed
+	}
+
+}
+
+}

package/dist/containers/AttentionRequired/reducer.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = attentionRequiredReducer;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _actions = require("../../actions");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var initialState = {
+  beacon: {}
+};
+
+// Reducer for attention required, returning beacon
+function attentionRequiredReducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case _actions.SET_ATTENTION_REQUIRED_BEACON:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          beacon: action.beacon
+        });
+      }
+    default:
+      return state;
+  }
+}

package/dist/containers/FullscreenMode/reducer.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = fullscreenModeReducer;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _actions = require("../../actions");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var initialState = {
+  status: 'off'
+};
+function fullscreenModeReducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case _actions.SET_FULLSCREEN_MODE:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          status: action.status
+        });
+      }
+    default:
+      return state;
+  }
+}

package/dist/containers/Header/ApplicationScreenTitle/ApplicationScreenTitle.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRedux = require("react-redux");
+var _reactI18next = require("react-i18next");
+require("./ApplicationScreenTitle.scss");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var ApplicationScreenTitle = function ApplicationScreenTitle(props) {
+  var _props$routes;
+  var subtitle = (0, _reactRedux.useSelector)(function (state) {
+    var _state$header;
+    return (_state$header = state.header) === null || _state$header === void 0 ? void 0 : _state$header.subtitle;
+  });
+  var title = (0, _reactRedux.useSelector)(function (state) {
+    var _state$config;
+    return (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.title;
+  });
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var route = (_props$routes = props.routes) === null || _props$routes === void 0 ? void 0 : _props$routes[0];
+  var routeName = (0, _react.useMemo)(function () {
+    if (route && route.name) {
+      return route.name;
+    } else {
+      return title;
+    }
+  }, [route]);
+  (0, _react.useEffect)(function () {
+    document.title = title && routeName ? "".concat(title, " | ").concat(routeName) : title;
+  }, [routeName, t]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "application-screen-title text-primary"
+  }, /*#__PURE__*/_react["default"].createElement("h4", {
+    className: "m-0"
+  }, t("ApplicationScreenTitle|".concat(routeName))), subtitle && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "px-2 subtitle-separator"
+  }, "|"), /*#__PURE__*/_react["default"].createElement("h5", {
+    className: "m-0"
+  }, subtitle)));
+};
+var _default = exports["default"] = ApplicationScreenTitle;

package/dist/containers/Header/ApplicationScreenTitle/ApplicationScreenTitle.scss

@@ -0,0 +1,8 @@
+.application-screen-title {
+	display: flex;
+	align-items: center;
+}
+
+.subtitle-separator {
+	font-size: 16px;
+}

package/dist/containers/Header/ApplicationScreenTitle/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+var _reactRouterDom = require("react-router-dom");
+var _ApplicationScreenTitle = _interopRequireDefault(require("./ApplicationScreenTitle"));
+var ApplicationTitleRouter = function ApplicationTitleRouter(props) {
+  var routes = (0, _reactRedux.useSelector)(function (state) {
+    var _state$router;
+    return (_state$router = state.router) === null || _state$router === void 0 ? void 0 : _state$router.routes;
+  });
+  var filteredRoutes = filterRoutesByMatch(routes);
+  return /*#__PURE__*/_react["default"].createElement(_ApplicationScreenTitle["default"], {
+    app: props.app,
+    routes: filteredRoutes
+  });
+};
+var _default = exports["default"] = ApplicationTitleRouter;
+function filterRoutesByMatch(routes) {
+  return routes.filter(function (route) {
+    var match = (0, _reactRouterDom.useMatch)({
+      path: "".concat(route.path)
+    });
+    return match;
+  });
+}

package/dist/containers/Header/Help/HelpButton.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = HelpButton;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactRedux = require("react-redux");
+var _reactstrap = require("reactstrap");
+require("./HelpButton.scss");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function HelpButton() {
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    modal = _useState2[0],
+    setModal = _useState2[1];
+  var path = (0, _reactRedux.useSelector)(function (state) {
+    return state === null || state === void 0 ? void 0 : state.header.helpPath;
+  });
+  if (path == undefined) return null;
+  var toggle = function toggle() {
+    return setModal(!modal);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactstrap.NavLink, {
+    className: "help-nav-link",
+    onClick: toggle,
+    title: t("HelpButton|Show help info")
+  }, t("HelpButton|Help")), /*#__PURE__*/_react["default"].createElement(_reactstrap.Modal, {
+    isOpen: modal,
+    toggle: toggle,
+    className: "help-modal-dialog"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Card, {
+    className: "help-card"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.CardHeader, {
+    className: "card-header-flex"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex-fill"
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "bi bi-question-circle pe-2"
+  }), t("HelpButton|Help"))), /*#__PURE__*/_react["default"].createElement(_reactstrap.Button, {
+    outline: true,
+    type: "button",
+    onClick: toggle,
+    color: "primary"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "bi bi-x-lg"
+  }))), /*#__PURE__*/_react["default"].createElement(_reactstrap.CardBody, null, /*#__PURE__*/_react["default"].createElement("iframe", {
+    className: "help-iframe",
+    src: path
+  })))));
+}

package/dist/containers/Header/Help/HelpButton.scss

@@ -0,0 +1,15 @@
+.help-modal-dialog {
+
+	max-width: 960px;
+
+	.help-iframe {
+		width: 100%;
+		height: 80vh;
+		overflow: hidden;
+		border: 0;
+	}
+}
+
+.help-nav-link {
+	cursor: pointer;
+}

package/dist/containers/Header/Help/HelpService.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _asab_webui_components = require("asab_webui_components");
+var _HelpButton = _interopRequireDefault(require("./HelpButton"));
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var HelpService = exports["default"] = /*#__PURE__*/function (_Service) {
+  function HelpService(app) {
+    var serviceName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "HelpService";
+    (0, _classCallCheck2["default"])(this, HelpService);
+    return _callSuper(this, HelpService, [app, serviceName]);
+  }
+  (0, _inherits2["default"])(HelpService, _Service);
+  return (0, _createClass2["default"])(HelpService, [{
+    key: "initialize",
+    value: function initialize() {
+      var headerService = this.App.locateService("HeaderService");
+      headerService.addComponent({
+        component: _HelpButton["default"],
+        order: 300
+      });
+    }
+  }]);
+}(_asab_webui_components.Service);

package/dist/containers/Header/Preview/PreviewFlag.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PreviewFlag;
+var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactRedux = require("react-redux");
+var _reactstrap = require("reactstrap");
+function PreviewFlag() {
+  var _name;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var name = (0, _reactRedux.useSelector)(function (state) {
+    var _state$header;
+    return state === null || state === void 0 || (_state$header = state.header) === null || _state$header === void 0 ? void 0 : _state$header.flag;
+  });
+  var lowercasedName = (_name = name) === null || _name === void 0 ? void 0 : _name.toLowerCase();
+  if (lowercasedName === "preview") {
+    name = t("General|Feature preview");
+  } else if (lowercasedName === "alpha") {
+    name = t("Alpha");
+  } else if (lowercasedName === "beta") {
+    name = t("Beta");
+  } else {
+    return null;
+  }
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.Badge, {
+    className: "mx-2",
+    color: "primary"
+  }, name);
+}

package/dist/containers/Header/Preview/PreviewService.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _asab_webui_components = require("asab_webui_components");
+var _PreviewFlag = _interopRequireDefault(require("./PreviewFlag"));
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var PreviewService = exports["default"] = /*#__PURE__*/function (_Service) {
+  function PreviewService(app) {
+    var serviceName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "PreviewService";
+    (0, _classCallCheck2["default"])(this, PreviewService);
+    return _callSuper(this, PreviewService, [app, serviceName]);
+  }
+  (0, _inherits2["default"])(PreviewService, _Service);
+  return (0, _createClass2["default"])(PreviewService, [{
+    key: "initialize",
+    value: function initialize() {
+      var headerService = this.App.locateService("HeaderService");
+      headerService.addComponent({
+        component: _PreviewFlag["default"],
+        order: 100
+      });
+    }
+  }]);
+}(_asab_webui_components.Service);

package/dist/containers/Header/header.scss

@@ -0,0 +1,24 @@
+#app-header {
+
+	.nav-link, .btn {
+		// Font is larger in header items
+		font-size: 16px;
+	}
+}
+
+[data-bs-theme=light] {
+	#app-header .nav-link:hover {
+		filter: brightness(0.75);
+	}
+}
+
+[data-bs-theme=dark] {
+	#app-header {
+		.nav-link:active, .nav-link:focus {
+			color: var(--bs-link-color)
+		}
+		.nav-link:hover {
+			color: var(--bs-link-hover-color);
+		}
+	}
+}

package/dist/containers/Header/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Header;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+var _reactRedux = require("react-redux");
+var _ApplicationScreenTitle = _interopRequireDefault(require("./ApplicationScreenTitle"));
+require("./header.scss");
+function Header(props) {
+  var headerNavItems = (0, _reactRedux.useSelector)(function (state) {
+    var _state$header;
+    return (_state$header = state.header) === null || _state$header === void 0 ? void 0 : _state$header.headerNavItems;
+  });
+  return /*#__PURE__*/_react["default"].createElement("header", {
+    id: "app-header"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Nav, {
+    className: "d-flex flex-row nav w-100 h-100 align-items-center"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.NavItem, {
+    className: "mx-1 fullscreen-visible"
+  }, /*#__PURE__*/_react["default"].createElement(_ApplicationScreenTitle["default"], {
+    app: props.app
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex-fill"
+  }, "\xA0"), headerNavItems.map(function (item, idx) {
+    return /*#__PURE__*/_react["default"].createElement(_reactstrap.NavItem, {
+      className: "mx-1 ".concat(item.fullscreenVisible == true ? 'fullscreen-visible' : ''),
+      key: idx
+    }, /*#__PURE__*/_react["default"].createElement(item.component, (0, _extends2["default"])({
+      key: item
+    }, item.componentProps, {
+      app: props.app
+    })));
+  })));
+}

package/dist/containers/Header/reducer.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _actions = require("../../actions");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var initialState = {
+  helpPath: "https://docs.teskalabs.com/logman.io/user/",
+  subtitle: undefined,
+  flag: undefined,
+  headerNavItems: []
+};
+var _default = exports["default"] = function _default() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case _actions.SET_HELP_PATH:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        helpPath: action.helpPath
+      });
+    case _actions.SET_SUBTITLE:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        subtitle: action.subtitle
+      });
+    case _actions.SET_FLAG:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        flag: action.flag
+      });
+    case _actions.SET_HEADER_NAVIGATION_ITEMS:
+      // Sort the navigation items
+      action.headerNavItems.sort(function (a, b) {
+        if (a.order == undefined && b.order == undefined) {
+          return 0; // No order specified for both, keep order unchanged
+        } else if (a.order == undefined) {
+          return 1; // Move items without order to the end
+        } else if (b.order == undefined) {
+          return -1; // Move items without order to the end
+        } else {
+          return a.order - b.order; // Sort by order
+        }
+      });
+      return _objectSpread(_objectSpread({}, state), {}, {
+        headerNavItems: action.headerNavItems
+      });
+    default:
+      return state;
+  }
+};

package/dist/containers/Navigation/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireWildcard(require("react"));
+var _actions = require("../../actions");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var Navigation = exports["default"] = /*#__PURE__*/function (_Component) {
+  function Navigation(app) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Navigation);
+    _this = _callSuper(this, Navigation, [app]);
+    _this.App = app;
+    _this.Items = [];
+    return _this;
+  }
+  (0, _inherits2["default"])(Navigation, _Component);
+  return (0, _createClass2["default"])(Navigation, [{
+    key: "addItem",
+    value: function addItem(item) {
+      /* Example item:
+      	{
+      		path: '/some/path',	// Url path
+      		end: true,		// Whether path must be matched exactly
+      		name: 'Some Name',	// Route name
+      		component: ReactComponent // Component to be rendered
+      	}
+      */
+
+      // Find an existing item with the same name
+      var existingItem = this.Items.find(function (existing) {
+        return existing.name === item.name;
+      });
+      if (existingItem) {
+        // If found, merge the children (concatenate arrays while avoiding duplicates based on a name)
+        var existingChildrenNames = new Set(existingItem.children.map(function (child) {
+          return child.name;
+        }));
+        item.children.forEach(function (child) {
+          if (!existingChildrenNames.has(child.name)) {
+            existingItem.children.push(child);
+          }
+        });
+      } else {
+        // If no existing item, push the new item
+        this.Items.push(item);
+      }
+      this.App.Store.dispatch({
+        type: _actions.SET_NAVIGATION_ITEMS,
+        navItems: this.Items
+      });
+    }
+  }]);
+}(_react.Component);