asab_webui_shell 25.1.1

package/dist/containers/Sidebar/SidebarItem.js

@@ -0,0 +1,209 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarItem = exports.SidebarCollapsibleItem = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouter = require("react-router");
+var _reactRouterDom = require("react-router-dom");
+var _reactI18next = require("react-i18next");
+var _reactRedux = require("react-redux");
+var _reactstrap = require("reactstrap");
+var _asab_webui_components = require("asab_webui_components");
+var _SidebarIcon = _interopRequireDefault(require("./SidebarIcon"));
+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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var SidebarItem = exports.SidebarItem = function SidebarItem(_ref) {
+  var _item$name;
+  var item = _ref.item,
+    disabled = _ref.disabled,
+    isOpen = _ref.isOpen,
+    setOpen = _ref.setOpen,
+    isSmallResolution = _ref.isSmallResolution,
+    _ref$beacon = _ref.beacon,
+    beacon = _ref$beacon === void 0 ? undefined : _ref$beacon;
+  var location = (0, _reactRouter.useLocation)();
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var isSidebarCollapsed = (0, _reactRedux.useSelector)(function (state) {
+    var _state$sidebar;
+    return (_state$sidebar = state.sidebar) === null || _state$sidebar === void 0 ? void 0 : _state$sidebar.isSidebarCollapsed;
+  });
+  var attentionRequired = (0, _reactRedux.useSelector)(function (state) {
+    var _state$attentionrequi;
+    return (_state$attentionrequi = state.attentionrequired) === null || _state$attentionrequi === void 0 ? void 0 : _state$attentionrequi.beacon;
+  });
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isActive = _useState2[0],
+    setActive = _useState2[1];
+  var lowercasedItemName = item === null || item === void 0 || (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.toLowerCase();
+  // Attention requred flag
+  var itemBeacon = beacon ? beacon["beacon.".concat(lowercasedItemName)] : attentionRequired["beacon.".concat(lowercasedItemName)];
+  (0, _react.useEffect)(function () {
+    if (isOpen && !isActive) {
+      setOpen(false);
+    }
+    setActive(item.url && (location.pathname === item.url || location.pathname.startsWith(item.url + '/')) ? true : false);
+  }, [location]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "nav-item"
+  }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
+    disabled: disabled,
+    to: item.url,
+    title: t("Sidebar|".concat(item.name)),
+    className: "nav-link" + (isActive ? " active" : "")
+  }, !isSidebarCollapsed || isSmallResolution ?
+  /*#__PURE__*/
+  //hide item.name if sidebar is collapsed
+  _react["default"].createElement("div", {
+    className: "d-flex align-items-center"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sidebar-item-name d-flex align-items-center flex-grow-1"
+  }, /*#__PURE__*/_react["default"].createElement(_SidebarIcon["default"], {
+    icon: item.icon,
+    className: "pe-2"
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sidebar-item-name"
+  }, t("Sidebar|".concat(item.name)))), itemBeacon && /*#__PURE__*/_react["default"].createElement(_asab_webui_components.AttentionBadge, {
+    className: "sidebar-badge-collapsed",
+    content: itemBeacon
+  })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SidebarIcon["default"], {
+    icon: item.icon,
+    className: "pe-2"
+  }), itemBeacon && /*#__PURE__*/_react["default"].createElement(_asab_webui_components.AttentionBadge, {
+    className: "sidebar-badge-collapsed",
+    content: itemBeacon
+  }))));
+};
+var SidebarCollapsibleItem = exports.SidebarCollapsibleItem = function SidebarCollapsibleItem(_ref2) {
+  var item = _ref2.item,
+    disabled = _ref2.disabled,
+    isSmallResolution = _ref2.isSmallResolution;
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isOpen = _useState4[0],
+    setOpen = _useState4[1];
+  var location = (0, _reactRouter.useLocation)();
+  var _useTranslation2 = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation2.t;
+  var isSidebarCollapsed = (0, _reactRedux.useSelector)(function (state) {
+    var _state$sidebar2;
+    return (_state$sidebar2 = state.sidebar) === null || _state$sidebar2 === void 0 ? void 0 : _state$sidebar2.isSidebarCollapsed;
+  });
+  var attentionRequired = (0, _reactRedux.useSelector)(function (state) {
+    var _state$attentionrequi2;
+    return (_state$attentionrequi2 = state.attentionrequired) === null || _state$attentionrequi2 === void 0 ? void 0 : _state$attentionrequi2.beacon;
+  });
+  var lowercasedItemName = item.name.toLowerCase();
+
+  // Attention required flag
+  var itemsBeacon = parentBeacon(attentionRequired, "beacon.".concat(lowercasedItemName), lowercasedItemName);
+  // Summarize parent beacon count based on children
+  var beaconCount = itemsBeacon && Object.keys(itemsBeacon).length > 0 ? Object.values(itemsBeacon).reduce(function (sum, current) {
+    return sum + (current.count || 0); // Ensure we sum only valid count values
+  }, 0) : 0;
+
+  // Should collapsed item uncollapse
+  (0, _react.useEffect)(function () {
+    if (item.children && !isOpen) {
+      var _iterator = _createForOfIteratorHelper(item.children),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var child = _step.value;
+          if (location.pathname.includes(child.url)) {
+            setOpen(true);
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  }, [isOpen]);
+  var onClickOpen = function onClickOpen(e) {
+    e.preventDefault();
+    setOpen(!isOpen);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "nav-item sidebar-collapsible" + (isOpen ? " open" : "")
+  }, /*#__PURE__*/_react["default"].createElement("a", {
+    onClick: onClickOpen,
+    title: t("Sidebar|".concat(item.name)),
+    className: "d-flex align-items-center nav-link" + (isOpen ? " open" : ""),
+    href: "#"
+  }, !isSidebarCollapsed || isSmallResolution ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "d-flex flex-column justify-content-center align-items-center pe-2"
+  }, /*#__PURE__*/_react["default"].createElement(_SidebarIcon["default"], {
+    icon: item.icon
+  }), /*#__PURE__*/_react["default"].createElement("i", {
+    className: "bi bi-chevron-down"
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sidebar-item-name"
+  }, t("Sidebar|".concat(item.name))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ms-auto"
+  }, " ", beaconCount > 0 && /*#__PURE__*/_react["default"].createElement(_asab_webui_components.AttentionBadge, {
+    className: "sidebar-badge-collapsed",
+    content: {
+      count: beaconCount
+    }
+  }))) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: "d-flex flex-column justify-content-center align-items-center"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "d-flex flex-column justify-content-center align-items-center"
+  }, /*#__PURE__*/_react["default"].createElement(_SidebarIcon["default"], {
+    icon: item.icon
+  }), /*#__PURE__*/_react["default"].createElement("i", {
+    className: "bi bi-chevron-down"
+  }), " "), beaconCount > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mt-1 w-100 justify-content-center d-flex"
+  }, /*#__PURE__*/_react["default"].createElement(_asab_webui_components.AttentionBadge, {
+    className: "sidebar-badge-collapsed",
+    content: {
+      count: beaconCount
+    }
+  }))))), /*#__PURE__*/_react["default"].createElement(_reactstrap.Collapse, {
+    isOpen: isOpen,
+    className: "sidebar-collapse"
+  }, item.children.map(function (child, idx) {
+    var _child$name;
+    return /*#__PURE__*/_react["default"].createElement(SidebarItem, {
+      key: idx,
+      item: child,
+      disabled: disabled,
+      isOpen: isOpen,
+      setOpen: setOpen,
+      isSmallResolution: isSmallResolution,
+      beacon: itemsBeacon["beacon.".concat(child === null || child === void 0 || (_child$name = child.name) === null || _child$name === void 0 ? void 0 : _child$name.toLowerCase())] && childBeacon(itemsBeacon, "beacon.".concat(child.name.toLowerCase()))
+    });
+  })));
+};
+
+// Filter beacon for the parent
+var parentBeacon = function parentBeacon(data, prefix, itemName) {
+  if (!data) {
+    return {};
+  }
+  return Object.keys(data).filter(function (key) {
+    return key.startsWith(prefix);
+  }).reduce(function (result, key) {
+    result[key.replace(".".concat(itemName), '')] = data[key];
+    return result;
+  }, {});
+};
+
+// Filter beacon for the children
+var childBeacon = function childBeacon(data, key) {
+  return data[key] ? (0, _defineProperty2["default"])({}, key, data[key]) : {};
+};

package/dist/containers/Sidebar/SidebarItemRenderer.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarItemRenderer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SidebarItem = require("./SidebarItem");
+var SidebarItemRenderer = exports.SidebarItemRenderer = function SidebarItemRenderer(_ref) {
+  var sidebarItems = _ref.sidebarItems,
+    sessionExpired = _ref.sessionExpired,
+    _ref$isSmallResolutio = _ref.isSmallResolution,
+    isSmallResolution = _ref$isSmallResolutio === void 0 ? undefined : _ref$isSmallResolutio;
+  return /*#__PURE__*/_react["default"].createElement("nav", {
+    className: "nav flex-column"
+  }, sidebarItems.map(function (item, idx) {
+    return item.children ? /*#__PURE__*/_react["default"].createElement(_SidebarItem.SidebarCollapsibleItem, {
+      key: idx,
+      item: item,
+      disabled: sessionExpired,
+      isSmallResolution: isSmallResolution
+    }) : /*#__PURE__*/_react["default"].createElement(_SidebarItem.SidebarItem, {
+      key: idx,
+      item: item,
+      disabled: sessionExpired,
+      isSmallResolution: isSmallResolution
+    });
+  }));
+};

package/dist/containers/Sidebar/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Sidebar;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRedux = require("react-redux");
+var _reactstrap = require("reactstrap");
+var _SidebarBottomItem = _interopRequireDefault(require("./SidebarBottomItem"));
+var _actions = require("../../actions");
+var _BrandImage = require("../../components/branding/BrandImage");
+require("./sidebar.scss");
+var _SidebarItemRenderer = require("./SidebarItemRenderer");
+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 Sidebar(props) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isSmallResolution = _useState2[0],
+    setIsSmallResolution = _useState2[1];
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    sidebarBottomBranding = _useState4[0],
+    setSidebarBottomBranding = _useState4[1];
+  var _useState5 = (0, _react.useState)(window.innerWidth),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    windowWidth = _useState6[0],
+    setWindowWidth = _useState6[1];
+  var sidebarItems = (0, _reactRedux.useSelector)(function (state) {
+    var _state$navigation;
+    return (_state$navigation = state.navigation) === null || _state$navigation === void 0 ? void 0 : _state$navigation.navItems;
+  });
+  var sessionExpired = (0, _reactRedux.useSelector)(function (state) {
+    var _state$auth;
+    return (_state$auth = state.auth) === null || _state$auth === void 0 ? void 0 : _state$auth.sessionExpired;
+  });
+  var theme = (0, _reactRedux.useSelector)(function (state) {
+    return state.theme;
+  });
+  var dispatch = (0, _reactRedux.useDispatch)();
+  (0, _react.useEffect)(function () {
+    // Collapse sidebar if innerWidth is smaller or equal to 944px on page initialization
+    if (window.innerWidth <= 944) {
+      dispatch({
+        type: _actions.COLLAPSE_SIDEBAR,
+        isSidebarCollapsed: true
+      });
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    setSidebarBottomBranding((0, _BrandImage.getBrandImage)(props, theme, 'sidebarLogo'));
+  }, [theme]);
+  var toggleSidebarModal = function toggleSidebarModal() {
+    return setIsSmallResolution(!isSmallResolution);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, windowWidth <= 768 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: toggleSidebarModal
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "bi ms-2 bi-list text-primary fs-1"
+  })), /*#__PURE__*/_react["default"].createElement(_reactstrap.Modal, {
+    isOpen: isSmallResolution,
+    toggle: toggleSidebarModal,
+    className: "left"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sidebar-modal"
+  }, /*#__PURE__*/_react["default"].createElement(_SidebarItemRenderer.SidebarItemRenderer, {
+    sidebarItems: sidebarItems,
+    sessionExpired: sessionExpired,
+    isSmallResolution: isSmallResolution
+  })))) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: "h-100",
+    id: "app-sidebar"
+  }, /*#__PURE__*/_react["default"].createElement(_SidebarItemRenderer.SidebarItemRenderer, {
+    sidebarItems: sidebarItems,
+    sessionExpired: sessionExpired
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex-fill"
+  }, "\xA0"), /*#__PURE__*/_react["default"].createElement(_SidebarBottomItem["default"], {
+    sidebarLogo: sidebarBottomBranding,
+    disabled: sessionExpired
+  })));
+}

package/dist/containers/Sidebar/reducer.js

@@ -0,0 +1,35 @@
+"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 = {
+  isSidebarCollapsed: false
+};
+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.COLLAPSE_SIDEBAR:
+      {
+        if (action.isSidebarCollapsed) {
+          document.getElementById('app').classList.add('sidebar-collapsed');
+        } else {
+          document.getElementById('app').classList.remove('sidebar-collapsed');
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isSidebarCollapsed: action.isSidebarCollapsed
+        });
+      }
+    default:
+      {
+        return state;
+      }
+  }
+};

package/dist/containers/Sidebar/sidebar.scss

@@ -0,0 +1,176 @@
+$sidebar-item-border-width: 1px;
+$sidebar-item-spacing: 0.5rem;
+
+$sidebar-transition-timing-function: cubic-bezier(0.6, 0.6, 0, 1);
+
+#app-sidebar {
+	display: flex;
+	flex-direction: column;
+	background-color: var(--bs-body-bg);
+	overflow-y: auto;  // The sidebar is scrollable when it doesn't fit the screen
+	overflow-x: hidden;
+	min-height: 100%;
+	flex-wrap: nowrap;
+
+	& .nav-item {
+		width: 150px;
+
+		transition: width 0.2s $sidebar-transition-timing-function;
+
+		&:not(:last-child) {
+			margin-bottom: $sidebar-item-spacing;
+		}
+	}
+
+	& .nav-link {
+		padding: 0.75rem 0 0.75rem 8px;
+
+		transition: color 0.2s $sidebar-transition-timing-function, background-color 0.2s $sidebar-transition-timing-function;
+
+		&:hover {
+			color: var(--bs-nav-link-hover-color);
+			background-color: var(--bs-element-bg-color);
+
+			transition: color 0.1s $sidebar-transition-timing-function, background-color 0.1s $sidebar-transition-timing-function;
+			cursor: pointer;
+		}
+
+		&.active {
+			color: var(--bs-white);
+			background-color: var(--bs-primary);
+
+			transition: color 0.2s $sidebar-transition-timing-function, background-color 0.2s $sidebar-transition-timing-function;
+		}
+
+		& i {
+			font-size: 22px; // Make the icon a bit larger
+		}
+
+		& .sidebar-item-name {
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			vertical-align: 3px;  // To center the text to a larger icon
+		}
+
+		& .sidebar-badge-collapsed {
+			margin-left: 2px;
+			margin-right: 0.3rem;
+			vertical-align: 3px;  // To center the text to a larger icon
+		}
+	}
+
+	.sidebar-collapsible {
+		transition: transform 0.1s $sidebar-transition-timing-function;
+		&:hover {
+			span .bi-chevron-down {
+				transform: translateY(3px);
+			}
+		}
+
+		&.open {
+			margin-bottom: 0;
+			background-color: rgba(var(--bs-primary-rgb), 0.2);
+		}
+
+		& .bi-chevron-down {
+			margin-top: -1rem; //moving chevron closer to item icon
+			margin-bottom: -1rem;
+		}
+	}
+
+	.sidebar-collapse {
+		&.collapsing,
+		&.collapse.show {
+			background-color: rgba(var(--bs-primary-rgb), 0.1);
+		}
+	}
+
+	#app-sidebar-logo {
+		display: inline-block;
+		width: 124px;
+		height: 50px;
+
+		background-repeat: no-repeat;
+		background-position: 5px;
+		background-position-y: center;
+
+		text-decoration: none;
+
+		transition: background-image 0.2s $sidebar-transition-timing-function;
+	}
+
+	#app-sidebar-collapse {
+		cursor: pointer;
+
+		transition: color 0.2s $sidebar-transition-timing-function, background-color 0.2s $sidebar-transition-timing-function;
+
+		&:hover {
+			color: var(--bs-nav-link-hover-color);
+			transition: color 0.1s $sidebar-transition-timing-function, background-color 0.1s $sidebar-transition-timing-function;
+		}
+	}
+}
+
+.sidebar-modal {
+	& .bi-chevron-down {
+		margin-top: -0.6rem;
+		margin-bottom: 0;
+	}
+}
+
+#app.sidebar-collapsed {
+	grid-template-columns: 40px 1fr;
+
+	transition: all 0.2s linear; // This is speed of sidebar collapsing
+
+	& #app-sidebar {
+		width: 3rem;
+
+		> nav {
+			& .nav-item {
+
+				transition: width 0.2s $sidebar-transition-timing-function;
+
+				& .sidebar-item-name {
+					visibility: hidden;
+
+					transition: visibility 0.2s $sidebar-transition-timing-function;
+				}
+
+				& .sidebar-badge-collapsed {
+					display: block;
+					position: absolute;
+				}		
+			}
+						
+			& .nav-link {
+				text-overflow: unset;
+			}
+		}
+	}
+
+	#app-sidebar-logo {
+		width: 40px;
+		background-size: 28px;
+
+		transition: width 0.2s $sidebar-transition-timing-function;
+	}
+}
+
+#app-brandimage {
+	padding: 5px 0 5px 5px;
+
+	> a {
+		display: block;
+		width: 100%;
+		height: 100%;
+
+		background-repeat: no-repeat;
+		background-position: center;
+
+		text-decoration: none;
+
+		transition: background-image 0.2s $sidebar-transition-timing-function;
+	}
+}

package/dist/containers/Sidepanel/Sidepanel.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Sidepanel;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _asab_webui_components = require("asab_webui_components");
+require("./Sidepanel.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; }
+// Application sidepanel
+function Sidepanel(props) {
+  var _usePubSub = (0, _asab_webui_components.usePubSub)(),
+    publish = _usePubSub.publish,
+    subscribe = _usePubSub.subscribe;
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    sidepanelContent = _useState2[0],
+    setSidepanelContent = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var handleEvent = function handleEvent(message) {
+      if (message.mode === 'close') {
+        setSidepanelContent(undefined);
+      } else {
+        setSidepanelContent(message.mode);
+      }
+    };
+    // Subscription to Application.panel!
+    var subscriptionSidepanel = subscribe('Application.panel!', handleEvent);
+    // Clean up subscription on component unmount
+    return function () {
+      subscriptionSidepanel();
+    };
+  }, []);
+
+  // TODO: think of how to automatically close the sidepanel on screen leave
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.Collapse, {
+    id: "app-sidepanel",
+    isOpen: sidepanelContent != undefined ? true : false,
+    horizontal: true
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Card, {
+    className: "app-sidepanel-card h-100"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.CardBody, {
+    className: "w-100 h-100 app-sidepanel-card-body"
+  }, sidepanelContent), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "app-sidepanel-chevron-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "app-sidepanel-chevron bi bi-chevron-right",
+    onClick: function onClick() {
+      return publish('Application.panel!', {
+        mode: 'close'
+      });
+    }
+  }))));
+}

package/dist/containers/Sidepanel/Sidepanel.scss

@@ -0,0 +1,20 @@
+.app-sidepanel-card {
+	width: 300px;
+}
+
+.app-sidepanel-card-body {
+	overflow-y: auto;
+}
+
+.app-sidepanel-chevron-wrapper {
+	padding: 10px;
+}
+
+.app-sidepanel-chevron {
+	font-size: 21px;
+	color: var(--bs-primary);
+}
+
+.app-sidepanel-chevron:hover {
+	cursor: pointer;
+}

package/dist/containers/Toast/ToastComponent.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToastComponent = ToastComponent;
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+var _actions = require("../../actions");
+// import { timeToString } from 'asab_webui_components';
+
+// Component for displaying Toast messages
+function ToastComponent(_ref) {
+  var app = _ref.app,
+    content = _ref.content,
+    dispatch = _ref.dispatch;
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.Toast, {
+    fade: true,
+    className: "toast d-print-none"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.ToastHeader, {
+    toggle: function toggle() {
+      return dispatch({
+        type: _actions.DEL_TOAST,
+        key: content.key
+      });
+    },
+    className: "toast-header",
+    icon: content !== null && content !== void 0 && content.level ? "".concat(content.level) : 'secondary'
+  }, content !== null && content !== void 0 && content.title ? content.title : ':-('), /*#__PURE__*/_react["default"].createElement(_reactstrap.ToastBody, null, content !== null && content !== void 0 && content.message ? content.message : 'Ooops, mistake is on our side. Message has not been defined!'));
+}