revdev-components 0.12.0 → 0.14.0

package/build/back-layout/index.d.ts

@@ -2,16 +2,16 @@ import React from "react";
 import { BackSidebarProps } from "src/back-sidebar";
 interface Props {
     loading?: boolean;
-    shortMode?: boolean;
     header?: React.ReactNode;
     sidebar?: React.ReactNode;
     children?: React.ReactNode;
+    sidebarTitle?: React.ReactNode;
     className?: string;
     headerClassName?: string;
     sidebarClassName?: string;
     contentClassName?: string;
     loadingClassName?: string;
-    sidebarProps: BackSidebarProps;
+    sidebarProps: Omit<BackSidebarProps, "shortMode">;
 }
 export declare const BackLayout: React.FC<Props>;
 export {};

package/build/index.js

@@ -4916,7 +4916,7 @@ var BackSidebarMenuItem = function (_a) {
             React.createElement("span", { className: s$4.title__label }, label),
             React.createElement(RegularIcon, { name: open ? "keyboard-arrow-down" : "keyboard-arrow-right" })),
         React.createElement("div", { className: classNames(s$4.list, (_c = {}, _c[s$4.list__open] = open, _c)) }, options.map(function (x, i) {
-            return React.createElement(BackSidebarSubMenuItem, { key: i, option: x });
+            return React.createElement(BackSidebarSubMenuItem, { key: i, option: x, activePath: activePath });
         }))));
 };
 
@@ -4955,15 +4955,22 @@ var BackSidebar = function (_a) {
         }))));
 };
 
-var s = {"root":"index-module_root__BkOp7","root__short":"index-module_root__short__maBe-","header":"index-module_header__34B0-","sidebar":"index-module_sidebar__xjW3v","content":"index-module_content__cMuen","loading":"index-module_loading__KxkST"};
+var s = {"root":"index-module_root__BkOp7","root__short":"index-module_root__short__maBe-","header":"index-module_header__34B0-","sidebar":"index-module_sidebar__xjW3v","content":"index-module_content__cMuen","loading":"index-module_loading__KxkST","menu":"index-module_menu__IwQDu","menu__icon":"index-module_menu__icon__KNyXp"};
 
 var BackLayout = function (_a) {
     var _b;
-    var className = _a.className, loading = _a.loading, shortMode = _a.shortMode, header = _a.header, children = _a.children, headerClassName = _a.headerClassName, sidebarClassName = _a.sidebarClassName, contentClassName = _a.contentClassName, loadingClassName = _a.loadingClassName, sidebarProps = _a.sidebarProps;
-    return (React.createElement("div", { className: classNames(s.root, className, (_b = {}, _b[s.root__short] = shortMode, _b)) },
+    var className = _a.className, loading = _a.loading, header = _a.header, sidebarTitle = _a.sidebarTitle, children = _a.children, headerClassName = _a.headerClassName, sidebarClassName = _a.sidebarClassName, contentClassName = _a.contentClassName, loadingClassName = _a.loadingClassName, sidebarProps = _a.sidebarProps;
+    var _c = React.useState(false), short = _c[0], setShort = _c[1];
+    var handleMenu = React.useCallback(function () {
+        setShort(!short);
+    }, [short]);
+    return (React.createElement("div", { className: classNames(s.root, className, (_b = {}, _b[s.root__short] = short, _b)) },
         React.createElement("div", { className: classNames(s.header, headerClassName) }, header),
         React.createElement("div", { className: classNames(s.sidebar, sidebarClassName) },
-            React.createElement(BackSidebar, __assign({}, sidebarProps))),
+            React.createElement("div", { className: s.menu },
+                React.createElement(RegularIcon, { className: s.menu__icon, name: "menu", onClick: handleMenu }),
+                !short && React.createElement("div", { className: s.menu__title }, sidebarTitle)),
+            React.createElement(BackSidebar, __assign({}, sidebarProps, { shortMode: short }))),
         loading ? (React.createElement("div", { className: classNames(s.loading, loadingClassName) },
             React.createElement(antd.Spin, { size: "large" }))) : (React.createElement("div", { className: classNames(s.content, contentClassName) }, children))));
 };

package/build/styles.css

@@ -190,14 +190,14 @@
   color: var(--backSidebarActiveColor) !important;
   text-decoration: none !important;
 }
-.index-module_root__active__32aMB > svg,
-.index-module_root__active__32aMB span {
-  color: var(--backSidebarActiveColor) !important;
-}
 .index-module_root__En9mt > svg,
 .index-module_root__En9mt span {
   color: var(--backSidebarColor) !important;
 }
+.index-module_root__active__32aMB > svg,
+.index-module_root__active__32aMB > span {
+  color: var(--backSidebarActiveColor) !important;
+}
 .index-module_root__v-d7O {
   position: relative;
 }
@@ -270,4 +270,20 @@
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+.index-module_menu__IwQDu {
+  padding: 15px 15px 0;
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+  align-items: center;
+  color: var(--backSidebarActiveColor);
+}
+.index-module_menu__icon__KNyXp {
+  font-size: 20px;
+  cursor: pointer;
+}
+.index-module_menu__icon__KNyXp:hover {
+  opacity: 0.9;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revdev-components",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "main": "build/index.js",
   "module": "build/index.esm.js",
   "scripts": {
@@ -25,13 +25,14 @@
     "classnames": ">=2.5",
     "lodash.debounce": ">=4",
     "next": ">=13",
+    "page-path": ">=0.7",
     "react": ">=18",
-    "react-dom": ">=18",
-    "page-path": ">=0.7"
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
     "@rollup/plugin-typescript": "^12.1.1",
+    "@storybook/addon-actions": "^8.4.5",
     "@storybook/addon-essentials": "^8.4.5",
     "@storybook/addon-interactions": "^8.4.5",
     "@storybook/addon-onboarding": "^8.4.5",