@pnkx-lib/ui 1.9.403 → 1.9.404

package/es/ui/SidebarV2.js

@@ -4,10 +4,11 @@ import { useState, useMemo } from 'react';
 import { t as twMerge } from '../chunks/bundle-mjs-BBFHkixS.js';
 import { AutoComplete, Divider, Dropdown, Flex } from 'antd';
 import { useLocation, useNavigate, Link } from 'react-router';
-import { Layout, Input } from '@pnkx-lib/ui';
 import { u as useDebounce, l as logoHeaderText, S as SearchIcon, V as VietNamIcon, D as DownOutlinedIcon, R as RefIcon$1 } from '../chunks/logo-header-DG8abRGF.js';
+import { Layout } from './Layout.js';
 import { R as RefIcon$2 } from '../chunks/DownOutlined-CkHKgaSi.js';
 import { I as Icon, _ as _extends } from '../chunks/AntdIcon-gUuMvf83.js';
+import { Input } from '../fields/Input.js';
 
 // This icon file is generated automatically.
 var DoubleLeftOutlined$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M272.9 512l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3a31.99 31.99 0 000 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512zm304 0l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3a31.99 31.99 0 000 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z" } }] }, "name": "double-left", "theme": "outlined" };
@@ -98,7 +99,7 @@ const SidebarV2 = ({ menu, children }) => {
   const searchSidebar = useDebounce(valueSearch, 300);
   const [showSubmenu, setShowSubmenu] = useState(false);
   const [activeModule, setActiveModule] = useState("");
-  const [openDropdownMenu, setOpenDropdownMenu] = useState(false);
+  const [openDropdownMenu, setOpenDropdownMenu] = useState(null);
   const location = useLocation();
   const pathName = location.pathname;
   const sidebarMenu = useMemo(
@@ -118,13 +119,17 @@ const SidebarV2 = ({ menu, children }) => {
     if (showSubmenu) return "ml-[279px]";
     return "ml-[62px]";
   };
-  const handleClickDropdownMenu = (isDropdown, pathUrl) => {
+  const handleClickDropdownMenu = (isDropdown, item) => {
     if (isDropdown) {
-      setOpenDropdownMenu(!openDropdownMenu);
+      setOpenDropdownMenu((prev) => prev === item.path ? null : item.path);
       return;
     }
-    console.log("pathUrl", pathUrl);
-    navigate(pathUrl);
+    navigate(item.path);
+  };
+  const handleNavigateModule = (item) => {
+    setShowSubmenu(true);
+    setHoverOpenMenu(false);
+    setActiveModule(item.path);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -212,9 +217,7 @@ const SidebarV2 = ({ menu, children }) => {
           "a",
           {
             onClick: () => {
-              setShowSubmenu(true);
-              setHoverOpenMenu(false);
-              setActiveModule(item.path);
+              handleNavigateModule(item);
             },
             className: classNames(
               item.path === activeModule ? "bg-[#007BE5] text-white" : "text-gray-400 hover:text-white hover:bg-[#007BE5]",
@@ -246,8 +249,8 @@ const SidebarV2 = ({ menu, children }) => {
         ),
         onMouseLeave: () => setShowSubmenu(true),
         children: [
-          sidebarMenu.map((submenu) => {
-            const isActiveMainMenu = activeModule === submenu.path;
+          sidebarMenu.map((moduleMenu) => {
+            const isActiveMainMenu = activeModule === moduleMenu.path;
             if (!isActiveMainMenu) return null;
             const normalizePath = (path) => {
               return path.trim().replace(/^\/+|\/+$/g, "").replace(/\/{2,}/g, "/").toLowerCase();
@@ -256,46 +259,51 @@ const SidebarV2 = ({ menu, children }) => {
               return normalizePath(a) === normalizePath(b);
             };
             return /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("span", { className: "block px-4 h-[42px] shadow-[0px_4px_6px_0px_#0006241f] py-2  text-[16px] font-semibold text-[#1F1F1F]", children: submenu.name }),
-              /* @__PURE__ */ jsx("ul", { className: "mt-4", children: submenu.children?.map((item) => {
-                const pathActive = comparePaths(pathName, item.path);
-                const isDropwdown = item.isShow;
+              /* @__PURE__ */ jsx("span", { className: "block px-4 h-[42px] shadow-[0px_4px_6px_0px_#0006241f] py-2 text-[16px] font-semibold text-[#1F1F1F]", children: moduleMenu.name }),
+              /* @__PURE__ */ jsx("ul", { className: "mt-4", children: moduleMenu.children?.map((subMenu) => {
+                const pathActive = comparePaths(pathName, subMenu.path);
+                const isDropwdown = subMenu.isShow;
+                const activeMenu = pathName.startsWith(subMenu.path);
                 return /* @__PURE__ */ jsxs("li", { children: [
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      onClick: () => handleClickDropdownMenu(isDropwdown, item.path),
+                      onClick: () => handleClickDropdownMenu(isDropwdown, subMenu),
                       className: twMerge(
-                        "px-4 py-2 mt-1 items-center cursor-pointer flex text-sm hover:bg-[#E5F4FF] hover:text-[#007BE5]",
-                        pathActive && !isDropwdown ? "!text-[#007BE5] !bg-[#E5F4FF]" : isDropwdown && pathActive ? "!text-[#007BE5]" : "text-[#1F1F1F]"
+                        "px-4 py-2 mt-1 items-center gap-2 cursor-pointer flex text-sm hover:bg-[#E5F4FF] hover:text-[#007BE5]",
+                        pathActive && !isDropwdown ? "!text-[#007BE5] !bg-[#E5F4FF]" : isDropwdown && (pathActive || activeMenu) ? "!text-[#007BE5]" : "text-[#1F1F1F]"
                       ),
                       children: [
-                        item.name,
-                        isDropwdown && (openDropdownMenu ? /* @__PURE__ */ jsx(RefIcon$1, { className: "w-4 h-4 ml-auto" }) : /* @__PURE__ */ jsx(RefIcon$2, { className: "w-4 h-4 ml-auto" }))
+                        subMenu.icon,
+                        subMenu.name,
+                        isDropwdown && openDropdownMenu === subMenu.path ? /* @__PURE__ */ jsx(RefIcon$1, { className: "w-4 h-4 ml-auto" }) : isDropwdown && /* @__PURE__ */ jsx(RefIcon$2, { className: "w-4 h-4 ml-auto" })
                       ]
                     }
                   ),
-                  isDropwdown && openDropdownMenu && item.children?.map((dropdownItem) => {
+                  isDropwdown && openDropdownMenu === subMenu.path && subMenu.children?.map((dropdownItem) => {
                     const pathActiveDropdown = comparePaths(
                       pathName,
-                      item.path
+                      subMenu.path
                     );
-                    const path = `${item.path}/${dropdownItem.path}`;
-                    return /* @__PURE__ */ jsx(
+                    const path = `${subMenu.path}/${dropdownItem.path}`;
+                    return /* @__PURE__ */ jsxs(
                       Link,
                       {
                         to: path,
                         className: twMerge(
-                          "px-4 py-2 mt-1 items-center flex text-sm hover:bg-[#E5F4FF] hover:text-[#007BE5]",
-                          pathActiveDropdown ? "!text-[#007BE5] !bg-[#E5F4FF]" : "text-[#1F1F1F]"
+                          "px-4 py-2 mt-1 items-center gap-2 flex text-sm hover:bg-[#E5F4FF] hover:text-[#007BE5]",
+                          pathActiveDropdown || activeMenu ? "!text-[#007BE5] !bg-[#E5F4FF]" : "text-[#1F1F1F]"
                         ),
-                        children: dropdownItem.name
+                        children: [
+                          dropdownItem.icon,
+                          dropdownItem.name
+                        ]
                       }
                     );
                   })
-                ] }, item.path);
+                ] }, subMenu.path);
               }) })
-            ] }, submenu.path);
+            ] }, moduleMenu.path);
           }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -304,7 +312,7 @@ const SidebarV2 = ({ menu, children }) => {
               onClick: () => setShowSubmenu(false),
               children: [
                 /* @__PURE__ */ jsx(RefIcon, {}),
-                /* @__PURE__ */ jsx("span", { className: "text-[#131313] text-[16px]", children: "Thu gọn menu" })
+                /* @__PURE__ */ jsx("span", { className: "text-[#131313]", children: "Thu gọn menu" })
               ]
             }
           )

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnkx-lib/ui",
   "private": false,
-  "version": "1.9.403",
+  "version": "1.9.404",
   "type": "module",
   "main": "./es/index.js",
   "module": "./es/index.js",

package/types/components/ui/SidebarV2.d.ts

@@ -7,6 +7,7 @@ export type MenuTypeV2 = {
     icon?: ReactNode;
     code?: string;
     isShowLabel?: boolean;
+    isModule?: boolean;
     component?: React.LazyExoticComponent<React.MemoExoticComponent<any>> | React.ExoticComponent<any> | ReactNode | React.FC;
     componentProps?: Record<string, any>;
     children?: MenuTypeV2[];