@banch0u/core-project-test-repository 1.8.3 → 1.9.0

package/dist/layout/Header/AppSelect/index.module.scss

@@ -0,0 +1,68 @@
+.accordion {
+  background: var(--blue);
+  width: 270px;
+}
+
+.accordionHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  span {
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--white);
+    height: auto;
+  }
+  div {
+    height: 30px;
+    filter: brightness(0) invert(1) !important;
+  }
+  svg {
+    width: 30px !important;
+    height: 30px !important;
+  }
+}
+
+.accordionBody {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: var(--blue);
+  padding: 10px;
+  top: 81px !important;
+  width: 250px !important;
+  border-radius: 0 0 6px 6px;
+}
+
+.accordionOption {
+  background-color: var(--white);
+  color: var(--blue);
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  border-radius: 6px;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 100%;
+  letter-spacing: 0%;
+
+  cursor: pointer;
+  text-decoration: none;
+  transition: background 0.2s ease;
+
+  svg {
+    width: 26px;
+    height: 26px;
+  }
+
+  &:hover {
+    background-color: var(--lightBlue);
+  }
+  &:hover {
+    span {
+      color: var(--blue);
+    }
+  }
+}

package/dist/layout/Header/index.js

@@ -1,104 +1,26 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState } from "react";
 import style from "./index.module.scss";
-import { DsgLogo } from "../../assets/icons";
 import ProfileOptions from "../../components/ProfileOptions";
-import { Link } from "react-router-dom";
-import { PLATFORM_PATH } from "../../utils/path";
-import { useDispatch, useSelector } from "react-redux";
-import { getCompanyInfo } from "../../store/slices/companyInfo";
-import api from "../../utils/axios";
+import AppSelect from "./AppSelect";
 var Header = function Header() {
   var _useState = useState(localStorage.getItem("theme") || "light"),
     _useState2 = _slicedToArray(_useState, 2),
     theme = _useState2[0],
     setTheme = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    imageSrc = _useState4[0],
-    setImageSrc = _useState4[1];
-  var dispatch = useDispatch();
-  var companyInfo = useSelector(function (state) {
-    return state.companyInfo.companyInfo;
-  });
   var updateTheme = function updateTheme() {
     var newTheme = localStorage.getItem("theme") || "light";
     setTheme(newTheme);
   };
-  var getBase64FromURL = useCallback(/*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {
-      var res;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            _context.next = 3;
-            return api.get(url);
-          case 3:
-            res = _context.sent;
-            return _context.abrupt("return", res === null || res === void 0 ? void 0 : res.data);
-          case 7:
-            _context.prev = 7;
-            _context.t0 = _context["catch"](0);
-            console.error("Error loading logo:", _context.t0);
-            return _context.abrupt("return", null);
-          case 11:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 7]]);
-    }));
-    return function (_x) {
-      return _ref.apply(this, arguments);
-    };
-  }(), []);
   useEffect(function () {
-    dispatch(getCompanyInfo());
     window.addEventListener("themeChange", updateTheme);
     return function () {
       return window.removeEventListener("themeChange", updateTheme);
     };
-  }, [dispatch]);
-  useEffect(function () {
-    var fetchImage = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var _companyInfo$;
-        var base64;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              if (!(companyInfo !== null && companyInfo !== void 0 && (_companyInfo$ = companyInfo[0]) !== null && _companyInfo$ !== void 0 && _companyInfo$.filePath)) {
-                _context2.next = 5;
-                break;
-              }
-              _context2.next = 3;
-              return getBase64FromURL(companyInfo[0].filePath);
-            case 3:
-              base64 = _context2.sent;
-              setImageSrc(base64);
-            case 5:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      return function fetchImage() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    fetchImage();
-  }, [companyInfo, getBase64FromURL]);
+  }, []);
   return /*#__PURE__*/React.createElement("header", {
-    className: style.header
-  }, /*#__PURE__*/React.createElement(Link, {
-    to: PLATFORM_PATH
-  }, imageSrc ? /*#__PURE__*/React.createElement("img", {
-    src: imageSrc,
-    alt: "Company Logo"
-  }) : theme === "dark" ? /*#__PURE__*/React.createElement(DsgLogo, {
-    dark: true
-  }) : /*#__PURE__*/React.createElement(DsgLogo, null)), /*#__PURE__*/React.createElement(ProfileOptions, null));
+    className: style.header,
+    "data-no-invert": true
+  }, /*#__PURE__*/React.createElement(AppSelect, null), /*#__PURE__*/React.createElement(ProfileOptions, null));
 };
 export default Header;

package/dist/layout/Header/index.module.scss

@@ -1,19 +1,15 @@
 .header {
-  height: 84px;
-  background: #fff;
+  height: 81px;
+  background: var(--blue);
   align-items: center;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 20px;
-  border-bottom: 1px solid #c4c4c4;
+  padding: 0 17px;
   z-index: 1;
-  svg {
-    width: 123px;
-    height: auto;
-  }
-  img {
-    width: 95px;
-    height: auto;
-  }
+  position: relative;
+  overflow: visible; // ✅ allows dropdowns to escape
+  // z-index: 10;
+}
+.header {
 }

package/dist/layout/Portal/index.js

@@ -0,0 +1,23 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+// src/components/Portal.js
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+var Portal = function Portal(_ref) {
+  var children = _ref.children;
+  var elRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    mounted = _useState2[0],
+    setMounted = _useState2[1];
+  useEffect(function () {
+    var el = document.createElement("div");
+    elRef.current = el;
+    document.body.appendChild(el);
+    setMounted(true);
+    return function () {
+      document.body.removeChild(el);
+    };
+  }, []);
+  return mounted ? /*#__PURE__*/createPortal(children, elRef.current) : null;
+};
+export default Portal;

package/dist/layout/QuestionnairesLayout/index.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Layout } from "antd";
+import { Outlet } from "react-router-dom";
+import QuestionnairesSidebar from "../QuestionnairesSidebar";
+import style from "./index.module.scss";
+var Content = Layout.Content;
+var QuestionnairesLayout = function QuestionnairesLayout(_ref) {
+  var allowed = _ref.allowed;
+  return /*#__PURE__*/React.createElement(Layout, {
+    className: style.layout
+  }, /*#__PURE__*/React.createElement(QuestionnairesSidebar, {
+    allowed: allowed
+  }), /*#__PURE__*/React.createElement(Content, {
+    className: style.content
+  }, /*#__PURE__*/React.createElement(Outlet, null)));
+};
+export default QuestionnairesLayout;

package/dist/layout/QuestionnairesSidebar/index.js

@@ -0,0 +1,126 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import style from "./index.module.scss";
+import { Layout, Menu, Input } from "antd";
+import { DOCUMENT_CIRCULATION_QUESTIONNAIRES_APPLICATION_FORMS, DOCUMENT_CIRCULATION_QUESTIONNAIRES_COUNTRIES, DOCUMENT_CIRCULATION_QUESTIONNAIRES_DOCUMENT_RECIEVE_METHODS, DOCUMENT_CIRCULATION_QUESTIONNAIRES_DOCUMENT_TYPES, DOCUMENT_CIRCULATION_QUESTIONNAIRES_DOCUMENT_WHOM, DOCUMENT_CIRCULATION_QUESTIONNAIRES_EXECUTION_RULES, DOCUMENT_CIRCULATION_QUESTIONNAIRES_MARGIN_NOTE_TEXTS, DOCUMENT_CIRCULATION_QUESTIONNAIRES_ORGANIZATIONS, DOCUMENT_CIRCULATION_QUESTIONNAIRES_STREETS, DOCUMENT_CIRCULATION_QUESTIONNAIRES_STRUCTURES, DOCUMENT_CIRCULATION_QUESTIONNAIRES_SUBTOPIC, DOCUMENT_CIRCULATION_QUESTIONNAIRES_TOPIC, SETTINGS_QUESTIONNAIRES_APPLICATION_FORMS, SETTINGS_QUESTIONNAIRES_COUNTRIES, SETTINGS_QUESTIONNAIRES_DOCUMENT_RECIEVE_METHODS, SETTINGS_QUESTIONNAIRES_DOCUMENT_TYPES, SETTINGS_QUESTIONNAIRES_DOCUMENT_WHOM, SETTINGS_QUESTIONNAIRES_EXECUTION_RULES, SETTINGS_QUESTIONNAIRES_MARGIN_NOTE_TEXTS, SETTINGS_QUESTIONNAIRES_ORGANIZATIONS, SETTINGS_QUESTIONNAIRES_STREETS, SETTINGS_QUESTIONNAIRES_STRUCTURES, SETTINGS_QUESTIONNAIRES_SUBTOPIC, SETTINGS_QUESTIONNAIRES_TOPIC } from "../../utils/path";
+import { SearchIcon } from "../../assets/icons";
+var Sider = Layout.Sider;
+var SubMenu = Menu.SubMenu;
+var QuestionnairesSidebar = function QuestionnairesSidebar(_ref) {
+  var selectedKey = _ref.selectedKey,
+    _ref$allowed = _ref.allowed,
+    allowed = _ref$allowed === void 0 ? [] : _ref$allowed;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchQuery = _useState2[0],
+    setSearchQuery = _useState2[1];
+  var location = useLocation();
+  var mainPath = "/".concat(location.pathname.split("/")[1]);
+  var items = [{
+    key: "topic",
+    label: "Mövzular",
+    link: mainPath === "/settings" ? SETTINGS_QUESTIONNAIRES_TOPIC : DOCUMENT_CIRCULATION_QUESTIONNAIRES_TOPIC
+  }, {
+    key: "subtopic",
+    label: "Alt mövzular",
+    link: mainPath === "/settings" ? SETTINGS_QUESTIONNAIRES_SUBTOPIC : DOCUMENT_CIRCULATION_QUESTIONNAIRES_SUBTOPIC
+  }, {
+    key: "executionRules",
+    label: "İcra qaydaları",
+    link: mainPath === "/settings" ? SETTINGS_QUESTIONNAIRES_EXECUTION_RULES : DOCUMENT_CIRCULATION_QUESTIONNAIRES_EXECUTION_RULES
+  }, {
+    key: "document-recieve-methods",
+    label: "Daxil olma yolları",
+    link: mainPath === "/settings" ? SETTINGS_QUESTIONNAIRES_DOCUMENT_RECIEVE_METHODS : DOCUMENT_CIRCULATION_QUESTIONNAIRES_DOCUMENT_RECIEVE_METHODS
+  }, {
+    key: "documentType",
+    label: "Sənəd Növləri",
+    link: mainPath === "/settings" ? SETTINGS_QUESTIONNAIRES_DOCUMENT_TYPES : DOCUMENT_CIRCULATION_QUESTIONNAIRES_DOCUMENT_TYPES
+  }, {
+    key: "country",
+    label: "Ölkələr",
+    link: mainPath === "/settings" ? SETTINGS_QUESTIONNAIRES_COUNTRIES : DOCUMENT_CIRCULATION_QUESTIONNAIRES_COUNTRIES
+  }, {
+    key: "street",
+    label: "Küçələr",
+    link: mainPath === "/settings" ? SETTINGS_QUESTIONNAIRES_STREETS : DOCUMENT_CIRCULATION_QUESTIONNAIRES_STREETS
+  }, {
+    key: "organization",
+    label: "Təşkilatlar",
+    link: mainPath === "/settings" ? SETTINGS_QUESTIONNAIRES_ORGANIZATIONS : DOCUMENT_CIRCULATION_QUESTIONNAIRES_ORGANIZATIONS
+  }, {
+    key: "structure",
+    label: "Strukturlar",
+    link: mainPath === "/settings" ? SETTINGS_QUESTIONNAIRES_STRUCTURES : DOCUMENT_CIRCULATION_QUESTIONNAIRES_STRUCTURES
+  }, {
+    key: "application_form",
+    label: "Müraciət formaları",
+    link: mainPath === "/settings" ? SETTINGS_QUESTIONNAIRES_APPLICATION_FORMS : DOCUMENT_CIRCULATION_QUESTIONNAIRES_APPLICATION_FORMS
+  }, {
+    key: "document_whom",
+    label: "Şəxslər",
+    link: mainPath === "/settings" ? SETTINGS_QUESTIONNAIRES_DOCUMENT_WHOM : DOCUMENT_CIRCULATION_QUESTIONNAIRES_DOCUMENT_WHOM
+  }, {
+    key: "margin_note_texts",
+    label: "Dərkənar mətni",
+    link: mainPath === "/settings" ? SETTINGS_QUESTIONNAIRES_MARGIN_NOTE_TEXTS : DOCUMENT_CIRCULATION_QUESTIONNAIRES_MARGIN_NOTE_TEXTS
+  }, {
+    key: "brands",
+    label: "Brendlər",
+    link: mainPath === "/settings" ? SETTINGS_QUESTIONNAIRES_MARGIN_NOTE_TEXTS : DOCUMENT_CIRCULATION_QUESTIONNAIRES_MARGIN_NOTE_TEXTS
+  }];
+  var sortedItems = items.sort(function (a, b) {
+    return a.label.localeCompare(b.label);
+  });
+  var filteredItems = sortedItems.filter(function (item) {
+    return item.label.toLowerCase().includes(searchQuery.toLowerCase()) && allowed[item.key];
+  } // ✅ Check if allowed true
+  );
+  var defaultOpenKeys = items.filter(function (item) {
+    return item.children && item.children.some(function (child) {
+      return child.key === selectedKey;
+    });
+  }).map(function (item) {
+    return item.key;
+  });
+  var renderMenuItems = function renderMenuItems(items) {
+    return items.map(function (item) {
+      return /*#__PURE__*/React.createElement(Menu.Item, {
+        key: item.key,
+        icon: item.icon
+      }, /*#__PURE__*/React.createElement(Link, {
+        to: item.link
+      }, item.label));
+    });
+  };
+  return /*#__PURE__*/React.createElement(Sider, {
+    width: 256,
+    className: style.sidebar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.logo
+  }, /*#__PURE__*/React.createElement("h2", null, "Soraq\xE7alar")), /*#__PURE__*/React.createElement("div", {
+    className: style.search
+  }, /*#__PURE__*/React.createElement(Input, {
+    onChange: function onChange(e) {
+      var _e$target;
+      return setSearchQuery(e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
+    },
+    placeholder: "Axtar",
+    className: style.search_input,
+    suffix: /*#__PURE__*/React.createElement("div", {
+      className: style.search_icon
+    }, /*#__PURE__*/React.createElement(SearchIcon, null))
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "questionnaires_menu",
+    style: {
+      overflowY: "auto",
+      maxHeight: "calc(100vh - 325px)"
+    }
+  }, /*#__PURE__*/React.createElement(Menu, {
+    defaultSelectedKeys: [selectedKey],
+    defaultOpenKeys: defaultOpenKeys,
+    className: style.menu
+  }, renderMenuItems(filteredItems))));
+};
+export default QuestionnairesSidebar;

package/dist/layout/QuestionnairesSidebar/index.module.scss

@@ -0,0 +1,76 @@
+.sidebar {
+  background: #fff !important;
+  border-radius: 12px;
+  border: none;
+  position: relative;
+  margin: 20px;
+  margin-right: 0;
+  .logo {
+    margin-top: 20px;
+    margin-bottom: 18px;
+    text-align: center;
+    h2 {
+      font-family: Inter;
+      font-size: 24px;
+      font-weight: 600;
+      line-height: 20px;
+      text-align: center;
+      color: var(--darkBlueColor);
+    }
+  }
+  .search {
+    padding: 0 14px;
+    margin-bottom: 6px;
+    .search_input {
+      width: 100%;
+      margin: 0 auto;
+      display: flex;
+      justify-content: center;
+      height: 36px;
+      font-size: 16px !important;
+      font-weight: 500 !important;
+      line-height: 24px !important;
+      text-align: left !important;
+      border-radius: 6px;
+      padding: 6px 10px !important;
+      .search_icon {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        svg {
+          path {
+            transition: 250ms;
+          }
+        }
+        svg:hover {
+          path {
+            stroke: var(--darkBlueColor);
+            transition: 250ms;
+          }
+        }
+      }
+    }
+  }
+  .menu {
+    background: #fff;
+    border: none;
+    border-right: 0;
+    border-radius: 12px 12px 0 0;
+    margin-top: 0px;
+    li {
+      margin-inline: 14px;
+      width: 90%;
+      border-radius: 4px;
+      color: #828282;
+      // background: #f2f2f2;
+      font-family: Inter;
+      font-size: 18px;
+      font-weight: 500;
+      text-align: left;
+      height: 42px;
+      span {
+        margin-left: 8px;
+      }
+    }
+  }
+}

package/dist/layout/Sidebar/index.js

@@ -0,0 +1,147 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState, useCallback } from "react";
+import { Link, useLocation } from "react-router-dom";
+import Cookies from "js-cookie";
+import style from "./index.module.scss";
+import { Layout, Menu } from "antd";
+import { DsgLogo, DsgLogoEmblem } from "../../assets/icons";
+import { PLATFORM_PATH } from "../../utils/path";
+import { useDispatch, useSelector } from "react-redux";
+import { getCompanyInfo } from "../../store/slices/companyInfo";
+import api from "../../utils/axios";
+var Sider = Layout.Sider;
+var Sidebar = function Sidebar(_ref) {
+  var _items$flatMap$find;
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items;
+  var location = useLocation();
+  var dispatch = useDispatch();
+  var companyInfo = useSelector(function (state) {
+    return state.companyInfo.companyInfo;
+  });
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    collapsed = _useState2[0],
+    setCollapsed = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    imageSrc = _useState4[0],
+    setImageSrc = _useState4[1];
+  var _useState5 = useState(localStorage.getItem("theme") === "dark"),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isDark = _useState6[0],
+    setIsDark = _useState6[1];
+  var handleCollapse = function handleCollapse() {
+    var newState = !collapsed;
+    setCollapsed(newState);
+    Cookies.set("sidebarCollapsed", newState, {
+      expires: 7
+    });
+  };
+  var getBase64FromURL = useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {
+      var res;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return api.get(url);
+          case 3:
+            res = _context.sent;
+            return _context.abrupt("return", res === null || res === void 0 ? void 0 : res.data);
+          case 7:
+            _context.prev = 7;
+            _context.t0 = _context["catch"](0);
+            console.error("Error loading logo:", _context.t0);
+            return _context.abrupt("return", null);
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), []);
+  useEffect(function () {
+    var sidebarState = Cookies.get("sidebarCollapsed") === "true";
+    setCollapsed(sidebarState);
+    dispatch(getCompanyInfo());
+  }, [dispatch]);
+  console.log(companyInfo);
+  useEffect(function () {
+    var fetchLogo = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var _companyInfo$;
+        var base64;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(companyInfo !== null && companyInfo !== void 0 && (_companyInfo$ = companyInfo[0]) !== null && _companyInfo$ !== void 0 && _companyInfo$.filePath)) {
+                _context2.next = 5;
+                break;
+              }
+              _context2.next = 3;
+              return getBase64FromURL(companyInfo[0].filePath);
+            case 3:
+              base64 = _context2.sent;
+              setImageSrc(base64);
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function fetchLogo() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    fetchLogo();
+  }, [companyInfo, getBase64FromURL]);
+  useEffect(function () {
+    var handleThemeChange = function handleThemeChange() {
+      setIsDark(localStorage.getItem("theme") === "dark");
+    };
+    window.addEventListener("themeChange", handleThemeChange);
+    return function () {
+      window.removeEventListener("themeChange", handleThemeChange);
+    };
+  }, []);
+  var selectedKey = (_items$flatMap$find = items.flatMap(function (item) {
+    return item.children ? item.children : item;
+  }).find(function (item) {
+    return location.pathname.includes(item.key);
+  })) === null || _items$flatMap$find === void 0 ? void 0 : _items$flatMap$find.key;
+  return /*#__PURE__*/React.createElement(Sider, {
+    width: 270,
+    collapsible: true,
+    collapsed: collapsed,
+    collapsedWidth: 64,
+    trigger: null,
+    className: style.sidebar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sideBar"
+  }, /*#__PURE__*/React.createElement(Menu, {
+    mode: "inline",
+    items: items,
+    selectedKeys: [selectedKey],
+    className: style.menu
+  })), /*#__PURE__*/React.createElement(Link, {
+    to: PLATFORM_PATH,
+    className: style.buttons
+  }, collapsed ? /*#__PURE__*/React.createElement(DsgLogoEmblem, null) : imageSrc ? /*#__PURE__*/React.createElement("img", {
+    src: imageSrc,
+    alt: "Company Logo"
+  }) : isDark ? /*#__PURE__*/React.createElement(DsgLogo, {
+    dark: true
+  }) : /*#__PURE__*/React.createElement(DsgLogo, null)), /*#__PURE__*/React.createElement("div", {
+    "data-no-invert": true,
+    className: style.collapseButton,
+    onClick: handleCollapse
+  }, collapsed ? "->" : "<-"));
+};
+export default Sidebar;

package/dist/layout/Sidebar/index.module.scss

@@ -0,0 +1,50 @@
+.sidebar {
+  background: #fff !important;
+  border: none;
+  position: relative;
+  box-shadow: 0px 0px 8px 0px #00000025;
+  height: calc(100vh - 85px);
+  border-radius: 0px 0px 12px 0px;
+  svg {
+    vertical-align: middle;
+  }
+  .menu {
+    margin-top: 10px;
+    padding: 0 6px;
+    li {
+      span {
+        margin-left: 8px;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 20px;
+        text-align: left;
+      }
+    }
+  }
+  .buttons {
+    position: absolute;
+    left: 15px;
+    bottom: 16px;
+    svg {
+      width: 100%;
+      height: auto;
+      padding-right: 15px;
+    }
+    img {
+      width: 100%;
+      height: auto;
+      padding-right: 15px;
+    }
+  }
+  .collapseButton {
+    position: absolute;
+    right: -12px;
+    top: 50%;
+    transform: translateY(-100%);
+    padding: 5px;
+    background: var(--blue);
+    border-radius: 50%;
+    color: var(--white);
+    cursor: pointer;
+  }
+}