ecomlab-components-next 0.1.27 → 0.1.29

package/dist/components/ConstructorComponents/HeaderMain/DropMenuItem/DropMenuItem.scss

@@ -0,0 +1,392 @@
+$red: #e50916;
+$white: #ffffff;
+$grafit: #54595F;
+
+* {
+    .drop-list-menu-container {
+        display: none;
+        opacity: 0;
+        visibility: hidden;
+        transition: 0.5s;
+        transform: translate(0px, 0px);
+        position: absolute;
+        left: 0px;
+        top: 100%;
+    }
+
+    .drop-list-menu,
+    .drop-list-menu_service,
+    .drop-list-menu_services {
+        // display: none;
+        // visibility: hidden;
+        border-radius: 0px 0px 16px 16px;
+        width: calc(100%);
+        max-width: calc(100vw);
+        min-width: 900px;
+        margin-left: 0px;
+        margin-right: auto;
+        // opacity: 0;
+        transition: 0.5s;
+        //position: absolute;
+        display: flex;
+        flex-wrap: wrap;
+        background-color: rgba(255, 255, 255, 1);
+        left: 0px;
+        top: 100%;
+        margin-top: 25px;
+        //transform: translate(0px, 10px);
+        z-index: 5;
+        box-shadow: 0px 16px 20px 0px rgba(0, 0, 0, 0.08);
+
+        &_services {
+            display: flex;
+            width: calc(50% + 100px);
+            max-width: 700px !important;
+
+            .drop-list-menu__content {
+                width: 100% !important;
+            }
+
+            .img-container {
+                display: none;
+            }
+
+            .list-menu {
+                display: flex;
+                flex-direction: column;
+            }
+
+            .menu__item,
+            .list-menu__item {
+                width: 100% !important;
+            }
+
+           
+        }
+
+         
+
+        &_service {
+            display: flex;
+            width: calc(50% + 100px);
+            max-width: 700px !important;
+
+            .drop-list-menu__content {
+                width: 100% !important;
+            }
+
+            .img-container {
+                display: none;
+            }
+
+            .list-menu__item {
+                width:calc(33% - 20px ) !important;
+            }
+        }
+
+        &__content {
+            display: flex;
+            flex-direction: column;
+            width: 70%;
+            padding: 20px;
+            gap: 20px;
+        }
+
+        .section-item {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            max-width: calc(50% - 20px - 80px);
+            padding-bottom: 12px;
+            border-bottom: 1px solid #AAAAAA;
+            margin-left: 8px;
+
+            .img-box {
+                display: flex;
+                min-width: 20px;
+                width: 20px;
+                height: 20px;
+                align-items: center;
+                justify-content: center;
+
+                img {
+                    width: 100%;
+                    object-fit: contain;
+                }
+            }
+
+            .text_grey-underline {
+                margin-left: 8px;
+                color: var(--unnamed, #AAA);
+                /* Меню/Текст подписи меню */
+                font-family: Inter;
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: normal;
+            }
+        }
+
+        .list-menu {
+            display: flex;
+            gap: 8px;
+            height: max-content;
+            flex-wrap: wrap;
+            list-style-type: none;
+
+            &__item {
+                width: calc(50% - 10px);
+                padding: 8px;
+
+                &:hover {
+                    background-color: transparent !important;
+                }
+            }
+        }
+
+        .link_white {
+            display: flex;
+            width: 100%;
+            height: auto;
+            flex-direction: row;
+            gap: 12px;
+            padding: 8px;
+            cursor: pointer;
+
+            .in-development {
+                display: flex;
+                padding: 1px 10px;
+                justify-content: center;
+                align-items: center;
+                gap: 10px;
+                border-radius: 4px;
+                background: #FFBB56;
+                color: var(--Base-Black, #000);
+                font-family: "Golos Text";
+                font-size: 10px;
+                font-style: normal;
+                font-weight: 500;
+                line-height: 15px;
+                margin-left: auto;
+            }
+
+            &:hover {
+
+                .title {
+                    color: #00B45E !important;
+                    transition: 0.3s;
+                }
+            }
+
+            .name-box {
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+
+                .title {
+                    color: var(--unnamed, #3B2C37);
+                    /* Меню/Главный текст меню */
+                    font-family: Montserrat;
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 500;
+                    line-height: normal;
+                }
+
+                .text_grey {
+                    color: var(--unnamed, #888);
+                    /* Меню/Текст подписи меню */
+                    font-family: Montserrat;
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: normal;
+                }
+            }
+
+            .img-box {
+                display: flex;
+                min-width: 20px;
+                width: 20px;
+                height: 20px;
+                align-items: center;
+                justify-content: center;
+
+                img {
+                    width: 100%;
+                    object-fit: contain;
+                    border-radius: 16px;
+                }
+            }
+        }
+
+        .current-section_case1 {
+            background-color: #F6FFFA;
+            width: 30%;
+            padding: 32px;
+            border-radius: 16px;
+
+            &__content {
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+                padding: 8px;
+                border-radius: 16px;
+
+                .link_white {
+                    &:hover {
+
+                        .title {
+                            color: #00B45E;
+                            transition: 0.3s;
+                        }
+                    }
+                }
+
+                &:hover {
+                    transition: 0.3s;
+                    border-radius: 16px;
+                    background: rgba(136, 48, 109, 0.05);
+                }
+            }
+
+            .img-container {
+                display: flex;
+                justify-content: center;
+                max-width: 100%;
+                width: max-content;
+                aspect-ratio: 1/1.5;
+                border-radius: 16px;
+                max-height: 500px;
+
+                img {
+                    display: inline-block;
+                    width: 100%;
+                    object-fit: contain;
+                    border-radius: 16px;
+                }
+            }
+        }
+
+        .current-section_case2 {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            background-color: #FFFADF;
+            padding: 40px;
+            width: 30%;
+            justify-content: start;
+            overflow: hidden;
+            border-radius: 16px;
+
+            &__content {
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+                padding: 8px;
+                border-radius: 16px;
+
+                .link_white {
+                    &:hover {
+
+                        .title {
+                            color: #00B45E;
+                            transition: 0.3s;
+                        }
+                    }
+                }
+
+                &:hover {
+                    transition: 0.3s;
+                    border-radius: 16px;
+                    background: rgba(136, 48, 109, 0.05);
+                }
+            }
+
+            .content-group {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                gap: 16px;
+                justify-content: flex-start;
+
+                &__item {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    gap: 20px;
+
+                    .img-container {
+                        width: 100%;
+                        max-width: 240px;
+                        height: auto;
+
+                        img {
+                            display: inline-block;
+                            width: 100%;
+                            object-fit: contain;
+                            border-radius: 16px;
+                        }
+                    }
+                }
+            }
+
+            .section-item {
+                margin-left: 0px;
+                max-width: calc(50% - 20px);
+            }
+        }
+
+        .current-section_case3 {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            padding: 40px;
+            width: 30%;
+            border-radius: 16px;
+
+            &__content {
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+                padding: 8px;
+                border-radius: 16px;
+
+                .link_white {
+                    &:hover {
+
+                        .title {
+                            color: #00B45E;
+                            transition: 0.3s;
+                        }
+                    }
+                }
+
+                &:hover {
+                    transition: 0.3s;
+                    border-radius: 16px;
+                    background: rgba(136, 48, 109, 0.05);
+                }
+            }
+
+            .section-item {
+                margin-left: 0px;
+                max-width: calc(100% - 20px);
+            }
+
+
+            .img-container {
+                width: 100%;
+                padding: 0;
+
+                img {
+                    display: inline-block;
+                    width: 100%;
+                    object-fit: contain;
+                    border-radius: 16px;
+                    box-shadow: 0px 0px 15px 0px rgba(94, 0, 73, 0.15);
+                }
+            }
+        }
+    }
+}

package/dist/components/ConstructorComponents/HeaderMain/DropMenuItem/img/cases.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.50065 18.3335C2.04232 18.3335 1.64982 18.1702 1.32315 17.8435C0.996486 17.5168 0.83343 17.1246 0.833986 16.6668V8.3335C0.833986 8.09739 0.913986 7.89933 1.07399 7.73933C1.23399 7.57933 1.43176 7.49961 1.66732 7.50016C1.90343 7.50016 2.10149 7.58016 2.26149 7.74016C2.42149 7.90016 2.50121 8.09794 2.50065 8.3335V16.6668H15.834C16.0701 16.6668 16.2682 16.7468 16.4282 16.9068C16.5882 17.0668 16.6679 17.2646 16.6673 17.5002C16.6673 17.7363 16.5873 17.9343 16.4273 18.0943C16.2673 18.2543 16.0695 18.3341 15.834 18.3335H2.50065ZM5.83399 15.0002C5.37565 15.0002 4.98315 14.8368 4.65649 14.5102C4.32982 14.1835 4.16676 13.7913 4.16732 13.3335V5.00016C4.16732 4.76405 4.24732 4.566 4.40732 4.406C4.56732 4.246 4.7651 4.16628 5.00065 4.16683H8.33399V2.50016C8.33399 2.04183 8.49732 1.64933 8.82399 1.32266C9.15065 0.995998 9.54287 0.832942 10.0007 0.833498H13.334C13.7923 0.833498 14.1848 0.996831 14.5115 1.3235C14.8382 1.65016 15.0012 2.04239 15.0007 2.50016V4.16683H18.334C18.5701 4.16683 18.7682 4.24683 18.9282 4.40683C19.0882 4.56683 19.1679 4.76461 19.1673 5.00016V13.3335C19.1673 13.7918 19.004 14.1843 18.6773 14.511C18.3507 14.8377 17.9584 15.0007 17.5007 15.0002H5.83399ZM10.0007 4.16683H13.334V2.50016H10.0007V4.16683Z" fill="#27BC62"/>
+</svg>

package/dist/components/ConstructorComponents/HeaderMain/DropMenuItem/img/examples.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.82115 2.14307H12.1426V17.8574H4.82115C4.11075 17.8574 3.42944 17.5751 2.92711 17.0728C2.42478 16.5705 2.14258 15.8892 2.14258 15.1788V4.82164C2.14258 4.11124 2.42478 3.42993 2.92711 2.9276C3.42944 2.42527 4.11075 2.14307 4.82115 2.14307ZM13.214 12.1431V7.85735H17.8569V12.1431H13.214ZM13.214 17.8574V13.2145H17.8569V15.1788C17.8569 15.8892 17.5747 16.5705 17.0723 17.0728C16.57 17.5751 15.8887 17.8574 15.1783 17.8574H13.214ZM13.214 2.14307V6.78592H17.8569V4.82164C17.8569 4.11124 17.5747 3.42993 17.0723 2.9276C16.57 2.42527 15.8887 2.14307 15.1783 2.14307H13.214ZM5.53544 5.35735C5.04258 5.35735 4.64258 5.75735 4.64258 6.25021V8.75021C4.64258 9.24307 5.04258 9.64307 5.53544 9.64307H9.10686C9.59972 9.64307 9.99972 9.24307 9.99972 8.75021V6.25021C9.99972 5.75735 9.59972 5.35735 9.10686 5.35735H5.53544ZM5.71401 8.57164V6.42878H8.92829V8.57164H5.71401ZM4.64258 11.6074C4.64258 11.9031 4.88258 12.1431 5.17829 12.1431H9.46401C9.60609 12.1431 9.74235 12.0866 9.84281 11.9862C9.94328 11.8857 9.99972 11.7494 9.99972 11.6074C9.99972 11.4653 9.94328 11.329 9.84281 11.2285C9.74235 11.1281 9.60609 11.0716 9.46401 11.0716H5.17829C5.03621 11.0716 4.89995 11.1281 4.79949 11.2285C4.69902 11.329 4.64258 11.4653 4.64258 11.6074ZM5.17829 13.5716C5.03621 13.5716 4.89995 13.6281 4.79949 13.7285C4.69902 13.829 4.64258 13.9653 4.64258 14.1074C4.64258 14.2494 4.69902 14.3857 4.79949 14.4862C4.89995 14.5866 5.03621 14.6431 5.17829 14.6431H9.46401C9.60609 14.6431 9.74235 14.5866 9.84281 14.4862C9.94328 14.3857 9.99972 14.2494 9.99972 14.1074C9.99972 13.9653 9.94328 13.829 9.84281 13.7285C9.74235 13.6281 9.60609 13.5716 9.46401 13.5716H5.17829Z" fill="#27BC62"/>
+</svg>

package/dist/components/ConstructorComponents/HeaderMain/DropMenuMobileVersion/DropMenuMobileVersion.js

@@ -0,0 +1,139 @@
+"use strict";
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropMenuMobileVersion = DropMenuMobileVersion;
+var _react = _interopRequireWildcard(require("react"));
+var _link = _interopRequireDefault(require("next/link"));
+var _drop = _interopRequireDefault(require("./img/drop.svg"));
+var _image = _interopRequireDefault(require("next/image"));
+var _ButtonBasic = _interopRequireDefault(require("../../../Buttons/ButtonBasic/ButtonBasic"));
+require("./DropMenuMobileVersion.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function DropMenuMobileVersion(_ref) {
+  var items = _ref.items,
+    isOpenMobileMenu = _ref.isOpenMobileMenu,
+    setOpen = _ref.setOpen;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeItem = _useState2[0],
+    setActiveItem = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    refPage = _useState4[0],
+    setRefPage = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if (!isOpenMobileMenu) {
+      setActiveItem(null);
+    }
+  }, [isOpenMobileMenu]);
+
+  // utm
+  (0, _react.useEffect)(function () {
+    var _window;
+    var currentUrl = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.href;
+    setRefPage("?ref_page=".concat(currentUrl));
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: isOpenMobileMenu ? 'menu-mobile_active' : 'menu-mobile'
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "menu-mobile__content"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "menu-mobile__items"
+  }, items === null || items === void 0 ? void 0 : items.map(function (_ref2, ind) {
+    var label = _ref2.label,
+      subItemsMenu = _ref2.subItemsMenu,
+      path = _ref2.path,
+      icon = _ref2.icon;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: label + ind
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "menu-mobile__drop-item",
+      key: label,
+      onClick: function onClick(e) {
+        if (activeItem == label) {
+          setActiveItem(null);
+        } else {
+          setActiveItem(label);
+        }
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "menu-mobile__title-icon-box"
+    }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
+      src: icon,
+      alt: icon
+    }), /*#__PURE__*/_react["default"].createElement(_link["default"], {
+      className: "menu-mobile__menu-item",
+      href: path ? path : '#',
+      onClick: function onClick(e) {
+        if ((subItemsMenu === null || subItemsMenu === void 0 ? void 0 : subItemsMenu.length) == 0 || !subItemsMenu) {
+          setOpen(false);
+        }
+      }
+    }, label)), (subItemsMenu === null || subItemsMenu === void 0 ? void 0 : subItemsMenu.length) > 0 && /*#__PURE__*/_react["default"].createElement(_image["default"], {
+      src: _drop["default"],
+      alt: "icon",
+      style: {
+        transform: label == activeItem ? 'rotate(180deg)' : ''
+      }
+    })), (subItemsMenu === null || subItemsMenu === void 0 ? void 0 : subItemsMenu.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: label == activeItem ? 'menu-mobile__drop-box_active' : 'menu-mobile__drop-box'
+    }, subItemsMenu === null || subItemsMenu === void 0 ? void 0 : subItemsMenu.map(function (_ref3, ind) {
+      var label_item = _ref3.label_item,
+        icon = _ref3.icon,
+        path = _ref3.path,
+        label_main_3 = _ref3.label_main_3,
+        path_3 = _ref3.path_3,
+        article = _ref3.article;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "menu-mobile__menu-subitem",
+        key: label_item + label + ind
+      }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
+        src: icon,
+        alt: icon
+      }), /*#__PURE__*/_react["default"].createElement(_link["default"], {
+        href: path || path_3 ? path || path_3 : '#',
+        onClick: function onClick(e) {
+          setOpen(false);
+        }
+      }, label_item || label_main_3), !path && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "in-development"
+      }, "\u0412 \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u043A\u0435"));
+    })));
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "menu-mobile__btn-box"
+  }, /*#__PURE__*/_react["default"].createElement(_ButtonBasic["default"], {
+    width: "100%",
+    whiteGreen: true,
+    text: "\u0412\u043E\u0439\u0442\u0438",
+    onClick: function onClick() {
+      var _window2;
+      return (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.open("https://lk.ecomru.ru/auth".concat(refPage), '_blunk');
+    },
+    style: {
+      borderRadius: '4px'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_ButtonBasic["default"], {
+    width: "100%",
+    green: true,
+    text: "\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044F",
+    onClick: function onClick() {
+      var _window3;
+      return (_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.open("https://lk.ecomru.ru/auth/signup".concat(refPage), '_blunk');
+    },
+    style: {
+      borderRadius: '4px'
+    }
+  }))));
+}

package/dist/components/ConstructorComponents/HeaderMain/DropMenuMobileVersion/DropMenuMobileVersion.scss

@@ -0,0 +1,149 @@
+.menu-mobile,
+.menu-mobile_active {
+    display: flex;
+    flex-direction: column;
+    width: calc(100%);
+    max-height: 0;
+    height: auto;
+    padding: 0px 12px 12px 12px;
+    gap: 10px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    border-radius: 0 0 14px 14px;
+    background-color: white;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    opacity: 0;
+    visibility: hidden;
+    box-shadow: 0px 32px 40px 0px rgba(0, 0, 0, 0.08);
+
+    .in-development {
+        display: flex;
+        padding: 1px 10px;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        border-radius: 4px;
+        background: #FFBB56;
+        color: var(--Base-Black, #000);
+        font-family: "Golos Text";
+        font-size: 10px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 15px;
+        margin-left: auto;
+    }
+
+    &__items {
+        display: flex;
+        flex-direction: column;
+        max-height: calc(100% - 92px);
+        padding: 16px;
+        overflow: auto;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        border-radius: 10px;
+        border: 1px solid #D0D0D0;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    &_active {
+        // transition: 0.3s;
+        max-height: calc(80vh - 96px);
+        opacity: 1;
+        visibility: visible;
+    }
+
+    &::-webkit-scrollbar {
+        width: 0;
+    }
+
+    &__drop-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+        padding: 10px 0;
+        cursor: pointer;
+    }
+
+    &__menu-item {
+        color: #333;
+        font-family: "Golos Text";
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+
+        &:hover {
+            transition: 0.3s;
+            color: #00B45E;
+        }
+    }
+
+    &__title-icon-box {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__drop-box,
+    &__drop-box_active {
+        display: flex;
+        flex-direction: column;
+        border-radius: 8px;
+        max-height: 0px;
+        overflow: hidden;
+        background-color: #F7F7F7;
+        padding: 0;
+        border-radius: 10px;
+
+        &_active {
+            padding: 12px;
+            transition: max-height 1s;
+            max-height: 1000px;
+        }
+    }
+
+    &__menu-subitem {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 0;
+        color: #333;
+        font-family: "Golos Text";
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+
+        img {
+            width: 16px;
+            height: 16px;
+        }
+
+        &:hover {
+            transition: 0.3s;
+            color: #00B45E;
+        }
+    }
+
+    &__btn-box {
+        display: flex;
+        padding-left: 16px;
+        padding-right: 16px;
+        padding-bottom: 16px;
+        flex-direction: column;
+        gap: 12px;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+        margin-top: 12px;
+    }
+}

package/dist/components/ConstructorComponents/HeaderMain/DropMenuMobileVersion/img/drop.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8.41406" y="10.6572" width="2" height="6" rx="1" transform="rotate(-135 8.41406 10.6572)" fill="#3B2C37"/>
+<rect x="9.65625" y="9.24316" width="2" height="6" rx="1" transform="rotate(135 9.65625 9.24316)" fill="#3B2C37"/>
+</svg>