@steroidsjs/bootstrap 3.0.0-beta.81 → 3.0.0-beta.83

package/content/Avatar/AvatarView.scss

@@ -55,7 +55,7 @@ $status-border-color: var(--status-border-color);
 
     &_size {
 
-        &_large {
+        &_lg {
             #{$root}__body {
                 height: 64px;
                 width: 64px;
@@ -67,11 +67,11 @@ $status-border-color: var(--status-border-color);
             --status-size: var(--status-size-large);
         }
 
-        &_middle {
+        &_md {
             #{$root}__body {
                 height: 50px;
                 width: 50px;
-                line-height: 46px;
+                line-height: 50px;
                 font-size: $font-size-sm;
             }
             --border-width: var(--border-width-medium);
@@ -79,11 +79,11 @@ $status-border-color: var(--status-border-color);
             --status-size: var(--status-size-medium);
         }
 
-        &_small {
+        &_sm {
             #{$root}__body {
                 height: 32px;
                 width: 32px;
-                line-height: 28px;
+                line-height: 32px;
                 font-size: $font-size-xs;
             }
             --border-width: var(--border-width-small);

package/content/Menu/MenuView.js

@@ -21,7 +21,10 @@ var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
 function MenuView(props) {
     var bem = (0, hooks_1.useBem)('MenuView');
     var MenuItemView = props.itemView;
-    var renderMenuItems = react_1["default"].useCallback(function () { return (react_1["default"].createElement(react_1["default"].Fragment, null, props.items.map(function (item, index) { return (react_1["default"].createElement(MenuItemView, __assign({ key: index }, item))); }))); }, [MenuItemView, props.items]);
+    var renderMenuItems = react_1["default"].useCallback(function () {
+        var _a;
+        return (react_1["default"].createElement(react_1["default"].Fragment, null, (_a = props.items) === null || _a === void 0 ? void 0 : _a.map(function (item, index) { return (react_1["default"].createElement(MenuItemView, __assign({ key: index }, item))); })));
+    }, [MenuItemView, props.items]);
     return (react_1["default"].createElement(content_1.DropDown, __assign({}, props.dropDownProps, { className: bem(bem.block(), props.className), content: renderMenuItems }),
         react_1["default"].createElement("span", { className: bem.element('button') }, props.icon
             ? (0, renderIcon_1["default"])(props.icon, { className: bem.element('icon') })

package/icons/index.js

@@ -95,6 +95,13 @@ exports["default"] = (function (customIcons) {
         'expand_up',
         'left_12x12',
         'cancel_ellips',
+        'facebook',
+        'instagram',
+        'telegram',
+        'vk',
+        'whatsapp',
+        'burger',
+        'sort',
     ];
     steroidsIcons.forEach(function (iconName) {
         icons[iconName] = require("./svgs/".concat(iconName, ".svg"));

package/icons/svgs/arrow_right_24x24.svg

@@ -1,4 +1,5 @@
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+
 <rect y="0.867676" width="24" height="24" rx="8" fill="white"/>
 <path d="M10 16.8677L14 12.8677L10 8.86768" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons/svgs/burger.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 7.44922H19" stroke="#323232" stroke-linecap="round"/>
+<path d="M5 12.4492H15" stroke="#323232" stroke-linecap="round"/>
+<path d="M5 17.4492H11" stroke="#323232" stroke-linecap="round"/>
+</svg>

package/icons/svgs/facebook.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6792 14.1469L17.2492 10.529H13.7384V8.1774C13.7384 7.18814 14.2286 6.22149 15.7959 6.22149H17.4144V3.14066C16.4719 2.99048 15.5194 2.90924 14.5648 2.89758C11.6753 2.89758 9.78889 4.63303 9.78889 7.77039V10.529H6.58594V14.1469H9.78889V22.8976H13.7384V14.1469H16.6792Z" fill="#ADACAC"/>
+</svg>

package/icons/svgs/instagram.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 7.76245C9.164 7.76245 6.86493 10.0615 6.86493 12.8976C6.86493 15.7337 9.164 18.0327 12.0001 18.0327C14.8361 18.0327 17.1352 15.7337 17.1352 12.8976C17.1352 10.0615 14.8361 7.76245 12.0001 7.76245ZM12.0001 16.2309C10.1591 16.2309 8.66673 14.7385 8.66673 12.8976C8.66673 11.0566 10.1591 9.56425 12.0001 9.56425C13.841 9.56425 15.3334 11.0566 15.3334 12.8976C15.3334 14.7385 13.841 16.2309 12.0001 16.2309Z" fill="#ADACAC"/>
+<path d="M17.338 8.75956C18.0008 8.75956 18.538 8.22233 18.538 7.55955C18.538 6.89682 18.0008 6.35959 17.338 6.35959C16.6753 6.35959 16.138 6.89682 16.138 7.55955C16.138 8.22233 16.6753 8.75956 17.338 8.75956Z" fill="#ADACAC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.89758C9.28417 2.89758 8.94362 2.90911 7.87702 2.95778C6.81264 3.00633 6.08568 3.17536 5.44958 3.42259C4.792 3.67813 4.23431 4.02009 3.6784 4.57603C3.12247 5.13193 2.78051 5.68963 2.52496 6.34721C2.27774 6.98326 2.10871 7.71022 2.06016 8.7746C2.01148 9.8412 2 10.1818 2 12.8976C2 15.6134 2.01148 15.954 2.06016 17.0206C2.10871 18.0849 2.27774 18.8119 2.52496 19.448C2.78051 20.1055 3.12247 20.6632 3.6784 21.2192C4.23431 21.7751 4.792 22.1171 5.44958 22.3726C6.08568 22.6198 6.81264 22.7889 7.87702 22.8374C8.94362 22.8861 9.28417 22.8976 12 22.8976C14.7158 22.8976 15.0564 22.8861 16.123 22.8374C17.1874 22.7889 17.9143 22.6198 18.5504 22.3726C19.208 22.1171 19.7657 21.7751 20.3216 21.2192C20.8775 20.6632 21.2195 20.1055 21.475 19.448C21.7222 18.8119 21.8913 18.0849 21.9398 17.0206C21.9885 15.954 22 15.6134 22 12.8976C22 10.1818 21.9885 9.8412 21.9398 8.7746C21.8913 7.71022 21.7222 6.98326 21.475 6.34721C21.2195 5.68963 20.8775 5.13193 20.3216 4.57603C19.7657 4.02009 19.208 3.67813 18.5504 3.42259C17.9143 3.17536 17.1874 3.00633 16.123 2.95778C15.0564 2.90911 14.7158 2.89758 12 2.89758ZM12 4.69943C14.6701 4.69943 14.9864 4.70958 16.0409 4.75771C17.0158 4.8022 17.5453 4.96509 17.8977 5.10201C18.3645 5.28341 18.6976 5.50013 19.0475 5.85006C19.3975 6.19998 19.6142 6.53314 19.7956 6.99986C19.9325 7.35225 20.0954 7.88174 20.1399 8.85671C20.188 9.9112 20.1982 10.2275 20.1982 12.8976C20.1982 15.5677 20.188 15.884 20.1399 16.9385C20.0954 17.9134 19.9325 18.4429 19.7956 18.7953C19.6142 19.2621 19.3975 19.5952 19.0475 19.9451C18.6976 20.2951 18.3645 20.5118 17.8977 20.6932C17.5453 20.8301 17.0158 20.993 16.0409 21.0375C14.9866 21.0856 14.6703 21.0958 12 21.0958C9.32968 21.0958 9.0135 21.0856 7.95912 21.0375C6.98416 20.993 6.45467 20.8301 6.10228 20.6932C5.63552 20.5118 5.3024 20.2951 4.95243 19.9451C4.60251 19.5952 4.38579 19.2621 4.20442 18.7953C4.06747 18.4429 3.90458 17.9134 3.86009 16.9385C3.81196 15.884 3.8018 15.5677 3.8018 12.8976C3.8018 10.2275 3.81196 9.9112 3.86009 8.85671C3.90458 7.88174 4.06747 7.35225 4.20442 6.99986C4.38579 6.53314 4.60251 6.19998 4.95243 5.85006C5.3024 5.50013 5.63552 5.28341 6.10228 5.10201C6.45467 4.96509 6.98416 4.8022 7.95912 4.75771C9.01362 4.70958 9.32991 4.69943 12 4.69943Z" fill="#ADACAC"/>
+</svg>

package/icons/svgs/sort.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icons/Icons24&#209;&#133;24/Black/burger &#38; menu/Sort">
+<path id="Vector 7" d="M5 7.80371H19" stroke="#323232" stroke-linecap="round"/>
+<path id="Vector 8" d="M5 12.8037H15" stroke="#323232" stroke-linecap="round"/>
+<path id="Vector 9" d="M5 17.8037H11" stroke="#323232" stroke-linecap="round"/>
+</g>
+</svg>

package/icons/svgs/telegram.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.23741 11.8584C9.06923 9.75322 12.2912 8.36537 13.9033 7.69484C18.5063 5.78032 19.4627 5.44774 20.0861 5.43676C20.2232 5.43435 20.5298 5.46833 20.7284 5.62946C20.8961 5.76552 20.9422 5.94932 20.9643 6.07832C20.9864 6.20732 21.0139 6.50119 20.992 6.73081C20.7426 9.35164 19.6633 15.7117 19.1142 18.6471C18.8818 19.8891 18.4244 20.3056 17.9815 20.3464C17.0189 20.4349 16.288 19.7103 15.3558 19.0992C13.897 18.1429 13.0729 17.5477 11.6569 16.6145C10.0205 15.5362 11.0813 14.9435 12.0139 13.9748C12.258 13.7213 16.4988 9.86393 16.5809 9.514C16.5912 9.47024 16.6007 9.3071 16.5038 9.22096C16.4069 9.13482 16.2639 9.16428 16.1606 9.18771C16.0143 9.22091 13.6839 10.7612 9.16938 13.8087C8.5079 14.2629 7.90875 14.4842 7.37193 14.4726C6.78013 14.4598 5.64175 14.138 4.79548 13.8629C3.75749 13.5255 2.93252 13.3471 3.00436 12.7741C3.04178 12.4756 3.45279 12.1704 4.23741 11.8584Z" fill="#ADACAC"/>
+</svg>

package/icons/svgs/vk.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5411 8.06126C21.6801 7.62465 21.5411 7.30383 20.8794 7.30383H18.6914C18.135 7.30383 17.8786 7.58097 17.7395 7.88658C17.7395 7.88658 16.6268 10.4407 15.0505 12.0997C14.5406 12.58 14.3087 12.7328 14.0306 12.7328C13.8915 12.7328 13.6902 12.58 13.6902 12.1434V8.06126C13.6902 7.53733 13.5287 7.30383 13.0651 7.30383H9.62678C9.27911 7.30383 9.07003 7.547 9.07003 7.77746C9.07003 8.27413 9.85811 8.38866 9.93935 9.78579V12.8201C9.93935 13.4854 9.81177 13.606 9.5336 13.606C8.79186 13.606 6.98756 11.0405 5.91744 8.1049C5.70773 7.53432 5.49738 7.30383 4.93819 7.30383H2.75018C2.12504 7.30383 2 7.58097 2 7.88658C2 8.43234 2.74178 11.1392 5.45387 14.7193C7.26191 17.1642 9.80932 18.4896 12.1274 18.4896C13.5182 18.4896 13.6902 18.1952 13.6902 17.6882V15.8403C13.6902 15.2516 13.822 15.1341 14.2624 15.1341C14.5869 15.1341 15.1433 15.2869 16.4414 16.4657C17.9249 17.8628 18.1695 18.4896 19.004 18.4896H21.192C21.8171 18.4896 22.1297 18.1952 21.9494 17.6143C21.752 17.0353 21.0437 16.1953 20.1039 15.1996C19.5939 14.632 18.8289 14.0208 18.5971 13.7151C18.2726 13.3222 18.3653 13.1476 18.5971 12.7983C18.5971 12.7983 21.2629 9.26187 21.5411 8.06126Z" fill="#ADACAC"/>
+</svg>

package/icons/svgs/whatsapp.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.1676 20.9508C7.1676 20.6161 7.1676 20.2814 7.1676 19.9467C7.16998 19.9331 7.1695 19.919 7.16618 19.9055C7.16287 19.8921 7.15679 19.8794 7.14833 19.8683C7.13987 19.8572 7.12921 19.848 7.117 19.8412C7.10479 19.8343 7.09129 19.8301 7.07734 19.8286C6.23944 19.593 5.46606 19.1732 4.81484 18.6005C4.34036 18.1732 3.9453 17.6668 3.64764 17.1043C3.2281 16.2918 2.94888 15.4155 2.82158 14.5117C2.66384 13.378 2.60906 12.2326 2.65789 11.0892C2.6686 10.5562 2.69614 10.0292 2.75733 9.49614C2.85491 8.48318 3.11303 7.49175 3.5222 6.55828C4.02745 5.41055 4.94404 4.48862 6.09524 3.97024C6.87945 3.61499 7.70445 3.35563 8.55202 3.19792C9.3832 3.04206 10.2248 2.94641 11.07 2.9117C11.8319 2.88503 12.5947 2.89615 13.3554 2.94502C14.4443 2.99052 15.5233 3.16905 16.5679 3.47656C17.3424 3.69758 18.0792 4.0319 18.7539 4.46846C19.4113 4.91522 19.943 5.52027 20.299 6.22664C20.7174 7.05164 21.0019 7.9368 21.1419 8.84951C21.2328 9.39138 21.2926 9.93794 21.3209 10.4865C21.3606 11.1665 21.356 11.8495 21.33 12.5264C21.304 13.2033 21.2459 13.8605 21.1618 14.5238C21.0554 15.5194 20.7463 16.4832 20.2531 17.3572C19.6111 18.4628 18.5827 19.2977 17.3619 19.7044C16.527 19.9938 15.6651 20.1998 14.7888 20.3193C14.1479 20.4071 13.5054 20.4707 12.8598 20.4964C12.3657 20.5192 11.8716 20.5131 11.3775 20.5055C11.0975 20.5055 10.8191 20.4783 10.5407 20.454C10.5134 20.4489 10.4851 20.452 10.4595 20.4628C10.4339 20.4735 10.4121 20.4916 10.3969 20.5146C9.83395 21.184 9.24959 21.8351 8.66063 22.4833C8.55335 22.6015 8.42914 22.7036 8.29196 22.7862C8.20192 22.8446 8.09924 22.8813 7.99222 22.8933C7.8852 22.9053 7.77685 22.8921 7.6759 22.855C7.57495 22.8178 7.48423 22.7577 7.41108 22.6795C7.33793 22.6012 7.2844 22.507 7.25479 22.4045C7.1965 22.2224 7.16759 22.0323 7.16913 21.8412C7.1676 21.5414 7.1676 21.2461 7.1676 20.9508ZM7.84834 22.2213L7.92024 22.1547L9.19758 20.7509C9.68914 20.2107 10.1802 19.6701 10.6707 19.129C10.6948 19.096 10.7274 19.0699 10.765 19.0534C10.8026 19.0369 10.844 19.0306 10.8849 19.0351C11.0516 19.0517 11.2184 19.0578 11.3867 19.0593C11.968 19.0593 12.5493 19.0593 13.1306 19.0184C13.6583 18.9775 14.1846 18.9139 14.7077 18.8322C15.271 18.7351 15.8287 18.6082 16.3782 18.4521C17.602 18.1265 18.5489 17.4299 19.144 16.3017C19.4953 15.608 19.7157 14.8567 19.7942 14.0846C19.8871 13.357 19.9428 12.6251 19.9609 11.8919C19.988 10.9707 19.9245 10.0492 19.7712 9.14026C19.6649 8.48174 19.4737 7.83944 19.2021 7.22914C18.8564 6.47196 18.3669 5.84502 17.6127 5.4422C16.4562 4.82434 15.2049 4.54873 13.9153 4.40789C13.5497 4.36852 13.1841 4.34732 12.817 4.33369C12.0652 4.29532 11.3119 4.29937 10.5606 4.3458C10.0203 4.3855 9.48288 4.45731 8.95129 4.56084C8.16951 4.70191 7.41322 4.95709 6.70714 5.31802C6.2978 5.52277 5.92643 5.79466 5.60878 6.12215C5.09397 6.69175 4.71634 7.36951 4.5043 8.10444C4.25276 8.96037 4.11544 9.8452 4.09586 10.7364C4.04664 11.6276 4.05788 12.5211 4.12951 13.4108C4.17408 13.9402 4.26363 14.465 4.39722 14.9796C4.59598 15.7815 4.98156 16.5263 5.52312 17.1543C6.10779 17.7949 6.86346 18.259 7.70301 18.4929C7.80856 18.5247 7.85599 18.5611 7.85599 18.6792C7.84681 19.1154 7.85599 19.5515 7.85599 19.9876L7.84834 22.2213Z" fill="#ADACAC"/>
+<path d="M6.77638 8.69652C6.76567 8.36488 6.94771 8.1241 7.168 7.90754C7.45853 7.63203 7.77862 7.38879 8.12256 7.18216C8.2794 7.08641 8.46588 7.04993 8.64772 7.07942C8.82956 7.10891 8.99454 7.2024 9.11231 7.34269C9.52845 7.77572 9.90093 8.24791 10.2244 8.75255C10.3846 8.97956 10.5056 9.23135 10.5824 9.49762C10.6131 9.60153 10.6151 9.71169 10.5882 9.81662C10.5613 9.92155 10.5065 10.0174 10.4294 10.0943C10.2529 10.2658 10.0649 10.4251 9.86648 10.5713C9.76652 10.6502 9.69219 10.7564 9.65275 10.8767C9.61331 10.9971 9.6105 11.1263 9.64466 11.2482C9.76717 11.8208 10.0448 12.3495 10.4478 12.7777C10.9374 13.3695 11.5684 13.8311 12.2835 14.121C12.4592 14.2104 12.6606 14.2377 12.8541 14.1982C12.9601 14.1696 13.0543 14.1086 13.1233 14.024C13.2304 13.8893 13.3467 13.759 13.443 13.6152C13.568 13.4357 13.7589 13.3117 13.9749 13.2695C14.191 13.2274 14.4151 13.2704 14.5995 13.3895C15.1181 13.6874 15.6076 14.0321 16.062 14.4193C16.169 14.5101 16.2807 14.598 16.3878 14.6904C16.5145 14.786 16.606 14.9202 16.6483 15.0723C16.6906 15.2244 16.6813 15.386 16.6219 15.5323C16.5273 15.7785 16.3896 16.0061 16.2149 16.2047C15.9979 16.5033 15.7215 16.7548 15.4026 16.9437C15.2502 17.0323 15.079 17.0844 14.9026 17.0957C14.7262 17.107 14.5496 17.0772 14.3869 17.0088C13.1492 16.5156 11.9928 15.8423 10.9557 15.0114C9.94128 14.1847 9.0548 13.2153 8.32449 12.1341C7.70997 11.239 7.22109 10.2655 6.87122 9.24018C6.83397 9.11617 6.80333 8.9903 6.77944 8.8631C6.77264 8.80783 6.77161 8.75201 6.77638 8.69652Z" fill="#ADACAC"/>
+<path d="M12.0605 7.08166C13.0961 7.10061 14.092 7.47874 14.8748 8.15012C15.6575 8.8215 16.1774 9.74354 16.3438 10.7555C16.4108 11.1234 16.4467 11.4962 16.4509 11.8701C16.4509 11.9579 16.428 12.0215 16.3331 12.0306C16.2383 12.0397 16.2138 11.9594 16.2138 11.8792C16.228 11.123 16.0712 10.3733 15.7549 9.68484C15.4885 9.11918 15.0939 8.62199 14.6017 8.23195C14.1095 7.84191 13.5331 7.56953 12.9172 7.43602C12.5916 7.36139 12.2586 7.32279 11.9244 7.32093C11.8919 7.32148 11.8594 7.3174 11.828 7.30882C11.8013 7.30136 11.7786 7.28393 11.7646 7.2602C11.7506 7.23647 11.7465 7.20829 11.7531 7.18161C11.7533 7.16895 11.756 7.15646 11.7611 7.14485C11.7662 7.13325 11.7737 7.12278 11.7829 7.11404C11.7922 7.1053 11.8031 7.09847 11.815 7.09395C11.827 7.08943 11.8397 7.08732 11.8525 7.08772C11.9213 7.07863 11.9917 7.08166 12.0605 7.08166Z" fill="#ADACAC"/>
+<path d="M15.0114 11.19C15.0062 10.7693 14.9016 10.3556 14.7058 9.98217C14.51 9.60873 14.2285 9.28591 13.8839 9.0396C13.4818 8.75994 13.0143 8.58638 12.5255 8.53531C12.4429 8.52471 12.3603 8.52017 12.2762 8.51108C12.192 8.502 12.1416 8.46717 12.1492 8.38236C12.1568 8.29756 12.2104 8.26727 12.3022 8.27333C13.6575 8.35511 14.811 9.1138 15.1659 10.5267C15.2308 10.7991 15.2631 11.0782 15.2622 11.3581C15.2622 11.3838 15.2622 11.4096 15.2622 11.4338C15.2622 11.5095 15.2133 11.5595 15.1383 11.558C15.1217 11.5574 15.1054 11.5535 15.0903 11.5465C15.0753 11.5395 15.0618 11.5295 15.0508 11.5172C15.0398 11.5049 15.0314 11.4904 15.0262 11.4748C15.021 11.4592 15.0191 11.4426 15.0205 11.4262C15.0083 11.3551 15.0114 11.2824 15.0114 11.19Z" fill="#ADACAC"/>
+<path d="M12.6396 9.50378C13.3831 9.55375 13.9017 9.91417 14.0439 10.6971C14.0612 10.7974 14.0735 10.8985 14.0807 11C14.0807 11.0817 14.0623 11.1514 13.972 11.1514C13.8818 11.1514 13.8512 11.0908 13.8481 11C13.8473 10.6999 13.7539 10.4071 13.5804 10.161C13.3981 9.93808 13.1364 9.79282 12.8492 9.75516C12.785 9.74327 12.7201 9.73518 12.6549 9.73093C12.5479 9.73093 12.4882 9.67793 12.502 9.59615C12.5157 9.51438 12.58 9.49923 12.6396 9.50378Z" fill="#ADACAC"/>
+</svg>

package/index.d.ts

@@ -167,6 +167,9 @@ declare const _default: {
     'layout.TooltipView': {
         lazy: () => any;
     };
+    'layout.SidebarView': {
+        lazy: () => any;
+    };
     'list.ControlsColumnView': {
         lazy: () => any;
     };

package/index.js

@@ -170,6 +170,9 @@ exports["default"] = {
     'layout.TooltipView': {
         lazy: function () { return require('./layout/Tooltip/TooltipView')["default"]; }
     },
+    'layout.SidebarView': {
+        lazy: function () { return require('./layout/Sidebar/SidebarView')["default"]; }
+    },
     'list.ControlsColumnView': {
         lazy: function () { return require('./list/ControlsColumnView/ControlsColumnView')["default"]; }
     },

package/index.scss

@@ -63,6 +63,7 @@
 @import './layout/ProgressBar/LineProgressBarView';
 @import './layout/ProgressBar/CircleProgressBarView';
 @import './layout/Skeleton/SkeletonView';
+@import './layout/Sidebar/SidebarView';
 @import './list/ControlsColumnView/ControlsColumnView';
 @import './list/CheckboxColumn/CheckboxColumnView';
 @import './list/Empty/EmptyView';

package/layout/Header/HeaderView.js

@@ -37,18 +37,55 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable consistent-return */
 var React = __importStar(require("react"));
 var nav_1 = require("@steroidsjs/core/ui/nav");
 var Nav_1 = __importDefault(require("@steroidsjs/core/ui/nav/Nav"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var form_1 = require("@steroidsjs/core/ui/form");
+var modal_1 = require("@steroidsjs/core/actions/modal");
+var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
 function HeaderView(props) {
+    var _a, _b, _c, _d, _e;
     var bem = (0, hooks_1.useBem)('HeaderView');
-    return (React.createElement("header", { className: bem(bem.block(), props.className) },
-        props.logo && (React.createElement(nav_1.Link, __assign({ className: bem('navbar-brand', bem.element('logo')), toRoute: 'root' }, props.logo.linkProps),
-            props.logo.icon && (React.createElement(Icon_1["default"], { className: bem.element('logo-image'), name: props.logo.icon, title: props.logo.title })),
-            props.logo.title || '')),
-        props.nav && (React.createElement(Nav_1["default"], __assign({ layout: 'navbar' }, props.nav))),
+    var dispatch = (0, hooks_1.useDispatch)();
+    var renderAuthBlock = React.useCallback(function () {
+        var _a, _b;
+        return (React.createElement(form_1.Button, __assign({ outline: true, color: 'basic', toRoute: (_a = props.authParams) === null || _a === void 0 ? void 0 : _a.toRoute, className: bem.element('auth-btn'), size: props.size }, (_b = props.authParams) === null || _b === void 0 ? void 0 : _b.buttonProps, { onClick: function () { var _a; return dispatch((0, modal_1.openModal)((_a = props.authParams) === null || _a === void 0 ? void 0 : _a.modal)); } }), __('Войти')));
+    }, [bem, dispatch, (_a = props.authParams) === null || _a === void 0 ? void 0 : _a.buttonProps, (_b = props.authParams) === null || _b === void 0 ? void 0 : _b.modal, (_c = props.authParams) === null || _c === void 0 ? void 0 : _c.toRoute, props.size]);
+    var renderUserBlock = React.useCallback(function () {
+        var _a, _b, _c;
+        if (!props.user) {
+            return;
+        }
+        return (React.createElement("div", { className: bem.element('menu') },
+            React.createElement(Text_1["default"], { className: bem.element('menu-name') }, (_a = props.user) === null || _a === void 0 ? void 0 : _a.name),
+            React.createElement(content_1.Menu, __assign({ icon: (React.createElement(content_1.Avatar, __assign({ size: props.size, className: bem.element('menu-avatar') }, (_b = props.user) === null || _b === void 0 ? void 0 : _b.avatar))) }, (_c = props.user) === null || _c === void 0 ? void 0 : _c.menu))));
+    }, [bem, props.size, props.user]);
+    var renderBurger = React.useCallback(function () {
+        var _a;
+        return (React.createElement("div", { className: bem.element('burger') },
+            React.createElement(content_1.Icon, { name: !props.isBurgerOpened ? 'sort' : 'cross_12x12', className: bem.element('burger-icon'), onClick: props.toggleBurger }),
+            React.createElement("div", { className: bem.element('burger-menu', {
+                    isVisible: props.isBurgerOpened
+                }) },
+                React.createElement("ul", { className: bem.element('burger-list') }, (_a = props.burgerMenu.links) === null || _a === void 0 ? void 0 : _a.map(function (linkProps, linkIndex) { return (React.createElement("li", { key: linkIndex, className: "burger-item" },
+                    React.createElement(nav_1.Link, __assign({}, linkProps)))); })))));
+    }, [bem, (_d = props.burgerMenu) === null || _d === void 0 ? void 0 : _d.links, props.isBurgerOpened, props.toggleBurger]);
+    return (React.createElement("header", { className: bem(bem.block({
+            size: props.size
+        }), props.className), style: props.style },
+        props.logo && (React.createElement(nav_1.Link, __assign({ className: bem.element('logo'), toRoute: 'root', size: props.size }, props.logo.linkProps),
+            props.logo.icon && ((0, renderIcon_1["default"])(props.logo.icon, {
+                className: bem.element('logo-image')
+            })),
+            React.createElement("span", { className: bem.element('logo-title') }, props.logo.title || ''))),
+        props.nav && (React.createElement(Nav_1["default"], __assign({ size: props.size, layout: 'navbar', className: bem.element('nav') }, props.nav))),
+        React.createElement("div", { className: bem.element('interaction') },
+            ((_e = props === null || props === void 0 ? void 0 : props.authParams) === null || _e === void 0 ? void 0 : _e.isAuth) ? renderAuthBlock() : renderUserBlock(),
+            props.burgerMenu && renderBurger()),
         props.children));
 }
 exports["default"] = HeaderView;

package/layout/Header/HeaderView.scss

@@ -1,30 +1,138 @@
 .HeaderView {
-  display: flex;
-  justify-content: space-between;
-  padding: 15px 20px;
-  width: 100%;
-  background-color: $gray;
-
-  a:hover {
-    opacity: .7;
-  }
-
-  &__logo {
-    .ButtonView__text {
-      color: $text-color;
-    }
-  }
-  
-  &__logo-image {
-    margin-right: 12px;
-    display: inline-block;
+    width: 1000px;
+    display: flex;
+    align-items: center;
+    background-color: $element-background-color;
+    border-bottom: 1px solid $element-placeholder-color-disabled;
     position: relative;
-    top: -2px;
-    width: 24px;
-    height: 24px;
-  }
-  &__logo-svg {
-    margin-right: 12px;
-  }
-
-}
+
+    &_size {
+        &_sm {
+            padding: 6px 16px;
+        }
+        &_md {
+            padding: 14px 16px;
+        }
+        &_lg {
+            padding: 22px 16px;
+        }
+    }
+
+    &__logo {
+        margin-right: 136px;
+
+        .ButtonView__text {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            column-gap: 9px;
+        }
+
+        &-image {
+            width: 36px;
+            height: 36px;
+        }
+
+        &-title {
+            color: $text-color;
+            font-weight: $font-weight-lg;
+            font-size: $font-size-base;
+            line-height: $line-height-base;
+        }
+    }
+
+    &__logo-svg {
+        margin-right: 12px;
+    }
+
+    .NavBarView__list {
+        flex-flow: row nowrap;
+        column-gap: 8px;
+    }
+
+    &__nav {
+        @media (max-width: 361px) {
+            display: none;
+        }
+    }
+
+    &__menu {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        column-gap: 8px;
+
+        &-name.TextView_type_body {
+            margin: 0;
+            font-weight: $font-weight-lg;
+            font-size: $font-size-base;
+            line-height: $line-height-base;
+
+            @media (max-width: 360px) {
+                display: none;
+            }
+        }
+    }
+
+    &__auth-btn {
+        margin-left: auto;
+    }
+
+    &__burger {
+        cursor: pointer;
+        margin-left: auto;
+        display: block;
+
+        width: 24px;
+        height: 24px;
+
+        @media (max-width: 360px) {
+            display: block;
+        }
+
+        &-menu {
+            z-index: 999;
+            width: 100%;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            background-color: $white;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 150ms ease-in-out;
+
+            &_isVisible {
+                opacity: 1;
+                pointer-events: all;
+            }
+            .ButtonView__text {
+                color: $element-placeholder-color;
+            }
+        }
+
+        &-icon {
+            width: 24px;
+            height: 24px;
+            svg path {
+                stroke: $icon-color;
+            }
+        }
+
+        &-list {
+            padding: 32px 16px;
+            flex-flow: column nowrap;
+            display: flex;
+            row-gap: 16px;
+            align-items: flex-start;
+            background-color: $element-background-color;
+        }
+    }
+
+    &__interaction {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        margin-left: auto;
+        column-gap: 16px;
+    }
+}

package/layout/Sidebar/FooterIcons/FooterIcons.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IIconProps } from '@steroidsjs/core/ui/content/Icon/Icon';
+import './FooterIcons.scss';
+interface IFooterIconsProps {
+    footerIcons?: IIconProps[];
+    isShink?: boolean;
+}
+declare function FooterIcons(props: IFooterIconsProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FooterIcons>;
+export default _default;

package/layout/Sidebar/FooterIcons/FooterIcons.js

@@ -0,0 +1,54 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon/Icon"));
+var renderIcon_1 = __importDefault(require("../../../utils/renderIcon"));
+require("./FooterIcons.scss");
+function FooterIcons(props) {
+    var _a;
+    var bem = (0, useBem_1["default"])('FooterIcons');
+    return (react_1["default"].createElement("ul", { className: bem(bem.block({
+            isShrink: props.isShink
+        })) }, props.isShink
+        ? (react_1["default"].createElement(Icon_1["default"], { name: 'share', className: bem.element('item') }))
+        : (_a = props.footerIcons) === null || _a === void 0 ? void 0 : _a.map(function (icon, iconIndex) { return (react_1["default"].createElement("li", { key: iconIndex, className: bem.element('item') }, (0, renderIcon_1["default"])(icon === null || icon === void 0 ? void 0 : icon.name, __assign({}, icon)))); })));
+}
+exports["default"] = (0, react_1.memo)(FooterIcons);

package/layout/Sidebar/FooterIcons/FooterIcons.scss

@@ -0,0 +1,36 @@
+@import "style/variables";
+
+:root {
+    --footer-shrink-icon-color: #626262;
+}
+
+html[data-theme="dark"] {
+    --footer-shrink-icon-color: #adacac;
+}
+
+$footer-shrink-icon-color: var(--footer-shrink-icon-color);
+
+.FooterIcons {
+    padding: 16px 12px;
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+
+    &__item {
+        cursor: pointer;
+    }
+
+    &_isShrink {
+        justify-content: center;
+        align-items: center;
+
+        .IconView {
+            svg path,
+            rect,
+            circle {
+                stroke: $footer-shrink-icon-color;
+            }
+        }
+    }
+}

package/layout/Sidebar/FooterIcons/index.d.ts

@@ -0,0 +1,2 @@
+import FooterIcons from './FooterIcons';
+export default FooterIcons;

package/layout/Sidebar/FooterIcons/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var FooterIcons_1 = __importDefault(require("./FooterIcons"));
+exports["default"] = FooterIcons_1["default"];

package/layout/Sidebar/SidebarLogo/SidebarLogo.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './SidebarLogo.scss';
+interface ISidebarLogoProps {
+    icon: string | React.ReactElement;
+    label: string;
+    toggleSidebar: () => void;
+}
+declare function SidebarLogo(props: ISidebarLogoProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof SidebarLogo>;
+export default _default;

package/layout/Sidebar/SidebarLogo/SidebarLogo.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var renderIcon_1 = __importDefault(require("../../../utils/renderIcon"));
+require("./SidebarLogo.scss");
+function SidebarLogo(props) {
+    var bem = (0, useBem_1["default"])('SidebarLogo');
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement("div", { className: bem.element('left') },
+            (0, renderIcon_1["default"])(props.icon, {
+                className: bem.element('icon')
+            }),
+            react_1["default"].createElement("h3", { className: bem.element('label') }, props.label)),
+        react_1["default"].createElement(content_1.Icon, { name: 'menu_left', className: bem.element('right'), onClick: props.toggleSidebar })));
+}
+exports["default"] = (0, react_1.memo)(SidebarLogo);

package/layout/Sidebar/SidebarLogo/SidebarLogo.scss

@@ -0,0 +1,52 @@
+@import "style/variables";
+
+.SidebarLogo {
+    padding: 19px 12px 8px 12px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    border-bottom: 1px solid $element-border-color;
+
+    &__left {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        column-gap: 9px;
+        position: relative;
+        cursor: pointer;
+        transform: translateY(-4px);
+    }
+
+    &__label {
+        font-size: $font-size-base;
+        font-weight: $font-weight-lg;
+        line-height: $line-height-base;
+        color: $sidebar-label-color;
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+
+    }
+
+    &__icon {
+        width: 34px;
+        min-width: 34px;
+        height: 34px;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__right {
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+
+        svg path, rect, circle { 
+            stroke: $icon-color;
+        }
+    }
+}

package/layout/Sidebar/SidebarLogo/index.d.ts

@@ -0,0 +1,2 @@
+import SidebarLogo from './SidebarLogo';
+export default SidebarLogo;

package/layout/Sidebar/SidebarLogo/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var SidebarLogo_1 = __importDefault(require("./SidebarLogo"));
+exports["default"] = SidebarLogo_1["default"];

package/layout/Sidebar/SidebarUser/SidebarUser.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IMenuProps } from '@steroidsjs/core/ui/content/Menu/Menu';
+import './SidebarUser.scss';
+interface ISidebarUserProps {
+    menu: IMenuProps;
+    name: string;
+    picture: string;
+}
+declare function SidebarUser(props: ISidebarUserProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof SidebarUser>;
+export default _default;

package/layout/Sidebar/SidebarUser/SidebarUser.js

@@ -0,0 +1,53 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Menu_1 = __importDefault(require("@steroidsjs/core/ui/content/Menu/Menu"));
+var content_1 = require("@steroidsjs/core/ui/content");
+require("./SidebarUser.scss");
+function SidebarUser(props) {
+    var bem = (0, useBem_1["default"])('SidebarUser');
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement("div", { className: bem.element('left') },
+            react_1["default"].createElement(content_1.Avatar, { size: "sm", src: props.picture, className: bem.element('avatar') }),
+            react_1["default"].createElement("p", { className: bem.element('name') }, props.name)),
+        react_1["default"].createElement(Menu_1["default"], __assign({}, props === null || props === void 0 ? void 0 : props.menu))));
+}
+exports["default"] = (0, react_1.memo)(SidebarUser);

package/layout/Sidebar/SidebarUser/SidebarUser.scss

@@ -0,0 +1,45 @@
+@import "style/variables";
+
+.SidebarUser {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px 0px 12px;
+
+    &__left {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        column-gap: 12px;
+        transform: translateX(1px) translateY(1px);
+
+        .AvatarView { 
+            width: 36px;
+            height: 36px;
+        }
+    }
+
+    &__name {
+        width: 128px;
+
+        font-size: $font-size-sm;
+        font-weight: $font-weight-sm;
+        line-height: $line-height-sm;
+        color: $sidebar-label-color;
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+    }
+
+    .MenuView__button .IconView.MenuView__icon {
+        width: 24px;
+        height: 24px;
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}

package/layout/Sidebar/SidebarUser/index.d.ts

@@ -0,0 +1,2 @@
+import SidebarUser from './SidebarUser';
+export default SidebarUser;

package/layout/Sidebar/SidebarUser/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var SidebarUser_1 = __importDefault(require("./SidebarUser"));
+exports["default"] = SidebarUser_1["default"];

package/layout/Sidebar/SidebarView.d.ts

@@ -0,0 +1,2 @@
+import { ISidebarViewProps } from '@steroidsjs/core/ui/layout/Sidebar/Sidebar';
+export default function SidebarView(props: ISidebarViewProps): JSX.Element;

package/layout/Sidebar/SidebarView.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var nav_1 = require("@steroidsjs/core/ui/nav");
+var SidebarUser_1 = __importDefault(require("./SidebarUser"));
+var SidebarLogo_1 = __importDefault(require("./SidebarLogo"));
+var FooterIcons_1 = __importDefault(require("./FooterIcons"));
+function SidebarView(props) {
+    var bem = (0, useBem_1["default"])('SidebarView');
+    return (react_1["default"].createElement("aside", { className: bem(bem.block({
+            isOpened: props.isOpened,
+            hasSeparatedItem: props.hasSeparatedNavItem
+        }), props.className), style: props.style },
+        react_1["default"].createElement("header", { className: bem.element('header') },
+            react_1["default"].createElement(SidebarLogo_1["default"], { icon: props.logo.icon, label: props.logo.label, toggleSidebar: props.toggleSidebar }),
+            react_1["default"].createElement(SidebarUser_1["default"], { menu: props.menu, name: props.user.name, picture: props.user.picture })),
+        react_1["default"].createElement(nav_1.Nav, { items: props.items, layout: "icon", className: bem.element('nav'), onChange: props === null || props === void 0 ? void 0 : props.onClickNav }),
+        react_1["default"].createElement("footer", { className: bem.element('footer') },
+            react_1["default"].createElement(FooterIcons_1["default"], { footerIcons: props.footerIcons, isShink: !props.isOpened })),
+        react_1["default"].createElement("div", { className: bem.element('trigger'), onClick: props.toggleSidebar })));
+}
+exports["default"] = SidebarView;

package/layout/Sidebar/SidebarView.scss

@@ -0,0 +1,302 @@
+:root {
+    --sidebar-text-color: #00000099;
+    --sidebar-text-hover-color: #312c3a;
+    --sidebar-text-active-color: #312c3a;
+    --sidebar-item-hover-color: #f1f5f7;
+    --sidebar-item-active-color: #dbe2e6;
+    --sidebar-border-color: rgba(0, 0, 0, 0.1);
+    --sidebar-parent-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikljb25zL0ljb25zMjQmIzIwOTsmIzEzMzsyNC9XaGl0ZS9hcnJvdy9FeHBhbmRfcmlnaHRfOCI+CjxwYXRoIGlkPSJWZWN0b3IgOSIgZD0iTTEwIDguODk3NThMMTQgMTIuODk3NkwxMCAxNi44OTc2IiBzdHJva2U9IiM2MjYyNjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=");
+    --sidebar-default-icon-color: #626262;
+    --sidebar-hover-icon-color: #323232;
+    --sidebar-active-icon-color: #323232;
+
+    --sidebar-badge-border-color: #dbe2e6;
+}
+
+html[data-theme="dark"] {
+    --sidebar-text-color: #ffffff99;
+    --sidebar-text-hover-color: #ffffff;
+    --sidebar-text-active-color: #fff;
+    --sidebar-item-hover-color: rgba(0, 0, 0, 0.3);
+    --sidebar-item-active-color: #272a37;
+    --sidebar-border-color: rgba(255, 255, 255, 0.1);
+    --sidebar-parent-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikljb25zL0ljb25zMjQmIzIwOTsmIzEzMzsyNC9XaGl0ZS9hcnJvdy9FeHBhbmRfcmlnaHRfOCI+CjxwYXRoIGlkPSJWZWN0b3IgOSIgZD0iTTEwIDguODk3NThMMTQgMTIuODk3NkwxMCAxNi44OTc2IiBzdHJva2U9IiNBREFDQUMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=");
+    --sidebar-default-icon-color: rgba(255, 255, 255, 0.6);
+    --sidebar-hover-icon-color: #ffffff;
+    --sidebar-active-icon-color: #ffffff;
+
+    --sidebar-badge-border-color: #272a37;
+}
+
+$sidebar-text-color: var(--sidebar-text-color);
+$sidebar-text-hover-color: var(--sidebar-text-hover-color);
+$sidebar-text-active-color: var(--sidebar-text-active-color);
+$sidebar-item-hover-color: var(--sidebar-item-hover-color);
+$sidebar-item-active-color: var(--sidebar-item-active-color);
+$sidebar-border-color: var(--sidebar-border-color);
+$sidebar-parent-icon: var(--sidebar-parent-icon);
+$sidebar-default-icon-color: var(--sidebar-default-icon-color);
+$sidebar-hover-icon-color: var(--sidebar-hover-icon-color);
+$sidebar-active-icon-color: var(--sidebar-active-icon-color);
+
+$sidebar-badge-border-color: var(--sidebar-badge-border-color);
+
+.SidebarView {
+    $root: &;
+    position: relative;
+    padding: 8px;
+    max-width: 72px;
+    transition: max-width 250ms ease-in-out;
+    background-color: $element-background-color;
+
+    &__header {
+        margin-bottom: 80px;
+    }
+
+    .ButtonView .ButtonView__link .ButtonView__text {
+        color: $sidebar-text-color;
+        font-size: $font-size-14;
+        font-weight: $font-weight-sm;
+        line-height: $line-height-18;
+        transition: color 150ms ease-in-out;
+        opacity: 0;
+    }
+
+    .NavIconView__list-item .ButtonView .ButtonView__link {
+        width: 24px;
+    }
+
+    .ButtonView {
+        width: 100%;
+        padding: 12px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &__icon {
+            margin-right: 0;
+            min-width: 24px;
+        }
+
+        &__link {
+            gap: 8px;
+        }
+    }
+
+    &__nav {
+        .NavIconView__list {
+            flex-flow: column nowrap;
+            align-items: flex-start;
+            gap: 4px;
+
+            &-item {
+                position: relative;
+                width: 100%;
+                border-radius: $radius-large;
+
+                svg path,
+                rect,
+                circle {
+                    stroke: $icon-color;
+                }
+
+                transition: background-color 150ms ease-in-out;
+
+                //Состояние hover для элемента
+                .ButtonView:hover {
+                    background-color: $sidebar-item-hover-color;
+
+                    .ButtonView__icon {
+                        svg path,
+                        circle,
+                        rect {
+                            stroke: $sidebar-hover-icon-color;
+                        }
+                    }
+                    .ButtonView__text {
+                        color: $sidebar-text-hover-color;
+                    }
+                }
+
+                //Состояние active для элемента
+                &_active > .ButtonView {
+                    background-color: $sidebar-item-active-color;
+
+                    .ButtonView__icon {
+                        svg path,
+                        circle,
+                        rect {
+                            stroke: $sidebar-active-icon-color;
+                        }
+                    }
+
+                    .ButtonView__text {
+                        color: $sidebar-text-active-color;
+                    }
+                }
+
+                &_hasBorder {
+                    &::before {
+                        content: "";
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 1px;
+                        margin-bottom: 4px;
+                        background-color: $sidebar-border-color;
+                    }
+                }
+
+                //Стрелка для родительского элемента внутри которого есть другие пункты
+                &_hasItems > .ButtonView {
+                    position: relative;
+                    &::after {
+                        content: "";
+                        display: block;
+                        position: absolute;
+                        pointer-events: none;
+                        top: 50%;
+                        right: 12px;
+                        width: 24px;
+                        height: 24px;
+                        background-image: $sidebar-parent-icon;
+                        background-size: cover;
+                        transform: translateY(-50%);
+                        transition: transform 150ms ease-in-out;
+                    }
+                }
+
+                //Поворот стрелки при активации элемента
+                &_active.NavIconView__list-item_hasItems > .ButtonView::after {
+                    transform: translateY(-50%) rotate(90deg);
+                }
+
+                //Поворот стрелки если есть дочерний активированный элемент
+                &_nestedActive > .ButtonView::after {
+                    transform: translateY(-50%) rotate(90deg);
+                }
+
+                .ButtonView__badge {
+                    position: absolute;
+                    bottom: 3px;
+                    top: auto;
+                    right: 7px;
+                    border-radius: 160px;
+                    padding: 1px;
+                    border: 2px solid $sidebar-badge-border-color;
+                }
+
+                .ButtonView__icon {
+                    svg path,
+                    rect,
+                    circle {
+                        stroke: $sidebar-default-icon-color;
+                    }
+                }
+
+                &-nested {
+                    width: 100%;
+                    margin: 0;
+                    &-item {
+                        .ButtonView {
+                            padding-left: 54px;
+                        }
+
+                        //Состояние hover для вложенного элемента
+                        &:hover:not(.NavIconView__list-item-nested-item_active) > .ButtonView {
+                            background-color: $sidebar-item-hover-color;
+
+                            .ButtonView__text {
+                                color: $sidebar-text-hover-color;
+                            }
+                        }
+
+                        //Состояние active для вложенного элемента
+                        &_active > .ButtonView {
+                            background-color: $sidebar-item-active-color;
+
+                            .ButtonView__text {
+                                color: $sidebar-text-active-color;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .NavIconView__list-item:nth-last-child(1) {
+        margin-bottom: 160px;
+    }
+
+    &_hasSeparatedItem {
+        //Декоративный элемент перед последним пунктом
+        .NavIconView__list-item:nth-last-child(2) {
+            margin-bottom: 160px;
+        }
+
+        .NavIconView__list-item:nth-last-child(1) {
+            margin-bottom: 0;
+        }
+    }
+
+    &__footer {
+        border-top: 1px solid $element-border-color;
+    }
+
+    &__trigger {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        cursor: pointer;
+    }
+
+    &_isOpened {
+        max-width: 276px;
+
+        .SidebarLogo__label {
+            opacity: 1;
+        }
+
+        .SidebarLogo__right {
+            opacity: 1;
+        }
+
+        .SidebarUser__name {
+            opacity: 1;
+        }
+
+        .SidebarUser .MenuView__button .IconView.MenuView__icon {
+            opacity: 1;
+        }
+
+        .ButtonView .ButtonView__link .ButtonView__text {
+            opacity: 1;
+        }
+
+        .NavIconView__list-item .ButtonView .ButtonView__link {
+            width: auto;
+        }
+
+        .ButtonView {
+            justify-content: flex-start;
+        }
+
+        .ButtonView__badge {
+            position: absolute;
+            padding: 3px 8px !important;
+            top: 50%;
+            right: 12px;
+            border-radius: 160px;
+            padding: 1px;
+            border: none;
+            transform: translateY(-30%);
+        }
+        #{$root}__trigger {
+            display: none;
+        }
+    }
+}

package/layout/Sidebar/index.d.ts

@@ -0,0 +1,2 @@
+import SidebarView from './SidebarView';
+export default SidebarView;

package/layout/Sidebar/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var SidebarView_1 = __importDefault(require("./SidebarView"));
+exports["default"] = SidebarView_1["default"];

package/nav/Nav/NavIconView.js

@@ -44,11 +44,25 @@ var DEFAULT_ICON = 'add';
 function NavIconView(props) {
     var bem = (0, hooks_1.useBem)('NavIconView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
-                active: item.isActive,
-                disabled: item.disabled
-            }), props.navClassName) },
-            React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : DEFAULT_ICON, link: true, onClick: function () { return props.onClick(item, index); } }, item, { label: item.label, hint: item.hint || item.label || null })))); })),
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) {
+            var _a;
+            var isDisabled = item.disabled;
+            var isActive = item.isActive;
+            var isActiveNested = item.isActiveNested;
+            var isBorder = item.border;
+            return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                    active: isActive,
+                    disabled: isDisabled,
+                    nestedActive: isActiveNested,
+                    hasItems: !!item.items,
+                    hasBorder: isBorder
+                }), props.navClassName) },
+                React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : DEFAULT_ICON, link: true, onClick: function () { return props.onClick(item, index); } }, item, { label: item.label, hint: item.hint || item.label || null }, item.itemProps)),
+                !isDisabled && (isActive || isActiveNested) && (React.createElement("ul", { className: bem.element('list-item-nested') }, (_a = item.items) === null || _a === void 0 ? void 0 : _a.map(function (nestedItem, nestedItemIndex) { return (React.createElement("li", { key: nestedItemIndex, className: bem.element('list-item-nested-item', {
+                        active: nestedItem.isActive
+                    }) },
+                    React.createElement(Button_1["default"], __assign({ link: true, onClick: function () { return props.onClick(nestedItem, nestedItemIndex); } }, nestedItem, { label: nestedItem.label, hint: item.hint })))); })))));
+        })),
         React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavIconView;

package/nav/Nav/NavIconView.scss

@@ -7,7 +7,7 @@
 
         &-item {
             display: flex;
-            flex-flow: row nowrap;
+            flex-flow: column nowrap;
             align-items: center;
             color: $text-color;
             column-gap: 8px;
@@ -23,6 +23,12 @@
             &_disabled .ButtonView_disabled .ButtonView__link .ButtonView__text { 
                 color: $element-placeholder-color-disabled;
             }
+
+            &-nested { 
+                display: flex;
+                flex-flow: column nowrap;
+                margin-left: 54px;
+            }
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.81",
+    "version": "3.0.0-beta.83",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,7 +37,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.59",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.62",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",

package/scss/variables/common/colors.scss

@@ -46,11 +46,13 @@
 
     --scroll-thumb-color: #cbd5db;
     --scroll-track-color: #f1f5f7;
+    --icon-color: #323232;
 
     --diagram-success: var(--success-light);
     --diagram-warning: var(--warning-light);
     --diagram-danger: var(--danger-light);
     --diagram-secondary: var(--secondary-light);
+    --sidebar-label-color: #312C3A;
 }
 
 html[data-theme="dark"] {
@@ -100,11 +102,13 @@ html[data-theme="dark"] {
 
     --scroll-thumb-color: #333646;
     --scroll-track-color: #26272f;
+    --icon-color: #FFFFFF;
 
     --diagram-success: var(--success-dark);
     --diagram-warning: var(--warning-dark);
     --diagram-danger: var(--danger-dark);
     --diagram-secondary: var(--secondary-dark);
+    --sidebar-label-color: #ffffff;
 }
 
 $primary: var(--primary);
@@ -154,11 +158,14 @@ $element-field-background-color: var(--element-field-background-color);
 
 $scroll-thumb-color: var(--scroll-thumb-color);
 $scroll-track-color: var(--scroll-track-color);
+$icon-color: var(--icon-color);
+
 
 $diagram-success: var(--diagram-success);
 $diagram-warning: var(--diagram-warning);
 $diagram-danger: var(--diagram-danger);
 $diagram-secondary: var(--diagram-secondary);
+$sidebar-label-color: var(--sidebar-label-color);
 //** Themed colors **//
 
 //! Base colors !//