gwchq-textjam 0.1.5 → 0.1.6

package/dist/index.js

@@ -331814,13 +331814,15 @@ var Button = props => {
     text,
     title,
     label,
-    buttonIconPosition = "left"
+    buttonIconPosition = "left",
+    isUser
   } = props;
   var {
     t
   } = useTranslation_useTranslation();
   var buttonClass = classnames_default()("btn", className, {
-    "btn--svg-only": !buttonText
+    "btn--svg-only": !buttonText,
+    "btn--user": isUser
   });
   var onButtonClick = e => {
     if (!confirmText) {
@@ -338372,6 +338374,8 @@ function SvgDownload(props) {
   })));
 }
 /* harmony default export */ const download = (SvgDownload);
+;// ./src/assets/text_jam_logo.svg
+const text_jam_logo_namespaceObject = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU1IiBoZWlnaHQ9IjM2IiB2aWV3Qm94PSIwIDAgMTU1IDM2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHBhdGggZD0iTTEwOC44NzEgNi44NjIwNkgxMTMuODkyVjIxLjE5ODNDMTEzLjg5MiAyMi41MjcgMTEzLjU4NiAyMy43MTI2IDExMi45NjYgMjQuNzU1MUMxMTIuMzQ2IDI1Ljc5NzYgMTExLjQ4NyAyNi42MDg0IDExMC4zODMgMjcuMTgwOEMxMDkuMjc5IDI3Ljc1MzEgMTA4LjA0NiAyOC4wMzkzIDEwNi42OSAyOC4wMzkzQzEwNC40MTQgMjguMDM5MyAxMDIuNjQzIDI3LjQ2NyAxMDEuMzgyIDI2LjMxNTRDMTAwLjEyMiAyNS4xNjM5IDk5LjQ4OCAyMy41NDIyIDk5LjQ4OCAyMS40MzY4SDEwNC41MzdDMTA0LjUzNyAyMi4zOTA3IDEwNC43MDEgMjMuMDg1NyAxMDUuMDM0IDIzLjUxNUMxMDUuMzY4IDIzLjk0NDIgMTA1LjkyIDI0LjE2MjMgMTA2LjY5IDI0LjE2MjNDMTA3LjM5MiAyNC4xNjIzIDEwNy45MjQgMjMuOTAzMyAxMDguMzA1IDIzLjM3ODdDMTA4LjY4NyAyMi44NTQgMTA4Ljg3MSAyMi4xMjQ5IDEwOC44NzEgMjEuMTkxNVY2Ljg2MjA2WiIgZmlsbD0iI0EzMTc0NiIvPg0KPHBhdGggZD0iTTEyNS41OTIgMjcuNzYwNkMxMjUuNDIxIDI3LjQ0NzIgMTI1LjI2NSAyNi45ODM4IDEyNS4xMzUgMjYuMzcwNkMxMjQuMjQzIDI3LjQ4ODEgMTIzLjAwMyAyOC4wNDY4IDEyMS40MDEgMjguMDQ2OEMxMTkuOTM2IDI4LjA0NjggMTE4LjY5NiAyNy42MDM5IDExNy42NjcgMjYuNzE4MUMxMTYuNjM4IDI1LjgzMjMgMTE2LjEzNCAyNC43MjE3IDExNi4xMzQgMjMuMzc5M0MxMTYuMTM0IDIxLjY5NjMgMTE2Ljc1NCAyMC40MjIyIDExOC4wMDEgMTkuNTYzNkMxMTkuMjQ4IDE4LjcwNTEgMTIxLjA1NCAxOC4yNjkgMTIzLjQyNSAxOC4yNjlIMTI0LjkxN1YxNy40NDQ1QzEyNC45MTcgMTYuMDEzNiAxMjQuMjk3IDE1LjI5ODIgMTIzLjA2NCAxNS4yOTgyQzEyMS45MTkgMTUuMjk4MiAxMjEuMzQgMTUuODYzNyAxMjEuMzQgMTcuMDAxNkgxMTYuNTAyQzExNi41MDIgMTUuNTAyNiAxMTcuMTQzIDE0LjI4MjkgMTE4LjQxNyAxMy4zNDk0QzExOS42OTEgMTIuNDE2IDEyMS4zMiAxMS45NDU4IDEyMy4zMDIgMTEuOTQ1OEMxMjUuMjg1IDExLjk0NTggMTI2Ljg0NiAxMi40Mjk2IDEyNy45OTcgMTMuMzk3MUMxMjkuMTQ5IDE0LjM2NDcgMTI5LjczNSAxNS42ODY2IDEyOS43NjIgMTcuMzY5NlYyNC4yNDQ3QzEyOS43ODIgMjUuNjY4OCAxMzAgMjYuNzU5IDEzMC40MjMgMjcuNTE1M1YyNy43NjA2SDEyNS41ODVIMTI1LjU5MlpNMTIyLjU2NiAyNC41OTlDMTIzLjE2NiAyNC41OTkgMTIzLjY3IDI0LjQ2OTUgMTI0LjA2NiAyNC4yMTA2QzEyNC40NjEgMjMuOTUxNyAxMjQuNzQ3IDIzLjY1ODcgMTI0LjkxNyAyMy4zMzg1VjIwLjg1ODJIMTIzLjUxNEMxMjEuODMxIDIwLjg1ODIgMTIwLjk4NiAyMS42MTQ2IDEyMC45ODYgMjMuMTI3MkMxMjAuOTg2IDIzLjU3MDEgMTIxLjEzNiAyMy45MjQ0IDEyMS40MjkgMjQuMTk3QzEyMS43MjIgMjQuNDY5NSAxMjIuMTAzIDI0LjYwNTggMTIyLjU2IDI0LjYwNThMMTIyLjU2NiAyNC41OTlaIiBmaWxsPSIjQTMxNzQ2Ii8+DQo8cGF0aCBkPSJNMTM3LjAxOSAxMi4yMzA4TDEzNy4xNzUgMTQuMDUwMUMxMzguMjcyIDEyLjY0NjQgMTM5Ljc1MSAxMS45Mzc4IDE0MS42MTEgMTEuOTM3OEMxNDMuNTczIDExLjkzNzggMTQ0Ljg5NSAxMi43MTQ2IDE0NS41ODMgMTQuMjc0OUMxNDYuNjMzIDEyLjcxNDYgMTQ4LjE1OSAxMS45Mzc4IDE1MC4xNDkgMTEuOTM3OEMxNTMuMjk3IDExLjkzNzggMTU0LjkxMiAxMy44Mzg5IDE1NSAxNy42NDc4VjI3Ljc1MjZIMTUwLjE0OVYxNy45NDc2QzE1MC4xNDkgMTcuMTUwNCAxNTAuMDEyIDE2LjU3OCAxNDkuNzQ3IDE2LjIxMDFDMTQ5LjQ4MSAxNS44NDIxIDE0OC45OSAxNS42NjQ5IDE0OC4yODIgMTUuNjY0OUMxNDcuMzI4IDE1LjY2NDkgMTQ2LjYxMiAxNi4wODc0IDE0Ni4xNDIgMTYuOTM5MUwxNDYuMTU2IDE3LjEzNjdWMjcuNzM5SDE0MS4zMDRWMTcuOTY4QzE0MS4zMDQgMTcuMTU3MiAxNDEuMTc1IDE2LjU2NDQgMTQwLjkxNiAxNi4yMDMyQzE0MC42NTcgMTUuODQyMSAxNDAuMTY3IDE1LjY1ODEgMTM5LjQzNyAxNS42NTgxQzEzOC41MTEgMTUuNjU4MSAxMzcuODAyIDE2LjA4MDYgMTM3LjMxMiAxNi45MzIzVjI3LjczOUgxMzIuNDc0VjEyLjIxMDRIMTM3LjAxMkwxMzcuMDE5IDEyLjIzMDhaIiBmaWxsPSIjQTMxNzQ2Ii8+DQo8cGF0aCBkPSJNOTMuMzIxNyAzMi4xNDc1SDMuNDYxNDlWMEg5My4zMjE3VjMyLjE0NzVaTTQuODI0MjQgMzAuNzg0N0g5MS45NTlWMS4zNjI3Nkg0LjgyNDI0VjMwLjc4NDdaIiBmaWxsPSIjQTMxNzQ2Ii8+DQo8cGF0aCBkPSJNMTQuMzQzIDEwLjA5MjRIMTcuOTI3MVYyNC40MjE4SDIxLjUxMTFWMTAuMDkyNEgyNS4wOTUyVjYuNTA4MzlIMTQuMzQzVjEwLjA5MjRaIiBmaWxsPSIjQTMxNzQ2Ii8+DQo8cGF0aCBkPSJNMzIuMjcwMSAyNC40MjE4SDQzLjAxNTVWMjAuODM3OEgzNS44NDc0VjE3LjI1MzdINDMuMDE1NVYxMy42Njk3SDM1Ljg0NzRWMTAuMDkyNEg0My4wMTU1VjYuNTA4MzlIMzIuMjcwMVYyNC40MjE4WiIgZmlsbD0iI0EzMTc0NiIvPg0KPHBhdGggZD0iTTcxLjY5NDYgNi41MDgzOVYxMC4wOTI0SDc1LjI3ODdWMjQuNDIxOEg3OC44NjI3VjEwLjA5MjRIODIuNDQ2OFY2LjUwODM5SDcxLjY5NDZaIiBmaWxsPSIjQTMxNzQ2Ii8+DQo8cGF0aCBkPSJNNjQuNTE5NyAyMC42OTM2SDYwLjkzNTZWMjQuMjc3N0g2NC41MTk3VjIwLjY5MzZaIiBmaWxsPSIjQTMxNzQ2Ii8+DQo8cGF0aCBkPSJNNTMuNzc0NSAxMy42MjEySDU2LjA0MzVWMTcuMDE0NUg1My43NzQ1VjIwLjY5MzlINjAuOTM1OFYxNy4wMTQ1SDU4LjUxNjlWMTMuNjIxMkg2MC45MzU4VjkuOTQ4NThINTMuNzc0NVYxMy42MjEyWiIgZmlsbD0iI0EzMTc0NiIvPg0KPHBhdGggZD0iTTUzLjc3NDMgMjAuNjkzNkg1MC4xOTAyVjI0LjI3NzdINTMuNzc0M1YyMC42OTM2WiIgZmlsbD0iI0EzMTc0NiIvPg0KPHBhdGggZD0iTTUzLjc3NDMgNi4zNjQ2OUg1MC4xOTAyVjkuOTQ4NzRINTMuNzc0M1Y2LjM2NDY5WiIgZmlsbD0iI0EzMTc0NiIvPg0KPHBhdGggZD0iTTY0LjUxOTcgNi4zNjQ2OUg2MC45MzU2VjkuOTQ4NzRINjQuNTE5N1Y2LjM2NDY5WiIgZmlsbD0iI0EzMTc0NiIvPg0KPHBhdGggZD0iTTg4LjQ5NzUgMzAuNzg1VjM0LjYyNzlIMS4zNjI3NlY1LjIxMjgySDQuMDI2OTVWMy44NTAwN0gwVjM1Ljk5MDdIODkuODYwMlYzMC43ODVIODguNDk3NVoiIGZpbGw9IiNBMzE3NDYiLz4NCjwvc3ZnPg0K";
 ;// ./src/assets/icons/pencil.svg
 var pencil_path;
 function pencil_extends() { return pencil_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, pencil_extends.apply(null, arguments); }
@@ -339971,6 +339975,7 @@ var SaveButton = _ref => {
 
 
 
+
 var ProjectBar = _ref => {
   var {
     nameEditable = true
@@ -339984,7 +339989,11 @@ var ProjectBar = _ref => {
   var readOnly = (0,external_react_redux_namespaceObject.useSelector)(state => state.editor.readOnly);
   return loading === "success" && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
     className: "project-bar",
-    children: [loading === "success" && /*#__PURE__*/(0,jsx_runtime.jsx)(ProjectName_ProjectName, {
+    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("img", {
+      className: "textJam-logo",
+      src: text_jam_logo_namespaceObject,
+      alt: "TextJam logo"
+    }), loading === "success" && /*#__PURE__*/(0,jsx_runtime.jsx)(ProjectName_ProjectName, {
       editable: !readOnly && nameEditable,
       isHeading: true
     }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
@@ -340010,1651 +340019,86 @@ var ProjectBar = _ref => {
   });
 };
 /* harmony default export */ const ProjectBar_ProjectBar = (ProjectBar);
-;// ./src/assets/icons/ellipsis_vertical.svg
-var ellipsis_vertical_path;
-function ellipsis_vertical_extends() { return ellipsis_vertical_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, ellipsis_vertical_extends.apply(null, arguments); }
-
-function SvgEllipsisVertical(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", ellipsis_vertical_extends({
-    width: 4,
-    height: 16,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), ellipsis_vertical_path || (ellipsis_vertical_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M2 16c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 010 14c0-.55.196-1.021.588-1.413A1.925 1.925 0 012 12c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413s-.196 1.021-.587 1.413A1.928 1.928 0 012 16zm0-6c-.55 0-1.02-.196-1.412-.588A1.923 1.923 0 010 8c0-.55.196-1.021.588-1.413A1.925 1.925 0 012 6c.55 0 1.021.196 1.413.587C3.804 6.979 4 7.45 4 8s-.196 1.02-.587 1.412A1.927 1.927 0 012 10zm0-6C1.45 4 .98 3.804.588 3.412A1.923 1.923 0 010 2C0 1.45.196.98.588.588A1.923 1.923 0 012 0c.55 0 1.021.196 1.413.588C3.804.979 4 1.45 4 2c0 .55-.196 1.02-.587 1.412A1.927 1.927 0 012 4z"
-  })));
-}
-/* harmony default export */ const ellipsis_vertical = (SvgEllipsisVertical);
-;// ./node_modules/@szhsin/react-menu/dist/es/_virtual/_rollupPluginBabelHelpers.js
-function _rollupPluginBabelHelpers_extends() {
-  _rollupPluginBabelHelpers_extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _rollupPluginBabelHelpers_extends.apply(this, arguments);
-}
-function _rollupPluginBabelHelpers_objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/utils/utils.js
-
-
-var isMenuOpen = function isMenuOpen(state) {
-  return !!state && state[0] === 'o';
-};
-var batchedUpdates = external_react_dom_.unstable_batchedUpdates || function (callback) {
-  return callback();
-};
-var values = Object.values || function (obj) {
-  return Object.keys(obj).map(function (key) {
-    return obj[key];
-  });
-};
-var floatEqual = function floatEqual(a, b, diff) {
-  if (diff === void 0) {
-    diff = 0.0001;
-  }
-  return Math.abs(a - b) < diff;
-};
-var getTransition = function getTransition(transition, name) {
-  return transition === true || !!(transition && transition[name]);
-};
-var safeCall = function safeCall(fn, arg) {
-  return typeof fn === 'function' ? fn(arg) : fn;
-};
-var internalKey = '_szhsinMenu';
-var getName = function getName(component) {
-  return component[internalKey];
-};
-var defineName = function defineName(name, component) {
-  return Object.defineProperty(component, internalKey, {
-    value: name
-  });
-};
-var utils_mergeProps = function mergeProps(target, source) {
-  source && Object.keys(source).forEach(function (key) {
-    var targetProp = target[key];
-    var sourceProp = source[key];
-    if (typeof sourceProp === 'function' && targetProp) {
-      target[key] = function () {
-        sourceProp.apply(void 0, arguments);
-        targetProp.apply(void 0, arguments);
-      };
-    } else {
-      target[key] = sourceProp;
-    }
-  });
-  return target;
-};
-var parsePadding = function parsePadding(paddingStr) {
-  if (typeof paddingStr !== 'string') return {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  };
-  var padding = paddingStr.trim().split(/\s+/, 4).map(parseFloat);
-  var top = !isNaN(padding[0]) ? padding[0] : 0;
-  var right = !isNaN(padding[1]) ? padding[1] : top;
-  return {
-    top: top,
-    right: right,
-    bottom: !isNaN(padding[2]) ? padding[2] : top,
-    left: !isNaN(padding[3]) ? padding[3] : right
-  };
-};
-var getScrollAncestor = function getScrollAncestor(node) {
-  while (node) {
-    node = node.parentNode;
-    if (!node || node === document.body || !node.parentNode) return;
-    var _getComputedStyle = getComputedStyle(node),
-      overflow = _getComputedStyle.overflow,
-      overflowX = _getComputedStyle.overflowX,
-      overflowY = _getComputedStyle.overflowY;
-    if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) return node;
-  }
-};
-function commonProps(isDisabled, isHovering) {
-  return {
-    'aria-disabled': isDisabled || undefined,
-    tabIndex: isHovering ? 0 : -1
-  };
-}
-function indexOfNode(nodeList, node) {
-  for (var i = 0; i < nodeList.length; i++) {
-    if (nodeList[i] === node) return i;
-  }
-  return -1;
-}
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useBEM.js
-
-
-var useBEM = function useBEM(_ref) {
-  var block = _ref.block,
-    element = _ref.element,
-    modifiers = _ref.modifiers,
-    className = _ref.className;
-  return (0,external_react_.useMemo)(function () {
-    var blockElement = element ? block + "__" + element : block;
-    var classString = blockElement;
-    modifiers && Object.keys(modifiers).forEach(function (name) {
-      var value = modifiers[name];
-      if (value) classString += " " + blockElement + "--" + (value === true ? name : name + "-" + value);
-    });
-    var expandedClassName = typeof className === 'function' ? className(modifiers) : className;
-    if (typeof expandedClassName === 'string') {
-      expandedClassName = expandedClassName.trim();
-      if (expandedClassName) classString += " " + expandedClassName;
-    }
-    return classString;
-  }, [block, element, modifiers, className]);
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/utils/constants.js
-
-
-var menuContainerClass = 'szh-menu-container';
-var menuClass = 'szh-menu';
-var menuButtonClass = 'szh-menu-button';
-var menuArrowClass = 'arrow';
-var menuItemClass = 'item';
-var menuDividerClass = 'divider';
-var menuHeaderClass = 'header';
-var menuGroupClass = 'group';
-var subMenuClass = 'submenu';
-var radioGroupClass = 'radio-group';
-var HoverItemContext = /*#__PURE__*/(0,external_react_.createContext)();
-var MenuListItemContext = /*#__PURE__*/(0,external_react_.createContext)({});
-var MenuListContext = /*#__PURE__*/(0,external_react_.createContext)({});
-var EventHandlersContext = /*#__PURE__*/(0,external_react_.createContext)({});
-var RadioGroupContext = /*#__PURE__*/(0,external_react_.createContext)({});
-var constants_SettingsContext = /*#__PURE__*/(0,external_react_.createContext)({});
-var Keys = /*#__PURE__*/Object.freeze({
-  ENTER: 'Enter',
-  ESC: 'Escape',
-  SPACE: ' ',
-  HOME: 'Home',
-  END: 'End',
-  LEFT: 'ArrowLeft',
-  RIGHT: 'ArrowRight',
-  UP: 'ArrowUp',
-  DOWN: 'ArrowDown'
-});
-var HoverActionTypes = /*#__PURE__*/Object.freeze({
-  RESET: 0,
-  SET: 1,
-  UNSET: 2,
-  INCREASE: 3,
-  DECREASE: 4,
-  FIRST: 5,
-  LAST: 6,
-  SET_INDEX: 7
-});
-var CloseReason = /*#__PURE__*/Object.freeze({
-  CLICK: 'click',
-  CANCEL: 'cancel',
-  BLUR: 'blur',
-  SCROLL: 'scroll'
-});
-var FocusPositions = /*#__PURE__*/Object.freeze({
-  FIRST: 'first',
-  LAST: 'last'
-});
-var MenuStateMap = /*#__PURE__*/Object.freeze({
-  entering: 'opening',
-  entered: 'open',
-  exiting: 'closing',
-  exited: 'closed'
-});
-var positionAbsolute = 'absolute';
-var roleNone = 'presentation';
-var roleMenuitem = 'menuitem';
-var dummyItemProps = {
-  'aria-hidden': true,
-  role: roleMenuitem
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/components/MenuContainer.js
-
-
-
-
-
-
-
-var MenuContainer = function MenuContainer(_ref) {
-  var className = _ref.className,
-    containerRef = _ref.containerRef,
-    containerProps = _ref.containerProps,
-    children = _ref.children,
-    isOpen = _ref.isOpen,
-    skipOpen = _ref.skipOpen,
-    theming = _ref.theming,
-    transition = _ref.transition,
-    onClose = _ref.onClose;
-  var itemTransition = getTransition(transition, 'item');
-  var onKeyDown = function onKeyDown(_ref2) {
-    var key = _ref2.key;
-    switch (key) {
-      case Keys.ESC:
-        safeCall(onClose, {
-          key: key,
-          reason: CloseReason.CANCEL
-        });
-        break;
-    }
-  };
-  var onBlur = function onBlur(e) {
-    if (isOpen && !e.currentTarget.contains(e.relatedTarget || document.activeElement)) {
-      safeCall(onClose, {
-        reason: CloseReason.BLUR
-      });
-      if (skipOpen) {
-        skipOpen.current = true;
-        setTimeout(function () {
-          return skipOpen.current = false;
-        }, 300);
-      }
-    }
-  };
-  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", _rollupPluginBabelHelpers_extends({}, utils_mergeProps({
-    onKeyDown: onKeyDown,
-    onBlur: onBlur
-  }, containerProps), {
-    className: useBEM({
-      block: menuContainerClass,
-      modifiers: (0,external_react_.useMemo)(function () {
-        return {
-          theme: theming,
-          itemTransition: itemTransition
-        };
-      }, [theming, itemTransition]),
-      className: className
-    }),
-    style: _rollupPluginBabelHelpers_extends({
-      position: 'absolute'
-    }, containerProps == null ? void 0 : containerProps.style),
-    ref: containerRef,
-    children: children
-  }));
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/utils/submenuCtx.js
-var createSubmenuCtx = function createSubmenuCtx() {
-  var timer,
-    count = 0;
-  return {
-    toggle: function toggle(isOpen) {
-      isOpen ? count++ : count--;
-      count = Math.max(count, 0);
-    },
-    on: function on(closeDelay, pending, settled) {
-      if (count) {
-        if (!timer) timer = setTimeout(function () {
-          timer = 0;
-          pending();
-        }, closeDelay);
-      } else {
-        settled == null ? void 0 : settled();
-      }
-    },
-    off: function off() {
-      if (timer) {
-        clearTimeout(timer);
-        timer = 0;
-      }
-    }
-  };
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useItems.js
-
-
-
-
-var useItems = function useItems(menuRef, focusRef) {
-  var _useState = (0,external_react_.useState)(),
-    hoverItem = _useState[0],
-    setHoverItem = _useState[1];
-  var stateRef = (0,external_react_.useRef)({
-    items: [],
-    hoverIndex: -1,
-    sorted: false
-  });
-  var mutableState = stateRef.current;
-  var updateItems = (0,external_react_.useCallback)(function (item, isMounted) {
-    var items = mutableState.items;
-    if (!item) {
-      mutableState.items = [];
-    } else if (isMounted) {
-      items.push(item);
-    } else {
-      var index = items.indexOf(item);
-      if (index > -1) {
-        items.splice(index, 1);
-        if (item.contains(document.activeElement)) {
-          focusRef.current.focus();
-          setHoverItem();
-        }
-      }
-    }
-    mutableState.hoverIndex = -1;
-    mutableState.sorted = false;
-  }, [mutableState, focusRef]);
-  var dispatch = (0,external_react_.useCallback)(function (actionType, item, nextIndex) {
-    var items = mutableState.items,
-      hoverIndex = mutableState.hoverIndex;
-    var sortItems = function sortItems() {
-      if (mutableState.sorted) return;
-      var orderedNodes = menuRef.current.querySelectorAll('.szh-menu__item');
-      items.sort(function (a, b) {
-        return indexOfNode(orderedNodes, a) - indexOfNode(orderedNodes, b);
-      });
-      mutableState.sorted = true;
-    };
-    var index = -1,
-      newItem = undefined;
-    switch (actionType) {
-      case HoverActionTypes.RESET:
-        break;
-      case HoverActionTypes.SET:
-        newItem = item;
-        break;
-      case HoverActionTypes.UNSET:
-        newItem = function newItem(prevItem) {
-          return prevItem === item ? undefined : prevItem;
-        };
-        break;
-      case HoverActionTypes.FIRST:
-        sortItems();
-        index = 0;
-        newItem = items[index];
-        break;
-      case HoverActionTypes.LAST:
-        sortItems();
-        index = items.length - 1;
-        newItem = items[index];
-        break;
-      case HoverActionTypes.SET_INDEX:
-        sortItems();
-        index = nextIndex;
-        newItem = items[index];
-        break;
-      case HoverActionTypes.INCREASE:
-        sortItems();
-        index = hoverIndex;
-        if (index < 0) index = items.indexOf(item);
-        index++;
-        if (index >= items.length) index = 0;
-        newItem = items[index];
-        break;
-      case HoverActionTypes.DECREASE:
-        sortItems();
-        index = hoverIndex;
-        if (index < 0) index = items.indexOf(item);
-        index--;
-        if (index < 0) index = items.length - 1;
-        newItem = items[index];
-        break;
-      default:
-        if (false) {}
-    }
-    if (!newItem) index = -1;
-    setHoverItem(newItem);
-    mutableState.hoverIndex = index;
-  }, [menuRef, mutableState]);
-  return {
-    hoverItem: hoverItem,
-    dispatch: dispatch,
-    updateItems: updateItems
-  };
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/positionUtils/getPositionHelpers.js
-
-
-var getPositionHelpers = function getPositionHelpers(containerRef, menuRef, menuScroll, boundingBoxPadding) {
-  var menuRect = menuRef.current.getBoundingClientRect();
-  var containerRect = containerRef.current.getBoundingClientRect();
-  var boundingRect = menuScroll === window ? {
-    left: 0,
-    top: 0,
-    right: document.documentElement.clientWidth,
-    bottom: window.innerHeight
-  } : menuScroll.getBoundingClientRect();
-  var padding = parsePadding(boundingBoxPadding);
-  var getLeftOverflow = function getLeftOverflow(x) {
-    return x + containerRect.left - boundingRect.left - padding.left;
-  };
-  var getRightOverflow = function getRightOverflow(x) {
-    return x + containerRect.left + menuRect.width - boundingRect.right + padding.right;
-  };
-  var getTopOverflow = function getTopOverflow(y) {
-    return y + containerRect.top - boundingRect.top - padding.top;
-  };
-  var getBottomOverflow = function getBottomOverflow(y) {
-    return y + containerRect.top + menuRect.height - boundingRect.bottom + padding.bottom;
-  };
-  var confineHorizontally = function confineHorizontally(x) {
-    var leftOverflow = getLeftOverflow(x);
-    if (leftOverflow < 0) {
-      x -= leftOverflow;
-    } else {
-      var rightOverflow = getRightOverflow(x);
-      if (rightOverflow > 0) {
-        x -= rightOverflow;
-        leftOverflow = getLeftOverflow(x);
-        if (leftOverflow < 0) x -= leftOverflow;
-      }
-    }
-    return x;
-  };
-  var confineVertically = function confineVertically(y) {
-    var topOverflow = getTopOverflow(y);
-    if (topOverflow < 0) {
-      y -= topOverflow;
-    } else {
-      var bottomOverflow = getBottomOverflow(y);
-      if (bottomOverflow > 0) {
-        y -= bottomOverflow;
-        topOverflow = getTopOverflow(y);
-        if (topOverflow < 0) y -= topOverflow;
-      }
-    }
-    return y;
-  };
-  return {
-    menuRect: menuRect,
-    containerRect: containerRect,
-    getLeftOverflow: getLeftOverflow,
-    getRightOverflow: getRightOverflow,
-    getTopOverflow: getTopOverflow,
-    getBottomOverflow: getBottomOverflow,
-    confineHorizontally: confineHorizontally,
-    confineVertically: confineVertically
-  };
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/positionUtils/placeArrowVertical.js
-var placeArrowVertical = function placeArrowVertical(_ref) {
-  var arrowRef = _ref.arrowRef,
-    menuY = _ref.menuY,
-    anchorRect = _ref.anchorRect,
-    containerRect = _ref.containerRect,
-    menuRect = _ref.menuRect;
-  var y = anchorRect.top - containerRect.top - menuY + anchorRect.height / 2;
-  var offset = arrowRef.current.offsetHeight * 1.25;
-  y = Math.max(offset, y);
-  y = Math.min(y, menuRect.height - offset);
-  return y;
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/positionUtils/placeLeftorRight.js
-
-
-var placeLeftorRight = function placeLeftorRight(_ref) {
-  var anchorRect = _ref.anchorRect,
-    containerRect = _ref.containerRect,
-    menuRect = _ref.menuRect,
-    placeLeftorRightY = _ref.placeLeftorRightY,
-    placeLeftX = _ref.placeLeftX,
-    placeRightX = _ref.placeRightX,
-    getLeftOverflow = _ref.getLeftOverflow,
-    getRightOverflow = _ref.getRightOverflow,
-    confineHorizontally = _ref.confineHorizontally,
-    confineVertically = _ref.confineVertically,
-    arrowRef = _ref.arrowRef,
-    arrow = _ref.arrow,
-    direction = _ref.direction,
-    position = _ref.position;
-  var computedDirection = direction;
-  var y = placeLeftorRightY;
-  if (position !== 'initial') {
-    y = confineVertically(y);
-    if (position === 'anchor') {
-      y = Math.min(y, anchorRect.bottom - containerRect.top);
-      y = Math.max(y, anchorRect.top - containerRect.top - menuRect.height);
-    }
-  }
-  var x, leftOverflow, rightOverflow;
-  if (computedDirection === 'left') {
-    x = placeLeftX;
-    if (position !== 'initial') {
-      leftOverflow = getLeftOverflow(x);
-      if (leftOverflow < 0) {
-        rightOverflow = getRightOverflow(placeRightX);
-        if (rightOverflow <= 0 || -leftOverflow > rightOverflow) {
-          x = placeRightX;
-          computedDirection = 'right';
-        }
-      }
-    }
-  } else {
-    x = placeRightX;
-    if (position !== 'initial') {
-      rightOverflow = getRightOverflow(x);
-      if (rightOverflow > 0) {
-        leftOverflow = getLeftOverflow(placeLeftX);
-        if (leftOverflow >= 0 || -leftOverflow < rightOverflow) {
-          x = placeLeftX;
-          computedDirection = 'left';
-        }
-      }
-    }
-  }
-  if (position === 'auto') x = confineHorizontally(x);
-  var arrowY = arrow ? placeArrowVertical({
-    menuY: y,
-    arrowRef: arrowRef,
-    anchorRect: anchorRect,
-    containerRect: containerRect,
-    menuRect: menuRect
-  }) : undefined;
-  return {
-    arrowY: arrowY,
-    x: x,
-    y: y,
-    computedDirection: computedDirection
-  };
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/positionUtils/placeArrowHorizontal.js
-var placeArrowHorizontal = function placeArrowHorizontal(_ref) {
-  var arrowRef = _ref.arrowRef,
-    menuX = _ref.menuX,
-    anchorRect = _ref.anchorRect,
-    containerRect = _ref.containerRect,
-    menuRect = _ref.menuRect;
-  var x = anchorRect.left - containerRect.left - menuX + anchorRect.width / 2;
-  var offset = arrowRef.current.offsetWidth * 1.25;
-  x = Math.max(offset, x);
-  x = Math.min(x, menuRect.width - offset);
-  return x;
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/positionUtils/placeToporBottom.js
-
-
-var placeToporBottom = function placeToporBottom(_ref) {
-  var anchorRect = _ref.anchorRect,
-    containerRect = _ref.containerRect,
-    menuRect = _ref.menuRect,
-    placeToporBottomX = _ref.placeToporBottomX,
-    placeTopY = _ref.placeTopY,
-    placeBottomY = _ref.placeBottomY,
-    getTopOverflow = _ref.getTopOverflow,
-    getBottomOverflow = _ref.getBottomOverflow,
-    confineHorizontally = _ref.confineHorizontally,
-    confineVertically = _ref.confineVertically,
-    arrowRef = _ref.arrowRef,
-    arrow = _ref.arrow,
-    direction = _ref.direction,
-    position = _ref.position;
-  var computedDirection = direction === 'top' ? 'top' : 'bottom';
-  var x = placeToporBottomX;
-  if (position !== 'initial') {
-    x = confineHorizontally(x);
-    if (position === 'anchor') {
-      x = Math.min(x, anchorRect.right - containerRect.left);
-      x = Math.max(x, anchorRect.left - containerRect.left - menuRect.width);
-    }
-  }
-  var y, topOverflow, bottomOverflow;
-  if (computedDirection === 'top') {
-    y = placeTopY;
-    if (position !== 'initial') {
-      topOverflow = getTopOverflow(y);
-      if (topOverflow < 0) {
-        bottomOverflow = getBottomOverflow(placeBottomY);
-        if (bottomOverflow <= 0 || -topOverflow > bottomOverflow) {
-          y = placeBottomY;
-          computedDirection = 'bottom';
-        }
-      }
-    }
-  } else {
-    y = placeBottomY;
-    if (position !== 'initial') {
-      bottomOverflow = getBottomOverflow(y);
-      if (bottomOverflow > 0) {
-        topOverflow = getTopOverflow(placeTopY);
-        if (topOverflow >= 0 || -topOverflow < bottomOverflow) {
-          y = placeTopY;
-          computedDirection = 'top';
-        }
-      }
-    }
-  }
-  if (position === 'auto') y = confineVertically(y);
-  var arrowX = arrow ? placeArrowHorizontal({
-    menuX: x,
-    arrowRef: arrowRef,
-    anchorRect: anchorRect,
-    containerRect: containerRect,
-    menuRect: menuRect
-  }) : undefined;
-  return {
-    arrowX: arrowX,
-    x: x,
-    y: y,
-    computedDirection: computedDirection
-  };
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/positionUtils/positionMenu.js
-
-
-
-
-var positionMenu = function positionMenu(_ref) {
-  var arrow = _ref.arrow,
-    align = _ref.align,
-    direction = _ref.direction,
-    offsetX = _ref.offsetX,
-    offsetY = _ref.offsetY,
-    position = _ref.position,
-    anchorRect = _ref.anchorRect,
-    arrowRef = _ref.arrowRef,
-    positionHelpers = _ref.positionHelpers;
-  var menuRect = positionHelpers.menuRect,
-    containerRect = positionHelpers.containerRect;
-  var horizontalOffset = offsetX;
-  var verticalOffset = offsetY;
-  if (arrow) {
-    if (direction === 'left' || direction === 'right') {
-      horizontalOffset += arrowRef.current.offsetWidth;
-    } else {
-      verticalOffset += arrowRef.current.offsetHeight;
-    }
-  }
-  var placeLeftX = anchorRect.left - containerRect.left - menuRect.width - horizontalOffset;
-  var placeRightX = anchorRect.right - containerRect.left + horizontalOffset;
-  var placeTopY = anchorRect.top - containerRect.top - menuRect.height - verticalOffset;
-  var placeBottomY = anchorRect.bottom - containerRect.top + verticalOffset;
-  var placeToporBottomX, placeLeftorRightY;
-  if (align === 'end') {
-    placeToporBottomX = anchorRect.right - containerRect.left - menuRect.width;
-    placeLeftorRightY = anchorRect.bottom - containerRect.top - menuRect.height;
-  } else if (align === 'center') {
-    placeToporBottomX = anchorRect.left - containerRect.left - (menuRect.width - anchorRect.width) / 2;
-    placeLeftorRightY = anchorRect.top - containerRect.top - (menuRect.height - anchorRect.height) / 2;
-  } else {
-    placeToporBottomX = anchorRect.left - containerRect.left;
-    placeLeftorRightY = anchorRect.top - containerRect.top;
-  }
-  placeToporBottomX += horizontalOffset;
-  placeLeftorRightY += verticalOffset;
-  var options = _rollupPluginBabelHelpers_extends({}, positionHelpers, {
-    anchorRect: anchorRect,
-    placeLeftX: placeLeftX,
-    placeRightX: placeRightX,
-    placeLeftorRightY: placeLeftorRightY,
-    placeTopY: placeTopY,
-    placeBottomY: placeBottomY,
-    placeToporBottomX: placeToporBottomX,
-    arrowRef: arrowRef,
-    arrow: arrow,
-    direction: direction,
-    position: position
-  });
-  switch (direction) {
-    case 'left':
-    case 'right':
-      return placeLeftorRight(options);
-    case 'top':
-    case 'bottom':
-    default:
-      return placeToporBottom(options);
-  }
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useIsomorphicLayoutEffect.js
-
-
-var useIsomorphicLayoutEffect_useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? external_react_.useLayoutEffect : external_react_.useEffect;
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useCombinedRef.js
-
-
-function setRef(ref, instance) {
-  typeof ref === 'function' ? ref(instance) : ref.current = instance;
-}
-var useCombinedRef = function useCombinedRef(refA, refB) {
-  return (0,external_react_.useMemo)(function () {
-    if (!refA) return refB;
-    if (!refB) return refA;
-    return function (instance) {
-      setRef(refA, instance);
-      setRef(refB, instance);
-    };
-  }, [refA, refB]);
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/components/MenuList.js
-
-
-
-
-
-
-
-
-
-
+;// ./src/components/Menus/Sidebar/styles.module.scss
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const Sidebar_styles_module = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","sidebar":"styles-module__sidebar--Fu5Qi","mobile":"styles-module__mobile--WIsuV","react-tabs":"styles-module__react-tabs--MIiIF","react-tabs__tab-list":"styles-module__react-tabs__tab-list--h1azo","gwcLogo":"styles-module__gwcLogo--o2p4A","bar":"styles-module__bar--fOlLf","optionsTop":"styles-module__optionsTop--2jNbs","optionsBottom":"styles-module__optionsBottom--PtwF4","option":"styles-module__option--MOGCu","selected":"styles-module__selected--avjSK","panel":"styles-module__panel--bHhSv","panelWithFooter":"styles-module__panelWithFooter--5ItsY","panelHeading":"styles-module__panelHeading--GRNt0","panelHeader":"styles-module__panelHeader--bAHfN","panelContent":"styles-module__panelContent--X7kot","panelButtons":"styles-module__panelButtons---y4S-","panelFooter":"styles-module__panelFooter--T1y-s"});
+;// ./src/components/Menus/Sidebar/SidebarBarOption.jsx
 
 
 
 
 
-var MenuList_excluded = ["ariaLabel", "menuClassName", "menuStyle", "arrowClassName", "arrowStyle", "anchorPoint", "anchorRef", "containerRef", "containerProps", "focusProps", "externalRef", "parentScrollingRef", "arrow", "align", "direction", "position", "overflow", "setDownOverflow", "repositionFlag", "captureFocus", "state", "endTransition", "isDisabled", "menuItemFocus", "offsetX", "offsetY", "children", "onClose"];
-var MenuList = function MenuList(_ref) {
-  var ariaLabel = _ref.ariaLabel,
-    menuClassName = _ref.menuClassName,
-    menuStyle = _ref.menuStyle,
-    arrowClassName = _ref.arrowClassName,
-    arrowStyle = _ref.arrowStyle,
-    anchorPoint = _ref.anchorPoint,
-    anchorRef = _ref.anchorRef,
-    containerRef = _ref.containerRef,
-    containerProps = _ref.containerProps,
-    focusProps = _ref.focusProps,
-    externalRef = _ref.externalRef,
-    parentScrollingRef = _ref.parentScrollingRef,
-    arrow = _ref.arrow,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'start' : _ref$align,
-    _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? 'bottom' : _ref$direction,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'auto' : _ref$position,
-    _ref$overflow = _ref.overflow,
-    overflow = _ref$overflow === void 0 ? 'visible' : _ref$overflow,
-    setDownOverflow = _ref.setDownOverflow,
-    repositionFlag = _ref.repositionFlag,
-    _ref$captureFocus = _ref.captureFocus,
-    captureFocus = _ref$captureFocus === void 0 ? true : _ref$captureFocus,
-    state = _ref.state,
-    endTransition = _ref.endTransition,
-    isDisabled = _ref.isDisabled,
-    menuItemFocus = _ref.menuItemFocus,
-    _ref$offsetX = _ref.offsetX,
-    offsetX = _ref$offsetX === void 0 ? 0 : _ref$offsetX,
-    _ref$offsetY = _ref.offsetY,
-    offsetY = _ref$offsetY === void 0 ? 0 : _ref$offsetY,
-    children = _ref.children,
-    onClose = _ref.onClose,
-    restProps = _rollupPluginBabelHelpers_objectWithoutPropertiesLoose(_ref, MenuList_excluded);
-  var _useState = (0,external_react_.useState)({
-      x: 0,
-      y: 0
-    }),
-    menuPosition = _useState[0],
-    setMenuPosition = _useState[1];
-  var _useState2 = (0,external_react_.useState)({}),
-    arrowPosition = _useState2[0],
-    setArrowPosition = _useState2[1];
-  var _useState3 = (0,external_react_.useState)(),
-    overflowData = _useState3[0],
-    setOverflowData = _useState3[1];
-  var _useState4 = (0,external_react_.useState)(direction),
-    expandedDirection = _useState4[0],
-    setExpandedDirection = _useState4[1];
-  var _useState5 = (0,external_react_.useState)(createSubmenuCtx),
-    submenuCtx = _useState5[0];
-  var _useReducer = (0,external_react_.useReducer)(function (c) {
-      return c + 1;
-    }, 1),
-    reposSubmenu = _useReducer[0],
-    forceReposSubmenu = _useReducer[1];
-  var _useContext = (0,external_react_.useContext)(constants_SettingsContext),
-    transition = _useContext.transition,
-    boundingBoxRef = _useContext.boundingBoxRef,
-    boundingBoxPadding = _useContext.boundingBoxPadding,
-    rootMenuRef = _useContext.rootMenuRef,
-    rootAnchorRef = _useContext.rootAnchorRef,
-    scrollNodesRef = _useContext.scrollNodesRef,
-    reposition = _useContext.reposition,
-    viewScroll = _useContext.viewScroll,
-    submenuCloseDelay = _useContext.submenuCloseDelay;
-  var _useContext2 = (0,external_react_.useContext)(MenuListContext),
-    parentSubmenuCtx = _useContext2.submenuCtx,
-    _useContext2$reposSub = _useContext2.reposSubmenu,
-    reposFlag = _useContext2$reposSub === void 0 ? repositionFlag : _useContext2$reposSub;
-  var menuRef = (0,external_react_.useRef)(null);
-  var focusRef = (0,external_react_.useRef)();
-  var arrowRef = (0,external_react_.useRef)();
-  var prevOpen = (0,external_react_.useRef)(false);
-  var latestMenuSize = (0,external_react_.useRef)({
-    width: 0,
-    height: 0
-  });
-  var latestHandlePosition = (0,external_react_.useRef)(function () {});
-  var _useItems = useItems(menuRef, focusRef),
-    hoverItem = _useItems.hoverItem,
-    dispatch = _useItems.dispatch,
-    updateItems = _useItems.updateItems;
-  var isOpen = isMenuOpen(state);
-  var openTransition = getTransition(transition, 'open');
-  var closeTransition = getTransition(transition, 'close');
-  var scrollNodes = scrollNodesRef.current;
-  var onKeyDown = function onKeyDown(e) {
-    switch (e.key) {
-      case Keys.HOME:
-        dispatch(HoverActionTypes.FIRST);
-        break;
-      case Keys.END:
-        dispatch(HoverActionTypes.LAST);
-        break;
-      case Keys.UP:
-        dispatch(HoverActionTypes.DECREASE, hoverItem);
-        break;
-      case Keys.DOWN:
-        dispatch(HoverActionTypes.INCREASE, hoverItem);
-        break;
-      case Keys.SPACE:
-        if (e.target && e.target.className.indexOf(menuClass) !== -1) {
-          e.preventDefault();
-        }
-        return;
-      default:
-        return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  var onAnimationEnd = function onAnimationEnd() {
-    if (state === 'closing') {
-      setOverflowData();
-    }
-    safeCall(endTransition);
-  };
-  var onPointerMove = function onPointerMove(e) {
-    e.stopPropagation();
-    submenuCtx.on(submenuCloseDelay, function () {
-      dispatch(HoverActionTypes.RESET);
-      focusRef.current.focus();
-    });
-  };
-  var onPointerLeave = function onPointerLeave(e) {
-    if (e.target === e.currentTarget) submenuCtx.off();
+var SidebarBarOption = props => {
+  var {
+    Icon,
+    isActive,
+    name,
+    title,
+    toggleOption,
+    buttonText,
+    isUser
+  } = props;
+  var onClickHandler = () => {
+    toggleOption(name);
   };
-  var handlePosition = (0,external_react_.useCallback)(function (noOverflowCheck) {
-    var _anchorRef$current;
-    var anchorRect = anchorRef ? (_anchorRef$current = anchorRef.current) == null ? void 0 : _anchorRef$current.getBoundingClientRect() : anchorPoint ? {
-      left: anchorPoint.x,
-      right: anchorPoint.x,
-      top: anchorPoint.y,
-      bottom: anchorPoint.y,
-      width: 0,
-      height: 0
-    } : null;
-    if (!anchorRect) {
-      if (false) {}
-      return;
-    }
-    if (!scrollNodes.menu) {
-      scrollNodes.menu = (boundingBoxRef ? boundingBoxRef.current : getScrollAncestor(rootMenuRef.current)) || window;
-    }
-    var positionHelpers = getPositionHelpers(containerRef, menuRef, scrollNodes.menu, boundingBoxPadding);
-    var _positionMenu = positionMenu({
-        arrow: arrow,
-        align: align,
-        direction: direction,
-        offsetX: offsetX,
-        offsetY: offsetY,
-        position: position,
-        anchorRect: anchorRect,
-        arrowRef: arrowRef,
-        positionHelpers: positionHelpers
-      }),
-      arrowX = _positionMenu.arrowX,
-      arrowY = _positionMenu.arrowY,
-      x = _positionMenu.x,
-      y = _positionMenu.y,
-      computedDirection = _positionMenu.computedDirection;
-    var menuRect = positionHelpers.menuRect;
-    var menuHeight = menuRect.height;
-    if (!noOverflowCheck && overflow !== 'visible') {
-      var getTopOverflow = positionHelpers.getTopOverflow,
-        getBottomOverflow = positionHelpers.getBottomOverflow;
-      var height, _overflowAmt;
-      var prevHeight = latestMenuSize.current.height;
-      var bottomOverflow = getBottomOverflow(y);
-      if (bottomOverflow > 0 || floatEqual(bottomOverflow, 0) && floatEqual(menuHeight, prevHeight)) {
-        height = menuHeight - bottomOverflow;
-        _overflowAmt = bottomOverflow;
-      } else {
-        var topOverflow = getTopOverflow(y);
-        if (topOverflow < 0 || floatEqual(topOverflow, 0) && floatEqual(menuHeight, prevHeight)) {
-          height = menuHeight + topOverflow;
-          _overflowAmt = 0 - topOverflow;
-          if (height >= 0) y -= topOverflow;
-        }
-      }
-      if (height >= 0) {
-        menuHeight = height;
-        setOverflowData({
-          height: height,
-          overflowAmt: _overflowAmt
-        });
-      } else {
-        setOverflowData();
-      }
-    }
-    if (arrow) setArrowPosition({
-      x: arrowX,
-      y: arrowY
-    });
-    setMenuPosition({
-      x: x,
-      y: y
-    });
-    setExpandedDirection(computedDirection);
-    latestMenuSize.current = {
-      width: menuRect.width,
-      height: menuHeight
-    };
-  }, [arrow, align, boundingBoxPadding, direction, offsetX, offsetY, position, overflow, anchorPoint, anchorRef, containerRef, boundingBoxRef, rootMenuRef, scrollNodes]);
-  useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function () {
-    if (isOpen) {
-      handlePosition();
-      if (prevOpen.current) forceReposSubmenu();
-    }
-    prevOpen.current = isOpen;
-    latestHandlePosition.current = handlePosition;
-  }, [isOpen, handlePosition, reposFlag]);
-  useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function () {
-    if (overflowData && !setDownOverflow) menuRef.current.scrollTop = 0;
-  }, [overflowData, setDownOverflow]);
-  useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function () {
-    return updateItems;
-  }, [updateItems]);
-  (0,external_react_.useEffect)(function () {
-    var menuScroll = scrollNodes.menu;
-    if (!isOpen || !menuScroll) return;
-    menuScroll = menuScroll.addEventListener ? menuScroll : window;
-    if (!scrollNodes.anchors) {
-      scrollNodes.anchors = [];
-      var anchorScroll = getScrollAncestor(rootAnchorRef && rootAnchorRef.current);
-      while (anchorScroll && anchorScroll !== menuScroll) {
-        scrollNodes.anchors.push(anchorScroll);
-        anchorScroll = getScrollAncestor(anchorScroll);
-      }
-    }
-    var scroll = viewScroll;
-    if (scrollNodes.anchors.length && scroll === 'initial') scroll = 'auto';
-    if (scroll === 'initial') return;
-    var handleScroll = function handleScroll() {
-      if (scroll === 'auto') {
-        batchedUpdates(function () {
-          return handlePosition(true);
-        });
-      } else {
-        safeCall(onClose, {
-          reason: CloseReason.SCROLL
-        });
-      }
-    };
-    var scrollObservers = scrollNodes.anchors.concat(viewScroll !== 'initial' ? menuScroll : []);
-    scrollObservers.forEach(function (o) {
-      return o.addEventListener('scroll', handleScroll);
-    });
-    return function () {
-      return scrollObservers.forEach(function (o) {
-        return o.removeEventListener('scroll', handleScroll);
-      });
-    };
-  }, [rootAnchorRef, scrollNodes, isOpen, onClose, viewScroll, handlePosition]);
-  var hasOverflow = !!overflowData && overflowData.overflowAmt > 0;
-  (0,external_react_.useEffect)(function () {
-    if (hasOverflow || !isOpen || !parentScrollingRef) return;
-    var handleScroll = function handleScroll() {
-      return batchedUpdates(handlePosition);
-    };
-    var parentScroll = parentScrollingRef.current;
-    parentScroll.addEventListener('scroll', handleScroll);
-    return function () {
-      return parentScroll.removeEventListener('scroll', handleScroll);
-    };
-  }, [isOpen, hasOverflow, parentScrollingRef, handlePosition]);
-  (0,external_react_.useEffect)(function () {
-    if (typeof ResizeObserver !== 'function' || reposition === 'initial') return;
-    var resizeObserver = new ResizeObserver(function (_ref2) {
-      var entry = _ref2[0];
-      var borderBoxSize = entry.borderBoxSize,
-        target = entry.target;
-      var width, height;
-      if (borderBoxSize) {
-        var _ref3 = borderBoxSize[0] || borderBoxSize,
-          inlineSize = _ref3.inlineSize,
-          blockSize = _ref3.blockSize;
-        width = inlineSize;
-        height = blockSize;
-      } else {
-        var borderRect = target.getBoundingClientRect();
-        width = borderRect.width;
-        height = borderRect.height;
-      }
-      if (width === 0 || height === 0) return;
-      if (floatEqual(width, latestMenuSize.current.width, 1) && floatEqual(height, latestMenuSize.current.height, 1)) return;
-      (0,external_react_dom_.flushSync)(function () {
-        latestHandlePosition.current();
-        forceReposSubmenu();
-      });
-    });
-    var observeTarget = menuRef.current;
-    resizeObserver.observe(observeTarget, {
-      box: 'border-box'
-    });
-    return function () {
-      return resizeObserver.unobserve(observeTarget);
-    };
-  }, [reposition]);
-  (0,external_react_.useEffect)(function () {
-    if (!isOpen) {
-      dispatch(HoverActionTypes.RESET);
-      if (!closeTransition) setOverflowData();
-      return;
-    }
-    var _ref4 = menuItemFocus || {},
-      position = _ref4.position,
-      alwaysUpdate = _ref4.alwaysUpdate;
-    var setItemFocus = function setItemFocus() {
-      if (position === FocusPositions.FIRST) {
-        dispatch(HoverActionTypes.FIRST);
-      } else if (position === FocusPositions.LAST) {
-        dispatch(HoverActionTypes.LAST);
-      } else if (position >= -1) {
-        dispatch(HoverActionTypes.SET_INDEX, undefined, position);
-      }
-    };
-    if (alwaysUpdate) {
-      setItemFocus();
-    } else if (captureFocus) {
-      var id = setTimeout(function () {
-        if (!menuRef.current.contains(document.activeElement)) {
-          focusRef.current.focus();
-          setItemFocus();
-        }
-      }, openTransition ? 170 : 100);
-      return function () {
-        return clearTimeout(id);
-      };
-    }
-  }, [isOpen, openTransition, closeTransition, captureFocus, menuItemFocus, dispatch]);
-  var itemContext = (0,external_react_.useMemo)(function () {
-    return {
-      isParentOpen: isOpen,
-      submenuCtx: submenuCtx,
-      dispatch: dispatch,
-      updateItems: updateItems
-    };
-  }, [isOpen, submenuCtx, dispatch, updateItems]);
-  var maxHeight, overflowAmt;
-  if (overflowData) {
-    setDownOverflow ? overflowAmt = overflowData.overflowAmt : maxHeight = overflowData.height;
-  }
-  var listContext = (0,external_react_.useMemo)(function () {
-    return {
-      reposSubmenu: reposSubmenu,
-      submenuCtx: submenuCtx,
-      overflow: overflow,
-      overflowAmt: overflowAmt,
-      parentMenuRef: menuRef,
-      parentDir: expandedDirection
-    };
-  }, [reposSubmenu, submenuCtx, overflow, overflowAmt, expandedDirection]);
-  var overflowStyle = maxHeight >= 0 ? {
-    maxHeight: maxHeight,
-    overflow: overflow
-  } : undefined;
-  var modifiers = (0,external_react_.useMemo)(function () {
-    return {
-      state: state,
-      dir: expandedDirection
-    };
-  }, [state, expandedDirection]);
-  var arrowModifiers = (0,external_react_.useMemo)(function () {
-    return {
-      dir: expandedDirection
-    };
-  }, [expandedDirection]);
-  var _arrowClass = useBEM({
-    block: menuClass,
-    element: menuArrowClass,
-    modifiers: arrowModifiers,
-    className: arrowClassName
-  });
-  var menu = /*#__PURE__*/(0,jsx_runtime.jsxs)("ul", _rollupPluginBabelHelpers_extends({
-    role: "menu",
-    "aria-label": ariaLabel
-  }, commonProps(isDisabled), utils_mergeProps({
-    onPointerEnter: parentSubmenuCtx == null ? void 0 : parentSubmenuCtx.off,
-    onPointerMove: onPointerMove,
-    onPointerLeave: onPointerLeave,
-    onKeyDown: onKeyDown,
-    onAnimationEnd: onAnimationEnd
-  }, restProps), {
-    ref: useCombinedRef(externalRef, menuRef),
-    className: useBEM({
-      block: menuClass,
-      modifiers: modifiers,
-      className: menuClassName
-    }),
-    style: _rollupPluginBabelHelpers_extends({}, menuStyle, overflowStyle, {
-      margin: 0,
-      display: state === 'closed' ? 'none' : undefined,
-      position: positionAbsolute,
-      left: menuPosition.x,
-      top: menuPosition.y
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(Button_Button, {
+    className: classnames_default()(Sidebar_styles_module.option, {
+      [Sidebar_styles_module.selected]: isActive
     }),
-    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("li", _rollupPluginBabelHelpers_extends({
-      tabIndex: -1,
-      style: {
-        position: positionAbsolute,
-        left: 0,
-        top: 0,
-        display: 'block',
-        outline: 'none'
-      },
-      ref: focusRef
-    }, dummyItemProps, focusProps)), arrow && /*#__PURE__*/(0,jsx_runtime.jsx)("li", _rollupPluginBabelHelpers_extends({
-      className: _arrowClass,
-      style: _rollupPluginBabelHelpers_extends({
-        display: 'block',
-        position: positionAbsolute,
-        left: arrowPosition.x,
-        top: arrowPosition.y
-      }, arrowStyle),
-      ref: arrowRef
-    }, dummyItemProps)), /*#__PURE__*/(0,jsx_runtime.jsx)(MenuListContext.Provider, {
-      value: listContext,
-      children: /*#__PURE__*/(0,jsx_runtime.jsx)(MenuListItemContext.Provider, {
-        value: itemContext,
-        children: /*#__PURE__*/(0,jsx_runtime.jsx)(HoverItemContext.Provider, {
-          value: hoverItem,
-          children: safeCall(children, modifiers)
-        })
-      })
-    })]
-  }));
-  return containerProps ? /*#__PURE__*/(0,jsx_runtime.jsx)(MenuContainer, _rollupPluginBabelHelpers_extends({}, containerProps, {
-    isOpen: isOpen,
-    children: menu
-  })) : menu;
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/components/ControlledMenu.js
-
-
-
-
-
-
-
-
-
-
-var ControlledMenu_excluded = ["aria-label", "className", "containerProps", "initialMounted", "unmountOnClose", "transition", "transitionTimeout", "boundingBoxRef", "boundingBoxPadding", "reposition", "submenuOpenDelay", "submenuCloseDelay", "skipOpen", "viewScroll", "portal", "theming", "onItemClick"];
-var ControlledMenu = /*#__PURE__*/(0,external_react_.forwardRef)(function ControlledMenu(_ref, externalRef) {
-  var ariaLabel = _ref['aria-label'],
-    className = _ref.className,
-    containerProps = _ref.containerProps,
-    initialMounted = _ref.initialMounted,
-    unmountOnClose = _ref.unmountOnClose,
-    transition = _ref.transition,
-    transitionTimeout = _ref.transitionTimeout,
-    boundingBoxRef = _ref.boundingBoxRef,
-    boundingBoxPadding = _ref.boundingBoxPadding,
-    _ref$reposition = _ref.reposition,
-    reposition = _ref$reposition === void 0 ? 'auto' : _ref$reposition,
-    _ref$submenuOpenDelay = _ref.submenuOpenDelay,
-    submenuOpenDelay = _ref$submenuOpenDelay === void 0 ? 300 : _ref$submenuOpenDelay,
-    _ref$submenuCloseDela = _ref.submenuCloseDelay,
-    submenuCloseDelay = _ref$submenuCloseDela === void 0 ? 150 : _ref$submenuCloseDela,
-    skipOpen = _ref.skipOpen,
-    _ref$viewScroll = _ref.viewScroll,
-    viewScroll = _ref$viewScroll === void 0 ? 'initial' : _ref$viewScroll,
-    portal = _ref.portal,
-    theming = _ref.theming,
-    onItemClick = _ref.onItemClick,
-    restProps = _rollupPluginBabelHelpers_objectWithoutPropertiesLoose(_ref, ControlledMenu_excluded);
-  var containerRef = (0,external_react_.useRef)(null);
-  var scrollNodesRef = (0,external_react_.useRef)({});
-  var anchorRef = restProps.anchorRef,
-    state = restProps.state,
-    onClose = restProps.onClose;
-  var settings = (0,external_react_.useMemo)(function () {
-    return {
-      initialMounted: initialMounted,
-      unmountOnClose: unmountOnClose,
-      transition: transition,
-      transitionTimeout: transitionTimeout,
-      boundingBoxRef: boundingBoxRef,
-      boundingBoxPadding: boundingBoxPadding,
-      rootMenuRef: containerRef,
-      rootAnchorRef: anchorRef,
-      scrollNodesRef: scrollNodesRef,
-      reposition: reposition,
-      viewScroll: viewScroll,
-      submenuOpenDelay: submenuOpenDelay,
-      submenuCloseDelay: submenuCloseDelay
-    };
-  }, [initialMounted, unmountOnClose, transition, transitionTimeout, anchorRef, boundingBoxRef, boundingBoxPadding, reposition, viewScroll, submenuOpenDelay, submenuCloseDelay]);
-  var eventHandlers = (0,external_react_.useMemo)(function () {
-    return {
-      handleClick: function handleClick(event, isCheckorRadio) {
-        if (!event.stopPropagation) safeCall(onItemClick, event);
-        var keepOpen = event.keepOpen;
-        if (keepOpen === undefined) {
-          keepOpen = isCheckorRadio && event.key === Keys.SPACE;
-        }
-        if (!keepOpen) {
-          safeCall(onClose, {
-            value: event.value,
-            key: event.key,
-            reason: CloseReason.CLICK
-          });
-        }
-      },
-      handleClose: function handleClose(key) {
-        safeCall(onClose, {
-          key: key,
-          reason: CloseReason.CLICK
-        });
-      }
-    };
-  }, [onItemClick, onClose]);
-  if (!state) return null;
-  var menuList = /*#__PURE__*/(0,jsx_runtime.jsx)(constants_SettingsContext.Provider, {
-    value: settings,
-    children: /*#__PURE__*/(0,jsx_runtime.jsx)(EventHandlersContext.Provider, {
-      value: eventHandlers,
-      children: /*#__PURE__*/(0,jsx_runtime.jsx)(MenuList, _rollupPluginBabelHelpers_extends({}, restProps, {
-        ariaLabel: ariaLabel || 'Menu',
-        externalRef: externalRef,
-        containerRef: containerRef,
-        containerProps: {
-          className: className,
-          containerRef: containerRef,
-          containerProps: containerProps,
-          skipOpen: skipOpen,
-          theming: theming,
-          transition: transition,
-          onClose: onClose
-        }
-      }))
-    })
-  });
-  if (portal === true && typeof document !== 'undefined') {
-    return /*#__PURE__*/(0,external_react_dom_.createPortal)(menuList, document.body);
-  } else if (portal) {
-    return portal.target ? /*#__PURE__*/(0,external_react_dom_.createPortal)(menuList, portal.target) : portal.stablePosition ? null : menuList;
-  }
-  return menuList;
-});
- false ? 0 : void 0;
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useItemEffect.js
-
-
-var useItemEffect = function useItemEffect(isDisabled, itemRef, updateItems) {
-  useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function () {
-    if (false) {}
-    if (isDisabled) return;
-    var item = itemRef.current;
-    updateItems(item, true);
-    return function () {
-      updateItems(item);
-    };
-  }, [isDisabled, itemRef, updateItems]);
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/hooks/useItemState.js
-
-
-
-
-var useItemState = function useItemState(itemRef, focusRef, isHovering, isDisabled) {
-  var _useContext = (0,external_react_.useContext)(constants_SettingsContext),
-    submenuCloseDelay = _useContext.submenuCloseDelay;
-  var _useContext2 = (0,external_react_.useContext)(MenuListItemContext),
-    isParentOpen = _useContext2.isParentOpen,
-    submenuCtx = _useContext2.submenuCtx,
-    dispatch = _useContext2.dispatch,
-    updateItems = _useContext2.updateItems;
-  var setHover = function setHover() {
-    !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, itemRef.current);
-  };
-  var unsetHover = function unsetHover() {
-    !isDisabled && dispatch(HoverActionTypes.UNSET, itemRef.current);
-  };
-  var onBlur = function onBlur(e) {
-    if (isHovering && !e.currentTarget.contains(e.relatedTarget)) unsetHover();
-  };
-  var onPointerMove = function onPointerMove(e) {
-    if (!isDisabled) {
-      e.stopPropagation();
-      submenuCtx.on(submenuCloseDelay, setHover, setHover);
-    }
-  };
-  var onPointerLeave = function onPointerLeave(_, keepHover) {
-    submenuCtx.off();
-    !keepHover && unsetHover();
-  };
-  useItemEffect(isDisabled, itemRef, updateItems);
-  (0,external_react_.useEffect)(function () {
-    if (isHovering && isParentOpen) {
-      focusRef.current && focusRef.current.focus();
-    }
-  }, [focusRef, isHovering, isParentOpen]);
-  return {
-    setHover: setHover,
-    onBlur: onBlur,
-    onPointerMove: onPointerMove,
-    onPointerLeave: onPointerLeave
-  };
-};
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/utils/withHovering.js
-
-
-
-
-
-var withHovering = function withHovering(name, WrappedComponent) {
-  var Component = /*#__PURE__*/(0,external_react_.memo)(WrappedComponent);
-  var WithHovering = /*#__PURE__*/(0,external_react_.forwardRef)(function (props, ref) {
-    var itemRef = (0,external_react_.useRef)(null);
-    return /*#__PURE__*/(0,jsx_runtime.jsx)(Component, _rollupPluginBabelHelpers_extends({}, props, {
-      itemRef: itemRef,
-      externalRef: ref,
-      isHovering: (0,external_react_.useContext)(HoverItemContext) === itemRef.current
-    }));
+    isUser: isUser,
+    ButtonIcon: Icon,
+    title: title,
+    buttonText: buttonText,
+    onClickHandler: onClickHandler
   });
-  WithHovering.displayName = "WithHovering(" + name + ")";
-  return WithHovering;
 };
-
-
-
-;// ./node_modules/@szhsin/react-menu/dist/es/components/MenuItem.js
-
-
-
-
-
-
-
-
-
-
-
-
-var MenuItem_excluded = ["className", "value", "href", "type", "checked", "disabled", "children", "onClick", "isHovering", "itemRef", "externalRef"],
-  MenuItem_excluded2 = ["setHover"];
-var MenuItem = /*#__PURE__*/withHovering('MenuItem', function MenuItem(_ref) {
-  var className = _ref.className,
-    value = _ref.value,
-    href = _ref.href,
-    type = _ref.type,
-    checked = _ref.checked,
-    disabled = _ref.disabled,
-    children = _ref.children,
-    onClick = _ref.onClick,
-    isHovering = _ref.isHovering,
-    itemRef = _ref.itemRef,
-    externalRef = _ref.externalRef,
-    restProps = _rollupPluginBabelHelpers_objectWithoutPropertiesLoose(_ref, MenuItem_excluded);
-  var isDisabled = !!disabled;
-  var _useItemState = useItemState(itemRef, itemRef, isHovering, isDisabled),
-    setHover = _useItemState.setHover,
-    restStateProps = _rollupPluginBabelHelpers_objectWithoutPropertiesLoose(_useItemState, MenuItem_excluded2);
-  var eventHandlers = (0,external_react_.useContext)(EventHandlersContext);
-  var radioGroup = (0,external_react_.useContext)(RadioGroupContext);
-  var isRadio = type === 'radio';
-  var isCheckBox = type === 'checkbox';
-  var isAnchor = !!href && !isDisabled && !isRadio && !isCheckBox;
-  var isChecked = isRadio ? radioGroup.value === value : isCheckBox ? !!checked : false;
-  var handleClick = function handleClick(e) {
-    if (isDisabled) {
-      e.stopPropagation();
-      e.preventDefault();
-      return;
-    }
-    var event = {
-      value: value,
-      syntheticEvent: e
-    };
-    if (e.key !== undefined) event.key = e.key;
-    if (isCheckBox) event.checked = !isChecked;
-    if (isRadio) event.name = radioGroup.name;
-    safeCall(onClick, event);
-    if (isRadio) safeCall(radioGroup.onRadioChange, event);
-    eventHandlers.handleClick(event, isCheckBox || isRadio);
-  };
-  var handleKeyDown = function handleKeyDown(e) {
-    if (!isHovering) return;
-    switch (e.key) {
-      case Keys.ENTER:
-      case Keys.SPACE:
-        isAnchor ? e.key === Keys.SPACE && itemRef.current.click() : handleClick(e);
-    }
-  };
-  var modifiers = (0,external_react_.useMemo)(function () {
-    return {
-      type: type,
-      disabled: isDisabled,
-      hover: isHovering,
-      checked: isChecked,
-      anchor: isAnchor
-    };
-  }, [type, isDisabled, isHovering, isChecked, isAnchor]);
-  var mergedProps = utils_mergeProps(_rollupPluginBabelHelpers_extends({}, restStateProps, {
-    onPointerDown: setHover,
-    onKeyDown: handleKeyDown,
-    onClick: handleClick
-  }), restProps);
-  var menuItemProps = _rollupPluginBabelHelpers_extends({
-    role: isRadio ? 'menuitemradio' : isCheckBox ? 'menuitemcheckbox' : roleMenuitem,
-    'aria-checked': isRadio || isCheckBox ? isChecked : undefined
-  }, commonProps(isDisabled, isHovering), mergedProps, {
-    ref: useCombinedRef(externalRef, itemRef),
-    className: useBEM({
-      block: menuClass,
-      element: menuItemClass,
-      modifiers: modifiers,
-      className: className
-    }),
-    children: (0,external_react_.useMemo)(function () {
-      return safeCall(children, modifiers);
-    }, [children, modifiers])
-  });
-  return isAnchor ? /*#__PURE__*/(0,jsx_runtime.jsx)("li", {
-    role: roleNone,
-    children: /*#__PURE__*/(0,jsx_runtime.jsx)("a", _rollupPluginBabelHelpers_extends({
-      href: href
-    }, menuItemProps))
-  }) : /*#__PURE__*/(0,jsx_runtime.jsx)("li", _rollupPluginBabelHelpers_extends({}, menuItemProps));
-});
- false ? 0 : void 0;
-
-
-
-;// ./src/assets/stylesheets/ContextMenu.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/components/Menus/ContextMenu/ContextMenu.jsx
+/* harmony default export */ const Sidebar_SidebarBarOption = (SidebarBarOption);
+;// ./src/assets/gwc-logo.svg
+const gwc_logo_namespaceObject = __webpack_require__.p + "assets/gwc-logoa61b092912e3c38825d3.svg";
+;// ./src/components/Menus/Sidebar/SidebarBar.jsx
 
 
 
 
 
-var ContextMenu = props => {
+var SidebarBar = props => {
   var {
-    align,
-    direction,
-    menuButtonLabel,
-    menuButtonClassName,
-    MenuButtonIcon,
     menuOptions,
-    offsetX,
-    offsetY
+    option,
+    toggleOption
   } = props;
-  var settings = (0,external_react_.useContext)(SettingsContext);
-  var menuButton = (0,external_react_.useRef)(null);
-  var contextMenu = (0,external_react_.useRef)();
-  var [isOpen, setOpen] = (0,external_react_.useState)(false);
-  var setMenuOpenState = isMenuOpen => {
-    setOpen(isMenuOpen);
-    if (isMenuOpen) {
-      var hiddenDiv = contextMenu.current.firstChild;
-      hiddenDiv.setAttribute("role", "menuitem");
-      hiddenDiv.setAttribute("aria-hidden", "true");
-    } else {
-      menuButton.current.focus();
-    }
-  };
-  var portalTarget = document.getElementById("textjam-root");
-  document.body;
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
-    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("button", {
-      "aria-haspopup": "menu",
-      "aria-label": menuButtonLabel,
-      className: "btn context-menu__drop".concat(menuButtonClassName ? " ".concat(menuButtonClassName) : ""),
-      title: menuButtonLabel,
-      type: "button",
-      ref: menuButton,
-      onClick: () => setMenuOpenState(true),
-      children: /*#__PURE__*/(0,jsx_runtime.jsx)(MenuButtonIcon, {})
-    }), /*#__PURE__*/(0,jsx_runtime.jsx)(ControlledMenu, {
-      transition: true,
-      align: align,
-      direction: direction,
-      menuStyle: {
-        padding: "5px"
-      },
-      offsetX: offsetX,
-      offsetY: offsetY,
-      position: "anchor",
-      viewScroll: "initial",
-      portal: {
-        target: portalTarget
-      },
-      menuClassName: "context-menu context-menu--".concat(settings.theme),
-      menuItemFocus: {
-        position: "first"
-      },
-      state: isOpen ? "open" : "closed",
-      anchorRef: menuButton,
-      ref: contextMenu,
-      onClose: () => setMenuOpenState(false),
-      children: menuOptions.map((option, i) => /*#__PURE__*/(0,jsx_runtime.jsxs)(MenuItem, {
-        className: "btn context-menu__item",
-        onClick: option.action,
-        children: [/*#__PURE__*/(0,jsx_runtime.jsx)(option.icon, {}), "\xA0", option.text]
+  var topMenuOptions = menuOptions.filter(menuOption => menuOption.position === "top");
+  var bottomMenuOptions = menuOptions.filter(menuOption => menuOption.position === "bottom");
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+    className: Sidebar_styles_module.bar,
+    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      className: Sidebar_styles_module.optionsTop,
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("img", {
+        className: Sidebar_styles_module.gwcLogo,
+        src: gwc_logo_namespaceObject,
+        alt: "GWC Logo"
+      }), topMenuOptions.map((menuOption, i) => /*#__PURE__*/(0,jsx_runtime.jsx)(Sidebar_SidebarBarOption, {
+        Icon: menuOption.icon,
+        title: menuOption.title,
+        isActive: option === menuOption.name,
+        toggleOption: toggleOption,
+        name: menuOption.name
+      }, i))]
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: Sidebar_styles_module.optionsBottom,
+      children: bottomMenuOptions.map((menuOption, i) => /*#__PURE__*/(0,jsx_runtime.jsx)(Sidebar_SidebarBarOption, {
+        Icon: menuOption.icon,
+        title: menuOption.title,
+        isActive: option === menuOption.name,
+        toggleOption: toggleOption,
+        name: menuOption.name,
+        buttonText: menuOption.buttonText,
+        isUser: menuOption.name === "user"
       }, i))
     })]
   });
 };
-/* harmony default export */ const ContextMenu_ContextMenu = (ContextMenu);
-;// ./src/components/Menus/FileMenu/FileMenu.jsx
-
-
-
-
-
-
-
-
-var FileMenu = props => {
-  var dispatch = (0,external_react_redux_namespaceObject.useDispatch)();
-  var {
-    t
-  } = useTranslation_useTranslation();
-  var onClickRenameFile = () => {
-    dispatch(showRenameFileModal(props));
-  };
-  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-    onClick: e => e.stopPropagation(),
-    children: /*#__PURE__*/(0,jsx_runtime.jsx)(ContextMenu_ContextMenu, {
-      align: "start",
-      direction: "right",
-      menuButtonLabel: t("filePanel.fileMenu.label"),
-      MenuButtonIcon: ellipsis_vertical,
-      menuOptions: [{
-        icon: pencil,
-        text: t("filePanel.fileMenu.renameItem"),
-        action: onClickRenameFile
-      }],
-      offsetX: 16,
-      offsetY: -8
-    })
-  });
-};
-/* harmony default export */ const FileMenu_FileMenu = (FileMenu);
-;// ./src/assets/stylesheets/FilePanel.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/assets/stylesheets/Sidebar.scss
-// extracted by mini-css-extract-plugin
-
+/* harmony default export */ const Sidebar_SidebarBar = (SidebarBar);
 ;// ./node_modules/re-resizable/lib/resizer.js
 var resizer_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -342590,6 +341034,7 @@ var ResizableWithHandle = props => {
 
 
 
+
 var SidebarPanel = props => {
   var {
     children,
@@ -342604,29 +341049,29 @@ var SidebarPanel = props => {
   });
   var panelContent = /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
     children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: "sidebar__panel-header",
+      className: Sidebar_styles_module.panelHeader,
       children: [/*#__PURE__*/(0,jsx_runtime.jsx)("h2", {
-        className: "sidebar__panel-heading",
+        className: Sidebar_styles_module.panelHeading,
         children: heading
       }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-        className: "sidebar__panel-buttons",
+        className: Sidebar_styles_module.panelButtons,
         children: buttons
       })]
     }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: "sidebar__panel-content",
+      className: Sidebar_styles_module.panelContent,
       children: children
     }), Footer && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: "sidebar__panel-footer",
+      className: Sidebar_styles_module.panelFooter,
       children: /*#__PURE__*/(0,jsx_runtime.jsx)(Footer, {})
     })]
   });
   return isMobile ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
     "data-testid": "sidebar__panel",
-    className: classnames_default()("sidebar__panel", className, Footer && "sidebar__panel--with-footer"),
+    className: classnames_default()(Sidebar_styles_module.panel, className, Footer && Sidebar_styles_module.panelWithFooter),
     children: panelContent
   }) : /*#__PURE__*/(0,jsx_runtime.jsx)(utils_ResizableWithHandle, {
     "data-testid": "sidebar__panel",
-    className: classnames_default()("sidebar__panel", className, Footer && "sidebar__panel--with-footer"),
+    className: classnames_default()(Sidebar_styles_module.panel, className, Footer && Sidebar_styles_module.panelWithFooter),
     defaultWidth: defaultWidth,
     defaultHeight: "100%",
     handleDirection: "right",
@@ -342636,379 +341081,6 @@ var SidebarPanel = props => {
   });
 };
 /* harmony default export */ const Sidebar_SidebarPanel = (SidebarPanel);
-;// ./src/assets/icons/file.svg
-var file_path;
-function file_extends() { return file_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, file_extends.apply(null, arguments); }
-
-function SvgFile(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", file_extends({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), file_path || (file_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M8 18h8v-2H8v2zm0-4h8v-2H8v2zm-4 8V2h10l6 6v14H4zm9-13V4H6v16h12V9h-5zM6 4v5-5 16V4z"
-  })));
-}
-/* harmony default export */ const file = (SvgFile);
-;// ./src/assets/icons/python_file.svg
-var python_file_path;
-function python_file_extends() { return python_file_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, python_file_extends.apply(null, arguments); }
-
-function SvgPythonFile(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", python_file_extends({
-    "data-testid": "pythonIcon",
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), python_file_path || (python_file_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M11.527 11.626H9.162c-1.656 0-2.72 1.065-2.72 2.72v2.129c0 .236-.119.355-.355.355H5.022c-1.064 0-1.892-.473-2.365-1.42-.355-.709-.591-1.419-.591-2.128-.119-1.301-.119-2.602.355-3.903.354-1.064 1.064-1.892 2.247-2.129h6.859c.118 0 .355 0 .355-.118v-.591s-.237-.119-.355-.119H7.506c-.355 0-.473-.118-.473-.473V4.412c0-.828.355-1.42 1.064-1.656.592-.236 1.183-.473 1.774-.591 1.42-.237 2.839-.237 4.258.118.591.118 1.182.355 1.655.71.474.473.828.946.71 1.655v4.258c0 1.656-.946 2.602-2.602 2.602-.828.118-1.655.118-2.365.118zM8.216 4.53c0 .473.354.946.946.946.473 0 .946-.473.946-.946s-.473-.828-.946-.946c-.592 0-.946.473-.946.946zm4.257 8.279h2.365c1.656 0 2.72-1.065 2.72-2.72v-2.13c0-.236.119-.354.355-.354h1.065c1.064 0 1.892.473 2.365 1.42.355.709.591 1.418.591 2.128.119 1.3.119 2.602-.355 3.903-.354 1.064-1.064 1.892-2.247 2.129h-6.859c-.118 0-.355 0-.355.118v.591s.237.118.355.118h4.021c.355 0 .473.119.473.473v1.538c0 .828-.355 1.42-1.064 1.656-.592.236-1.183.473-1.774.591-1.42.236-2.839.236-4.258-.118-.591-.119-1.182-.355-1.655-.71-.474-.473-.828-.946-.71-1.656V15.53c0-1.656.946-2.602 2.602-2.602.828-.118 1.655-.118 2.365-.118zm3.311 7.096c0-.473-.354-.947-.946-.947-.473 0-.946.474-.946.947s.473.828.946.946c.592 0 .947-.473.947-.946z"
-  })));
-}
-/* harmony default export */ const python_file = (SvgPythonFile);
-;// ./src/assets/icons/html_file.svg
-var html_file_path;
-function html_file_extends() { return html_file_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, html_file_extends.apply(null, arguments); }
-
-function SvgHtmlFile(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", html_file_extends({
-    "data-testid": "htmlIcon",
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), html_file_path || (html_file_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M2 11.125l7.5-7v3.25l-5.625 5 5.625 5v3.25l-7.5-7v-2.5zm20 2.625l-7.5 7v-3.375l5.75-5-5.75-5V4l7.5 7v2.75z"
-  })));
-}
-/* harmony default export */ const html_file = (SvgHtmlFile);
-;// ./src/assets/icons/css_file.svg
-var css_file_path;
-function css_file_extends() { return css_file_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, css_file_extends.apply(null, arguments); }
-
-function SvgCssFile(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", css_file_extends({
-    "data-testid": "cssIcon",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 20 18",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), css_file_path || (css_file_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M2.053 17.638l.967-4.833H0v-2.537h3.624l.604-3.02h-3.14V4.711h3.744L5.798 0h3.383l-.966 4.711h3.382L12.564 0h3.382l-.966 4.711H18v2.537h-3.504l-.724 3.02h3.14v2.537h-3.624l-.966 4.833H8.939l.967-4.833H6.523l-.966 4.833H2.053zm8.336-7.37l.604-3.02H7.611l-.604 3.02h3.382z"
-  })));
-}
-/* harmony default export */ const css_file = (SvgCssFile);
-;// ./src/assets/icons/csv_file.svg
-var csv_file_path;
-function csv_file_extends() { return csv_file_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, csv_file_extends.apply(null, arguments); }
-
-function SvgCsvFile(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", csv_file_extends({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), csv_file_path || (csv_file_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M3 3v17.8h18V3H3zm2.9 3.7H11V8H5.9V6.7zm7 0H18V8h-5.1V6.7zm-7 3H11V11H5.9V9.7zm7 0H18V11h-5.1V9.7zm-7 3H11V14H5.9v-1.3zm7 0H18V14h-5.1v-1.3zm-7 3H11V17H5.9v-1.3zm7 0H18V17h-5.1v-1.3z"
-  })));
-}
-/* harmony default export */ const csv_file = (SvgCsvFile);
-;// ./src/utils/FileIcon.jsx
-
-
-
-
-
-
-
-var FileIcon = _ref => {
-  var {
-    ext
-  } = _ref;
-  switch (ext) {
-    case FILE_EXTENSIONS.py:
-      return /*#__PURE__*/(0,jsx_runtime.jsx)(python_file, {
-        "data-testid": "pythonIcon"
-      });
-    case FILE_EXTENSIONS.html:
-      return /*#__PURE__*/(0,jsx_runtime.jsx)(html_file, {
-        "data-testid": "htmlIcon"
-      });
-    case FILE_EXTENSIONS.css:
-      return /*#__PURE__*/(0,jsx_runtime.jsx)(css_file, {
-        "data-testid": "cssIcon"
-      });
-    case FILE_EXTENSIONS.csv:
-      return /*#__PURE__*/(0,jsx_runtime.jsx)(csv_file, {
-        "data-testid": "csvIcon"
-      });
-    default:
-      return /*#__PURE__*/(0,jsx_runtime.jsx)(file, {
-        "data-testid": "defaultFileIcon"
-      });
-  }
-};
-/* harmony default export */ const utils_FileIcon = (FileIcon);
-;// ./src/assets/icons/plus.svg
-var plus_path;
-function plus_extends() { return plus_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, plus_extends.apply(null, arguments); }
-
-function SvgPlus(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", plus_extends({
-    width: 14,
-    height: 14,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), plus_path || (plus_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M6 14V8H0V6h6V0h2v6h6v2H8v6H6z"
-  })));
-}
-/* harmony default export */ const plus = (SvgPlus);
-;// ./src/components/Menus/Sidebar/FilePanel/FilePanel.jsx
-
-
-
-
-
-
-
-
-
-
-
-
-
-var FilePanel = _ref => {
-  var {
-    isMobile
-  } = _ref;
-  var project = (0,external_react_redux_namespaceObject.useSelector)(state => state.editor.project);
-  var openFiles = (0,external_react_redux_namespaceObject.useSelector)(state => state.editor.openFiles);
-  var readOnly = (0,external_react_redux_namespaceObject.useSelector)(state => state.editor.readOnly);
-  var {
-    t
-  } = useTranslation_useTranslation();
-  var dispatch = (0,external_react_redux_namespaceObject.useDispatch)();
-  var switchToFileTab = (panelIndex, fileIndex) => {
-    dispatch(setFocussedFileIndex({
-      panelIndex,
-      fileIndex
-    }));
-  };
-  var openFileTab = fileName => {
-    if (openFiles.flat().includes(fileName)) {
-      var panelIndex = openFiles.map(fileNames => fileNames.includes(fileName)).indexOf(true);
-      var fileIndex = openFiles[panelIndex].indexOf(fileName);
-      switchToFileTab(panelIndex, fileIndex);
-    } else {
-      dispatch(openFile(fileName));
-      switchToFileTab(0, openFiles[0].length);
-    }
-    if (isMobile) {
-      dispatch(hideSidebar());
-    }
-  };
-  var openNewFileModal = () => {
-    dispatch(showNewFileModal());
-  };
-  var buttons = readOnly ? [] : [/*#__PURE__*/(0,jsx_runtime.jsx)(DesignSystemButton_DesignSystemButton, {
-    text: t("filePanel.newFileButton"),
-    textAways: true,
-    icon: /*#__PURE__*/(0,jsx_runtime.jsx)(plus, {}),
-    onClick: openNewFileModal,
-    className: "btn--primary",
-    fill: true
-  })];
-  if (!project || !project.components) {
-    return null;
-  }
-  return /*#__PURE__*/(0,jsx_runtime.jsx)(Sidebar_SidebarPanel, {
-    heading: t("filePanel.files"),
-    buttons: buttons,
-    children: project.components.map((file, i) => /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: "files-list-item-wrapper",
-      children: [/*#__PURE__*/(0,jsx_runtime.jsx)(DesignSystemButton_DesignSystemButton, {
-        className: "files-list-item",
-        onClick: () => openFileTab("".concat(file.name, ".").concat(file.extension)),
-        text: "".concat(file.name, ".").concat(file.extension),
-        icon: /*#__PURE__*/(0,jsx_runtime.jsx)(utils_FileIcon, {
-          ext: file.extension
-        }),
-        type: "tertiary",
-        textAlways: true,
-        small: true
-      }), readOnly || file.name === "main" && file.extension === FILE_EXTENSIONS.py || file.name === "index" && file.extension === FILE_EXTENSIONS.html ? null : /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-        className: "files-list-item__menu",
-        children: /*#__PURE__*/(0,jsx_runtime.jsx)(FileMenu_FileMenu, {
-          fileKey: i,
-          name: file.name,
-          ext: file.extension
-        })
-      })]
-    }, i))
-  });
-};
-/* harmony default export */ const FilePanel_FilePanel = (FilePanel);
-;// ./src/assets/icons/double_arrow_left.svg
-var double_arrow_left_path;
-function double_arrow_left_extends() { return double_arrow_left_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, double_arrow_left_extends.apply(null, arguments); }
-
-function SvgDoubleArrowLeft(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", double_arrow_left_extends({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), double_arrow_left_path || (double_arrow_left_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M11 18l-6-6 6-6 1.4 1.4L7.825 12l4.575 4.6L11 18zm6.6 0l-6-6 6-6L19 7.4 14.425 12 19 16.6 17.6 18z"
-  })));
-}
-/* harmony default export */ const double_arrow_left = (SvgDoubleArrowLeft);
-;// ./src/assets/icons/double_arrow_right.svg
-var double_arrow_right_path;
-function double_arrow_right_extends() { return double_arrow_right_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, double_arrow_right_extends.apply(null, arguments); }
-
-function SvgDoubleArrowRight(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", double_arrow_right_extends({
-    width: 24,
-    height: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), double_arrow_right_path || (double_arrow_right_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M6.4 18L5 16.6 9.575 12 5 7.4 6.4 6l6 6-6 6zm6.6 0l-1.4-1.4 4.575-4.6L11.6 7.4 13 6l6 6-6 6z"
-  })));
-}
-/* harmony default export */ const double_arrow_right = (SvgDoubleArrowRight);
-;// ./src/components/Menus/Sidebar/SidebarBarOption.jsx
-
-
-
-
-var SidebarBarOption = props => {
-  var {
-    Icon,
-    isActive,
-    name,
-    title,
-    toggleOption
-  } = props;
-  var onClickHandler = () => {
-    toggleOption(name);
-    if (name === "file" && window.plausible) {
-      window.plausible("Side menu open project files");
-    }
-  };
-  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-    className: classnames_default()("sidebar__bar-option-wrapper", {
-      "sidebar__bar-option-wrapper--selected": isActive
-    }),
-    children: /*#__PURE__*/(0,jsx_runtime.jsx)(Button_Button, {
-      className: classnames_default()("sidebar__bar-option", {
-        "sidebar__bar-option--selected": isActive
-      }),
-      ButtonIcon: Icon,
-      title: title,
-      onClickHandler: onClickHandler
-    })
-  });
-};
-/* harmony default export */ const Sidebar_SidebarBarOption = (SidebarBarOption);
-;// ./src/assets/html_icon.svg
-const html_icon_namespaceObject = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxyZWN0IHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcng9IjQiIGZpbGw9IiMxMDFCMjkiLz4NCjxwYXRoIGQ9Ik0xMCAxOC43NUwxNy41IDExLjc1VjE1TDExLjg3NSAyMEwxNy41IDI1VjI4LjI1TDEwIDIxLjI1VjE4Ljc1Wk0zMCAyMS4zNzVMMjIuNSAyOC4zNzVWMjVMMjguMjUgMjBMMjIuNSAxNVYxMS42MjVMMzAgMTguNjI1VjIxLjM3NVoiIGZpbGw9IiM4OERERDQiLz4NCjwvc3ZnPg0K";
-;// ./src/assets/python_icon.svg
-const python_icon_namespaceObject = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxyZWN0IHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcng9IjQiIGZpbGw9IiMxMDFCMjkiLz4NCjxwYXRoIGQ9Ik0xOS41MDAxIDE5LjM3NUgxNy4wMDAxQzE1LjI1MDEgMTkuMzc1IDE0LjEyNTEgMjAuNSAxNC4xMjUxIDIyLjI1VjI0LjVDMTQuMTI1MSAyNC43NSAxNC4wMDAxIDI0Ljg3NSAxMy43NTAxIDI0Ljg3NUgxMi42MjUxQzExLjUwMDEgMjQuODc1IDEwLjYyNTEgMjQuMzc1IDEwLjEyNTEgMjMuMzc1QzkuNzUwMTEgMjIuNjI1IDkuNTAwMTEgMjEuODc1IDkuNTAwMTEgMjEuMTI1QzkuMzc1MTEgMTkuNzUgOS4zNzUxMSAxOC4zNzUgOS44NzUxMSAxN0MxMC4yNTAxIDE1Ljg3NSAxMS4wMDAxIDE1IDEyLjI1MDEgMTQuNzVIMTkuNTAwMUMxOS42MjUxIDE0Ljc1IDE5Ljg3NTEgMTQuNzUgMTkuODc1MSAxNC42MjVWMTRDMTkuODc1MSAxNCAxOS42MjUxIDEzLjg3NSAxOS41MDAxIDEzLjg3NUgxNS4yNTAxQzE0Ljg3NTEgMTMuODc1IDE0Ljc1MDEgMTMuNzUgMTQuNzUwMSAxMy4zNzVWMTEuNzVDMTQuNzUwMSAxMC44NzUgMTUuMTI1MSAxMC4yNSAxNS44NzUxIDkuOTk5OThDMTYuNTAwMSA5Ljc0OTk4IDE3LjEyNTEgOS40OTk5OCAxNy43NTAxIDkuMzc0OThDMTkuMjUwMSA5LjEyNDk4IDIwLjc1MDEgOS4xMjQ5OCAyMi4yNTAxIDkuNDk5OThDMjIuODc1MSA5LjYyNDk4IDIzLjUwMDEgOS44NzQ5OCAyNC4wMDAxIDEwLjI1QzI0LjUwMDEgMTAuNzUgMjQuODc1MSAxMS4yNSAyNC43NTAxIDEyVjE2LjVDMjQuNzUwMSAxOC4yNSAyMy43NTAxIDE5LjI1IDIyLjAwMDEgMTkuMjVDMjEuMTI1MSAxOS4zNzUgMjAuMjUwMSAxOS4zNzUgMTkuNTAwMSAxOS4zNzVaTTE2LjAwMDEgMTEuODc1QzE2LjAwMDEgMTIuMzc1IDE2LjM3NTEgMTIuODc1IDE3LjAwMDEgMTIuODc1QzE3LjUwMDEgMTIuODc1IDE4LjAwMDEgMTIuMzc1IDE4LjAwMDEgMTEuODc1QzE4LjAwMDEgMTEuMzc1IDE3LjUwMDEgMTEgMTcuMDAwMSAxMC44NzVDMTYuMzc1MSAxMC44NzUgMTYuMDAwMSAxMS4zNzUgMTYuMDAwMSAxMS44NzVaTTIwLjUwMDEgMjAuNjI1SDIzLjAwMDFDMjQuNzUwMSAyMC42MjUgMjUuODc1MSAxOS41IDI1Ljg3NTEgMTcuNzVWMTUuNUMyNS44NzUxIDE1LjI1IDI2LjAwMDEgMTUuMTI1IDI2LjI1MDEgMTUuMTI1SDI3LjM3NTFDMjguNTAwMSAxNS4xMjUgMjkuMzc1MSAxNS42MjUgMjkuODc1MSAxNi42MjVDMzAuMjUwMSAxNy4zNzUgMzAuNTAwMSAxOC4xMjUgMzAuNTAwMSAxOC44NzVDMzAuNjI1MSAyMC4yNSAzMC42MjUxIDIxLjYyNSAzMC4xMjUxIDIzQzI5Ljc1MDEgMjQuMTI1IDI5LjAwMDEgMjUgMjcuNzUwMSAyNS4yNUgyMC41MDAxQzIwLjM3NTEgMjUuMjUgMjAuMTI1MSAyNS4yNSAyMC4xMjUxIDI1LjM3NVYyNkMyMC4xMjUxIDI2IDIwLjM3NTEgMjYuMTI1IDIwLjUwMDEgMjYuMTI1SDI0Ljc1MDFDMjUuMTI1MSAyNi4xMjUgMjUuMjUwMSAyNi4yNSAyNS4yNTAxIDI2LjYyNVYyOC4yNUMyNS4yNTAxIDI5LjEyNSAyNC44NzUxIDI5Ljc1IDI0LjEyNTEgMzBDMjMuNTAwMSAzMC4yNSAyMi44NzUxIDMwLjUgMjIuMjUwMSAzMC42MjVDMjAuNzUwMSAzMC44NzUgMTkuMjUwMSAzMC44NzUgMTcuNzUwMSAzMC41QzE3LjEyNTEgMzAuMzc1IDE2LjUwMDEgMzAuMTI1IDE2LjAwMDEgMjkuNzVDMTUuNTAwMSAyOS4yNSAxNS4xMjUxIDI4Ljc1IDE1LjI1MDEgMjhWMjMuNUMxNS4yNTAxIDIxLjc1IDE2LjI1MDEgMjAuNzUgMTguMDAwMSAyMC43NUMxOC44NzUxIDIwLjYyNSAxOS43NTAxIDIwLjYyNSAyMC41MDAxIDIwLjYyNVpNMjQuMDAwMSAyOC4xMjVDMjQuMDAwMSAyNy42MjUgMjMuNjI1MSAyNy4xMjUgMjMuMDAwMSAyNy4xMjVDMjIuNTAwMSAyNy4xMjUgMjIuMDAwMSAyNy42MjUgMjIuMDAwMSAyOC4xMjVDMjIuMDAwMSAyOC42MjUgMjIuNTAwMSAyOSAyMy4wMDAxIDI5LjEyNUMyMy42MjUxIDI5LjEyNSAyNC4wMDAxIDI4LjYyNSAyNC4wMDAxIDI4LjEyNVoiIGZpbGw9IiM4OURERDUiLz4NCjwvc3ZnPg0K";
-;// ./src/components/Menus/Sidebar/SidebarBar.jsx
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var SidebarBar = props => {
-  var {
-    menuOptions,
-    option,
-    toggleOption
-  } = props;
-  var project = (0,external_react_redux_namespaceObject.useSelector)(state => state.editor.project);
-  var {
-    t
-  } = useTranslation_useTranslation();
-  var topMenuOptions = menuOptions.filter(menuOption => menuOption.position === "top");
-  var bottomMenuOptions = menuOptions.filter(menuOption => menuOption.position === "bottom");
-  var isMobile = (0,react_responsive.useMediaQuery)({
-    query: MOBILE_MEDIA_QUERY
-  });
-  var expandPopOut = () => {
-    var option = "file";
-    toggleOption(option);
-    if (window.plausible) {
-      // TODO: Make dynamic events for each option or rename this event
-      window.plausible("Expand file pane");
-    }
-  };
-  var collapsePopOut = () => {
-    toggleOption(option);
-    if (window.plausible) {
-      window.plausible("Collapse file pane");
-    }
-  };
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: classnames_default()("sidebar__bar", {
-      "sidebar__bar--selected": option
-    }),
-    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: "sidebar__bar-options--top",
-      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("img", {
-        className: "editor-logo",
-        src: project.project_type === PROJECT_TYPES.python ? python_icon_namespaceObject : html_icon_namespaceObject,
-        alt: t("header.editorLogoAltText")
-      }), topMenuOptions.map((menuOption, i) => /*#__PURE__*/(0,jsx_runtime.jsx)(Sidebar_SidebarBarOption, {
-        Icon: menuOption.icon,
-        title: menuOption.title,
-        isActive: option === menuOption.name,
-        toggleOption: toggleOption,
-        name: menuOption.name
-      }, i))]
-    }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: "sidebar__bar-options--bottom",
-      children: [bottomMenuOptions.map((menuOption, i) => /*#__PURE__*/(0,jsx_runtime.jsx)(Sidebar_SidebarBarOption, {
-        Icon: menuOption.icon,
-        title: menuOption.title,
-        isActive: option === menuOption.name,
-        toggleOption: toggleOption,
-        name: menuOption.name
-      }, i)), !isMobile && (option ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-        className: "sidebar__bar-option-wrapper",
-        children: /*#__PURE__*/(0,jsx_runtime.jsx)(Button_Button, {
-          className: "sidebar__bar-option",
-          ButtonIcon: double_arrow_left,
-          title: t("sidebar.collapse"),
-          onClickHandler: collapsePopOut
-        })
-      }) : /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-        className: "sidebar__bar-option-wrapper",
-        children: /*#__PURE__*/(0,jsx_runtime.jsx)(Button_Button, {
-          className: "sidebar__bar-option",
-          ButtonIcon: double_arrow_right,
-          title: t("sidebar.expand"),
-          onClickHandler: expandPopOut
-        })
-      }))]
-    })]
-  });
-};
-/* harmony default export */ const Sidebar_SidebarBar = (SidebarBar);
 // EXTERNAL MODULE: ./node_modules/cookie/index.js
 var cookie = __webpack_require__(57427);
 ;// ./node_modules/universal-cookie/es6/utils.js
@@ -343440,184 +341512,118 @@ var SettingsPanel = () => {
   });
 };
 /* harmony default export */ const SettingsPanel_SettingsPanel = (SettingsPanel);
-;// ./src/assets/icons/home.svg
-var home_path;
-function home_extends() { return home_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, home_extends.apply(null, arguments); }
+;// ./src/assets/icons/tj-file.svg
+var tj_file_path;
+function tj_file_extends() { return tj_file_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, tj_file_extends.apply(null, arguments); }
 
-function SvgHome(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", home_extends({
-    width: 24,
-    height: 24,
+function SvgTjFile(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", tj_file_extends({
+    width: 22,
+    height: 20,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), home_path || (home_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M6 19h3v-6h6v6h3v-9l-6-4.5L6 10v9zm-2 2V9l8-6 8 6v12h-7v-6h-2v6H4z"
+  }, props), tj_file_path || (tj_file_path = /*#__PURE__*/external_react_.createElement("path", {
+    d: "M10.75 8.75v6m-3-3h6m7 5a2 2 0 01-2 2h-16a2 2 0 01-2-2v-14a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z",
+    stroke: "#33625E",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   })));
 }
-/* harmony default export */ const home = (SvgHome);
-;// ./src/assets/icons/settings.svg
-var settings_path;
-function settings_extends() { return settings_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, settings_extends.apply(null, arguments); }
+/* harmony default export */ const tj_file = (SvgTjFile);
+;// ./src/assets/icons/tj-activity.svg
+var tj_activity_path;
+function tj_activity_extends() { return tj_activity_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, tj_activity_extends.apply(null, arguments); }
 
-function SvgSettings(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", settings_extends({
+function SvgTjActivity(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", tj_activity_extends({
     width: 24,
     height: 24,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), settings_path || (settings_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M9.25 22l-.4-3.2a3.79 3.79 0 01-.613-.3 8.266 8.266 0 01-.562-.375L4.7 19.375l-2.75-4.75 2.575-1.95a2.387 2.387 0 01-.025-.338v-.675c0-.108.008-.22.025-.337L1.95 9.375l2.75-4.75 2.975 1.25c.183-.133.375-.258.575-.375.2-.117.4-.217.6-.3l.4-3.2h5.5l.4 3.2c.217.083.42.183.612.3.192.117.38.242.563.375l2.975-1.25 2.75 4.75-2.575 1.95c.017.117.025.23.025.338v.675c0 .108-.017.22-.05.337l2.575 1.95-2.75 4.75-2.95-1.25a6.842 6.842 0 01-.575.375c-.2.117-.4.217-.6.3l-.4 3.2h-5.5zm2.8-6.5c.967 0 1.792-.342 2.475-1.025A3.372 3.372 0 0015.55 12c0-.967-.342-1.792-1.025-2.475A3.373 3.373 0 0012.05 8.5c-.983 0-1.813.342-2.488 1.025A3.393 3.393 0 008.55 12c0 .967.337 1.792 1.012 2.475.676.683 1.505 1.025 2.488 1.025zm0-2c-.417 0-.77-.146-1.063-.438A1.446 1.446 0 0110.55 12c0-.417.146-.77.438-1.063a1.446 1.446 0 011.062-.437c.417 0 .77.146 1.063.438.291.291.437.645.437 1.062 0 .417-.146.77-.438 1.063a1.447 1.447 0 01-1.062.437zM11 20h1.975l.35-2.65c.517-.133.996-.33 1.438-.588.441-.258.845-.57 1.212-.937l2.475 1.025.975-1.7-2.15-1.625c.083-.233.142-.48.175-.738a6.153 6.153 0 000-1.575 3.535 3.535 0 00-.175-.737l2.15-1.625-.975-1.7-2.475 1.05a5.556 5.556 0 00-1.213-.962 5.607 5.607 0 00-1.437-.588L13 4h-1.975l-.35 2.65c-.517.133-.996.33-1.438.587-.441.259-.845.571-1.212.938L5.55 7.15l-.975 1.7 2.15 1.6c-.083.25-.142.5-.175.75s-.05.517-.05.8c0 .267.017.525.05.775s.092.5.175.75l-2.15 1.625.975 1.7 2.475-1.05c.367.383.77.704 1.212.962.442.259.921.455 1.438.588L11 20z"
+  }, props), tj_activity_path || (tj_activity_path = /*#__PURE__*/external_react_.createElement("path", {
+    d: "M12 7a4 4 0 014-4h5a1 1 0 011 1v13a1 1 0 01-1 1h-6a3 3 0 00-3 3m0-14v14m0-14a4 4 0 00-4-4H3a1 1 0 00-1 1v13a1 1 0 001 1h6a3 3 0 013 3m0-14v14",
+    stroke: "#33625E",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   })));
 }
-/* harmony default export */ const settings = (SvgSettings);
-;// ./src/assets/stylesheets/ProjectsPanel.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/assets/stylesheets/ProjectInfo.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/components/Menus/Sidebar/ProjectsPanel/ProjectInfo/ProjectInfo.jsx
-
-
-
-
-
-
-var ProjectInfo = _ref => {
-  var {
-    className
-  } = _ref;
-  var project_type = (0,external_react_redux_namespaceObject.useSelector)(state => state.editor.project.project_type);
-  var {
-    t
-  } = useTranslation_useTranslation();
-  return /*#__PURE__*/(0,jsx_runtime.jsx)(jsx_runtime.Fragment, {
-    children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: classnames_default()("project-info", className),
-      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("label", {
-        htmlFor: "project_type",
-        className: "project-type__label",
-        children: t("projectsPanel.projectTypeLabel")
-      }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-        className: "project-type__text",
-        children: t("projectTypes.".concat(project_type))
-      })]
-    })
-  });
-};
-/* harmony default export */ const ProjectInfo_ProjectInfo = (ProjectInfo);
-;// ./src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.jsx
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var ProjectsPanel = () => {
-  var {
-    t
-  } = useTranslation_useTranslation();
-  var isLoggedIn = (0,external_react_redux_namespaceObject.useSelector)(state => {
-    var _state$auth;
-    return state === null || state === void 0 || (_state$auth = state.auth) === null || _state$auth === void 0 ? void 0 : _state$auth.user;
-  });
-  var isMobile = (0,react_responsive.useMediaQuery)({
-    query: MOBILE_MEDIA_QUERY
-  });
-  var readOnly = (0,external_react_redux_namespaceObject.useSelector)(state => state.editor.readOnly);
-  var saveOptions = /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
-    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: "projects-panel__save",
-      children: /*#__PURE__*/(0,jsx_runtime.jsx)(SaveButton_SaveButton, {
-        className: "projects-panel__save-button"
-      })
-    }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: "projects-panel__save-status",
-      children: /*#__PURE__*/(0,jsx_runtime.jsx)(SaveStatus_SaveStatus, {
-        isMobile: isMobile
-      })
-    })]
-  });
-  var navigateToProjectsPage = () => {
-    document.dispatchEvent(navigateToProjectsPageEvent);
-  };
-  var buttons = isLoggedIn ? [/*#__PURE__*/(0,jsx_runtime.jsx)(DesignSystemButton_DesignSystemButton, {
-    className: "btn--primary projects-panel__your-projects-button",
-    onClick: navigateToProjectsPage,
-    text: t("projectsPanel.yourProjectsButton"),
-    textAlways: true
-  }, "your-projects")] : [];
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)(Sidebar_SidebarPanel, {
-    heading: t("projectsPanel.projects"),
-    buttons: buttons,
-    className: "projects-panel-wrapper",
-    children: [/*#__PURE__*/(0,jsx_runtime.jsx)(ProjectName_ProjectName, {
-      showLabel: true,
-      className: "projects-panel__item",
-      editable: !readOnly
-    }), /*#__PURE__*/(0,jsx_runtime.jsx)(ProjectInfo_ProjectInfo, {
-      className: "projects-panel__item"
-    }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: "projects-panel__button",
-      children: /*#__PURE__*/(0,jsx_runtime.jsx)(DownloadButton_DownloadButton, {
-        buttonText: t("header.download"),
-        className: "projects-panel__download-button",
-        Icon: download
-      })
-    }), isMobile && saveOptions]
-  });
-};
-/* harmony default export */ const ProjectsPanel_ProjectsPanel = (ProjectsPanel);
-;// ./src/assets/stylesheets/DownloadPanel.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.jsx
-
-
-
-
-
-
-
-
-
+/* harmony default export */ const tj_activity = (SvgTjActivity);
+;// ./src/assets/icons/tj-font.svg
+var tj_font_path, tj_font_path2, _g;
+function tj_font_extends() { return tj_font_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, tj_font_extends.apply(null, arguments); }
 
+function SvgTjFont(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", tj_font_extends({
+    width: 27,
+    height: 25,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), tj_font_path || (tj_font_path = /*#__PURE__*/external_react_.createElement("path", {
+    d: "M19.46 6.359L14.505 20H12.48l5.706-14.967h1.305l-.03 1.326zM23.613 20L18.648 6.359l-.03-1.326h1.305L25.649 20h-2.036zm-.257-5.54v1.623h-8.409V14.46h8.41z",
+    fill: "#33625E"
+  })), /*#__PURE__*/external_react_.createElement("mask", {
+    id: "tj-font_svg__a",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: 0,
+    y: 9,
+    width: 15,
+    height: 13
+  }, tj_font_path2 || (tj_font_path2 = /*#__PURE__*/external_react_.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.366 21.061l3.828-11.483-10.366.545L0 21.606l10.366-.545z",
+    fill: "#fff"
+  }))), _g || (_g = /*#__PURE__*/external_react_.createElement("g", {
+    mask: "url(#tj-font_svg__a)"
+  }, /*#__PURE__*/external_react_.createElement("path", {
+    d: "M10.062 11.574l-2.785 8.082H5.593l3.509-9.324h1.076l-.116 1.242zm2.331 8.082l-2.792-8.082-.121-1.242h1.082l3.522 9.324h-1.69zm-.134-3.458v1.274H7.187v-1.274h5.072z",
+    fill: "#33625E"
+  }))));
+}
+/* harmony default export */ const tj_font = (SvgTjFont);
+;// ./src/assets/icons/tj-home.svg
+var tj_home_path;
+function tj_home_extends() { return tj_home_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, tj_home_extends.apply(null, arguments); }
 
+function SvgTjHome(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", tj_home_extends({
+    width: 20,
+    height: 22,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), tj_home_path || (tj_home_path = /*#__PURE__*/external_react_.createElement("path", {
+    d: "M6.75 20.75v-10h6v10m-12-13l9-7 9 7v11a2 2 0 01-2 2h-14a2 2 0 01-2-2v-11z",
+    stroke: "#33625E",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const tj_home = (SvgTjHome);
+;// ./src/assets/icons/tj-playground.svg
+var tj_playground_path;
+function tj_playground_extends() { return tj_playground_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, tj_playground_extends.apply(null, arguments); }
 
-var DownloadPanel = () => {
-  var {
-    t
-  } = useTranslation_useTranslation();
-  var projectOwner = false;
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)(Sidebar_SidebarPanel, {
-    heading: t("downloadPanel.heading"),
-    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: "download-panel__download-section",
-      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("p", {
-        className: "download-panel__hint",
-        children: t("downloadPanel.downloadHint")
-      }), /*#__PURE__*/(0,jsx_runtime.jsx)(DownloadButton_DownloadButton, {
-        buttonText: t("downloadPanel.downloadButton"),
-        className: "btn btn--secondary download-panel__button",
-        Icon: download,
-        fill: true
-      })]
-    }), !projectOwner && /*#__PURE__*/(0,jsx_runtime.jsx)(SaveButton_SaveButton, {
-      fill: true
-    })]
-  });
-};
-/* harmony default export */ const DownloadPanel_DownloadPanel = (DownloadPanel);
+function SvgTjPlayground(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", tj_playground_extends({
+    width: 20,
+    height: 19,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), tj_playground_path || (tj_playground_path = /*#__PURE__*/external_react_.createElement("path", {
+    d: "M8.707 1.307a1 1 0 011.793 0l1.961 3.973a1 1 0 00.752.547l4.387.64a1 1 0 01.553 1.707l-3.173 3.09a1 1 0 00-.288.885l.749 4.364a1 1 0 01-1.451 1.054l-3.921-2.062a1 1 0 00-.93 0l-3.922 2.062a1 1 0 01-1.45-1.054l.748-4.364a1 1 0 00-.288-.885l-3.173-3.09a1 1 0 01.553-1.706l4.387-.641a1 1 0 00.752-.547l1.96-3.973z",
+    stroke: "#33625E",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const tj_playground = (SvgTjPlayground);
 ;// ./src/components/Menus/Sidebar/Sidebar.jsx
 
 
@@ -343634,60 +341640,60 @@ var DownloadPanel = () => {
 
 
 
-
-
 var Sidebar = _ref => {
   var {
-    options = [],
-    plugins = []
+    options = []
   } = _ref;
-  var {
-    t
-  } = useTranslation_useTranslation();
   var menuOptions = [{
-    name: "projects",
-    icon: home,
-    title: t("sidebar.projects"),
-    position: "top",
-    panel: ProjectsPanel_ProjectsPanel
+    name: "files",
+    icon: tj_file,
+    title: "Files",
+    position: "top"
+    // panel: FilePanel,
   }, {
-    name: "file",
-    icon: utils_FileIcon,
-    title: t("sidebar.file"),
-    position: "top",
-    panel: FilePanel_FilePanel
+    name: "activity",
+    icon: tj_activity,
+    title: "Activity",
+    position: "top"
   }, {
-    name: "download",
-    icon: save,
-    title: t("sidebar.download"),
-    position: "top",
-    panel: DownloadPanel_DownloadPanel
+    name: "playground",
+    icon: tj_playground,
+    title: "Playground",
+    position: "top"
   }, {
-    name: "settings",
-    icon: settings,
-    title: t("sidebar.settings"),
+    name: "home",
+    icon: tj_home,
+    title: "Home",
+    position: "top"
+  }, {
+    name: "fonts",
+    icon: tj_font,
+    title: "Fonts",
     position: "bottom",
     panel: SettingsPanel_SettingsPanel
+  },
+  //should be introduced in the later phases
+  // {
+  //   name: "theme",
+  //   icon: ThemeIcon,
+  //   title: "Theme",
+  //   position: "bottom",
+  //   panel: SettingsPanel,
+  // },
+  {
+    name: "user",
+    buttonText: "MF",
+    title: "User account",
+    position: "bottom"
   }].filter(option => options.includes(option.name));
-  var pluginMenuOptions = plugins.map(plugin => {
-    return {
-      name: plugin.name,
-      icon: plugin.icon,
-      title: plugin.title,
-      position: plugin.position || "top",
-      panel: () => /*#__PURE__*/(0,jsx_runtime.jsx)(Sidebar_SidebarPanel, {
-        heading: plugin.heading,
-        buttons: plugin.buttons || [],
-        children: plugin.panel()
-      })
-    };
-  });
-  menuOptions = [...menuOptions, ...pluginMenuOptions];
   var isMobile = (0,react_responsive.useMediaQuery)({
     query: MOBILE_MEDIA_QUERY
   });
-  var autoOpenPlugin = plugins === null || plugins === void 0 ? void 0 : plugins.find(plugin => plugin.autoOpen);
-  var [option, setOption] = (0,external_react_.useState)(autoOpenPlugin ? autoOpenPlugin.name : "file");
+  var [option, setOption] = (0,external_react_.useState)(() => {
+    var _menuOptions$find;
+    var defaultOption = ((_menuOptions$find = menuOptions.find(o => o.position === "top")) === null || _menuOptions$find === void 0 ? void 0 : _menuOptions$find.name) || "files";
+    return menuOptions.length > 0 ? defaultOption : null;
+  });
   var toggleOption = newOption => {
     if (option !== newOption) {
       setOption(newOption);
@@ -343695,13 +341701,11 @@ var Sidebar = _ref => {
       setOption(null);
     }
   };
-  var optionDict = menuOptions.find(menuOption => {
-    return menuOption.name === option;
-  });
-  var CustomSidebarPanel = optionDict && optionDict.panel ? optionDict.panel : () => {};
+  var activeOption = menuOptions.find(opt => opt.name === option);
+  var CustomSidebarPanel = (activeOption === null || activeOption === void 0 ? void 0 : activeOption.panel) || (() => null);
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: classnames_default()("sidebar", {
-      "sidebar--mobile": isMobile
+    className: classnames_default()(Sidebar_styles_module.sidebar, {
+      [Sidebar_styles_module.mobile]: isMobile
     }),
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)(Sidebar_SidebarBar, {
       menuOptions: menuOptions,
@@ -348874,7 +346878,7 @@ const space = 32;
 const pageUp = 33;
 const pageDown = 34;
 const end = 35;
-const dnd_esm_home = 36;
+const home = 36;
 const arrowLeft = 37;
 const arrowUp = 38;
 const arrowRight = 39;
@@ -349136,7 +347140,7 @@ function noop$1() {}
 const scrollJumpKeys = {
   [pageDown]: true,
   [pageUp]: true,
-  [dnd_esm_home]: true,
+  [home]: true,
   [end]: true
 };
 function getDraggingBindings(actions, stop) {
@@ -381225,7 +379229,7 @@ const pseudoClasses = /*@__PURE__*/[
     "required", "right", "root", "scope", "selection", "slotted", "target",
     "target-text", "valid", "visited", "where"
 ].map(name => ({ type: "class", label: name }));
-const dist_values = /*@__PURE__*/[
+const values = /*@__PURE__*/[
     "above", "absolute", "activeborder", "additive", "activecaption", "after-white-space",
     "ahead", "alias", "all", "all-scroll", "alphabetic", "alternate", "always",
     "antialiased", "appworkspace", "asterisks", "attr", "auto", "auto-flow", "avoid", "avoid-column",
@@ -381390,7 +379394,7 @@ const defineCSSCompletionSource = (isVariable) => context => {
         (isDash || node.name == "TagName") && /^(Block|Styles)$/.test(node.resolve(node.to).name))
         return { from: node.from, options: properties(), validFor: dist_identifier };
     if (node.name == "ValueName")
-        return { from: node.from, options: dist_values, validFor: dist_identifier };
+        return { from: node.from, options: values, validFor: dist_identifier };
     if (node.name == "PseudoClassName")
         return { from: node.from, options: pseudoClasses, validFor: dist_identifier };
     if (isVariable(node) || (context.explicit || isDash) && isVarArg(node, state.doc))
@@ -381411,7 +379415,7 @@ const defineCSSCompletionSource = (isVariable) => context => {
     if (before && before.name == ":" && above.name == "PseudoClassSelector")
         return { from: pos, options: pseudoClasses, validFor: dist_identifier };
     if (before && before.name == ":" && above.name == "Declaration" || above.name == "ArgList")
-        return { from: pos, options: dist_values, validFor: dist_identifier };
+        return { from: pos, options: values, validFor: dist_identifier };
     if (above.name == "Block" || above.name == "Styles")
         return { from: pos, options: properties(), validFor: dist_identifier };
     return null;
@@ -381477,7 +379481,7 @@ const noSemi = 312,
 const javascript_dist_space = [9, 10, 11, 12, 13, 32, 133, 160, 5760, 8192, 8193, 8194, 8195, 8196, 8197, 8198, 8199, 8200,
                8201, 8202, 8232, 8233, 8239, 8287, 12288];
 
-const braceR = 125, semicolon = 59, dist_slash = 47, star = 42, dist_plus = 43, minus = 45, lt = 60, comma = 44,
+const braceR = 125, semicolon = 59, dist_slash = 47, star = 42, plus = 43, minus = 45, lt = 60, comma = 44,
       dist_question = 63, dot = 46, dist_bracketL = 91;
 
 const trackNewline = new ContextTracker({
@@ -381508,7 +379512,7 @@ const noSemicolonType = new ExternalTokenizer((input, stack) => {
 
 const operatorToken = new ExternalTokenizer((input, stack) => {
   let {next} = input;
-  if (next == dist_plus || next == minus) {
+  if (next == plus || next == minus) {
     input.advance();
     if (next == input.next) {
       input.advance();
@@ -383954,8 +381958,7 @@ var Project = props => {
     nameEditable = true,
     withProjectbar = true,
     withSidebar = true,
-    sidebarOptions = [],
-    sidebarPlugins = []
+    sidebarOptions = []
   } = props;
   var saving = (0,external_react_redux_namespaceObject.useSelector)(state => state.editor.saving);
   var autosave = (0,external_react_redux_namespaceObject.useSelector)(state => state.editor.lastSaveAutosave);
@@ -383986,8 +381989,7 @@ var Project = props => {
     children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       className: "proj-container",
       children: [withSidebar && /*#__PURE__*/(0,jsx_runtime.jsx)(Sidebar_Sidebar, {
-        options: sidebarOptions,
-        plugins: sidebarPlugins
+        options: sidebarOptions
       }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
         className: "project-wrapper",
         ref: containerRef,
@@ -384910,7 +382912,7 @@ var TextJamEditor = function TextJamEditor() {
   var defaultProps = {
     withProjectbar: true,
     withSidebar: true,
-    sidebarOptions: ["file", "download", "settings"],
+    sidebarOptions: ["files", "activity", "playground", "home", "fonts", "theme", "user"],
     code: "",
     sidebarPlugins: []
   };