From 9bd798188d1e6a0d95f598d1f17aa602d6a14957 Mon Sep 17 00:00:00 2001 From: Mohamadzadeh <7796733@gmail.com> Date: Wed, 19 Aug 2026 19:00:54 +0330 Subject: [PATCH] fix sidebar --- README.md | 6 + dist/layout.js | 358 ++++++++++++++++++++++------------------- src/layout/Sidebar.jsx | 89 ++++++---- 3 files changed, 254 insertions(+), 199 deletions(-) diff --git a/README.md b/README.md index d7da3f4..746a18e 100644 --- a/README.md +++ b/README.md @@ -839,3 +839,9 @@ function UsersTable({ data, columns }) { ``` `Sidebar.Exit` از `logoutKeycloak` داخلی UI Kit استفاده می‌کند و callback خروج از سامانه مقصد نیاز ندارد. + +### Sidebar active route notes + +`Sidebar` compares `currentPath` with each item's `path` and `aliases`, ignoring query strings, hashes, and trailing slashes. Use the actual application route as `path`; use `aliases` only for alternate routes that should keep the same item active. + +Active sidebar items are rendered as non-links to avoid redundant same-route navigations. This is especially useful on pages that synchronize URL query params. diff --git a/dist/layout.js b/dist/layout.js index 95a0c83..056ce11 100644 --- a/dist/layout.js +++ b/dist/layout.js @@ -1,12 +1,12 @@ -import { jsx as A, jsxs as g, Fragment as H } from "react/jsx-runtime"; -import { Box as c, HStack as p, VStack as s, Image as Y, Text as d, useDisclosure as F, Stack as J, Tooltip as k, IconButton as N, Icon as C, Drawer as K, DrawerOverlay as q, DrawerContent as _, DrawerCloseButton as $, DrawerHeader as AA, DrawerBody as oA, SimpleGrid as eA, Link as nA } from "@chakra-ui/react"; -import { useRef as tA, Children as rA, isValidElement as gA, forwardRef as lA } from "react"; +import { jsx as o, jsxs as g, Fragment as F } from "react/jsx-runtime"; +import { Box as c, HStack as u, VStack as s, Image as T, Text as d, useDisclosure as J, Stack as K, Tooltip as j, IconButton as f, Icon as C, Drawer as q, DrawerOverlay as $, DrawerContent as _, DrawerCloseButton as AA, DrawerHeader as oA, DrawerBody as eA, SimpleGrid as nA, Link as tA } from "@chakra-ui/react"; +import { useRef as rA, Children as gA, isValidElement as lA, forwardRef as aA } from "react"; import { FiMoreHorizontal as iA } from "react-icons/fi/index.js"; import { IoExit as IA } from "react-icons/io5/index.js"; -import { u as aA, l as cA } from "./chunks/permission-DL7ciWwc.js"; -const dA = "data:image/webp;base64,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MCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE4LTA4LTEzVDE0OjI1OjUzKzA0OjMwPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx4bXA6Q3JlYXRlRGF0ZT4yMDE4LTA4LTEzVDE0OjI1OjUzKzA0OjMwPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNZXRhZGF0YURhdGU+MjAxOC0wOC0xM1QxNDoyNTo1MyswNDozMDwveG1wOk1ldGFkYXRhRGF0ZT4KICAgICAgICAgPHhtcE1NOkhpc3Rvcnk+CiAgICAgICAgICAgIDxyZGY6U2VxPgogICAgICAgICAgICAgICA8cmRmOmxpIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OnNvZnR3YXJlQWdlbnQ+QWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OndoZW4+MjAxOC0wOC0xM1QxNDoyNTo1MyswNDozMDwvc3RFdnQ6d2hlbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDoxMDU3ZjgxNy03YTEzLThiNGEtODc1Ni1lYWM1MWEyZDRiYTY8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+Y3JlYXRlZDwvc3RFdnQ6YWN0aW9uPgogICAgICAgICAgICAgICA8L3JkZjpsaT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cyk8L3N0RXZ0OnNvZnR3YXJlQWdlbnQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpjaGFuZ2VkPi88L3N0RXZ0OmNoYW5nZWQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMTgtMDgtMTNUMTQ6MjU6NTMrMDQ6MzA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDppbnN0YW5jZUlEPnhtcC5paWQ6MDZjNmM4ODYtZDY2My1jMzQzLTkwZTUtNjQ4ZWJlYTkxYzgxPC9zdEV2dDppbnN0YW5jZUlEPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6YWN0aW9uPnNhdmVkPC9zdEV2dDphY3Rpb24+CiAgICAgICAgICAgICAgIDwvcmRmOmxpPgogICAgICAgICAgICA8L3JkZjpTZXE+CiAgICAgICAgIDwveG1wTU06SGlzdG9yeT4KICAgICAgICAgPHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD54bXAuZGlkOjEwNTdmODE3LTdhMTMtOGI0YS04NzU2LWVhYzUxYTJkNGJhNjwveG1wTU06T3JpZ2luYWxEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD5hZG9iZTpkb2NpZDpwaG90b3Nob3A6NWI3ZmJlNDgtMDc0ZS01NzRhLWFlNTctN2RmYjA4NmI1N2Q3PC94bXBNTTpEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06SW5zdGFuY2VJRD54bXAuaWlkOjA2YzZjODg2LWQ2NjMtYzM0My05MGU1LTY0OGViZWE5MWM4MTwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgICAgPHBob3Rvc2hvcDpJQ0NQcm9maWxlPnNSR0IgSUVDNjE5NjYtMi4xPC9waG90b3Nob3A6SUNDUHJvZmlsZT4KICAgICAgICAgPHBob3Rvc2hvcDpDb2xvck1vZGU+MzwvcGhvdG9zaG9wOkNvbG9yTW9kZT4KICAgICAgICAgPHBob3Rvc2hvcDpEb2N1bWVudEFuY2VzdG9ycz4KICAgICAgICAgICAgPHJkZjpCYWc+CiAgICAgICAgICAgICAgIDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmEwYjgxNWMzLTkzYjMtODU0MC04NmY0LTA0OTEyZTY5Y2Y4NTwvcmRmOmxpPgogICAgICAgICAgICA8L3JkZjpCYWc+CiAgICAgICAgIDwvcGhvdG9zaG9wOkRvY3VtZW50QW5jZXN0b3JzPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4K"; -function CA({ children: o, ...n }) { - return /* @__PURE__ */ A( +import { u as cA, l as dA } from "./chunks/permission-DL7ciWwc.js"; +const CA = "data:image/webp;base64,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MCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE4LTA4LTEzVDE0OjI1OjUzKzA0OjMwPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx4bXA6Q3JlYXRlRGF0ZT4yMDE4LTA4LTEzVDE0OjI1OjUzKzA0OjMwPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNZXRhZGF0YURhdGU+MjAxOC0wOC0xM1QxNDoyNTo1MyswNDozMDwveG1wOk1ldGFkYXRhRGF0ZT4KICAgICAgICAgPHhtcE1NOkhpc3Rvcnk+CiAgICAgICAgICAgIDxyZGY6U2VxPgogICAgICAgICAgICAgICA8cmRmOmxpIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OnNvZnR3YXJlQWdlbnQ+QWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OndoZW4+MjAxOC0wOC0xM1QxNDoyNTo1MyswNDozMDwvc3RFdnQ6d2hlbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDoxMDU3ZjgxNy03YTEzLThiNGEtODc1Ni1lYWM1MWEyZDRiYTY8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+Y3JlYXRlZDwvc3RFdnQ6YWN0aW9uPgogICAgICAgICAgICAgICA8L3JkZjpsaT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cyk8L3N0RXZ0OnNvZnR3YXJlQWdlbnQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpjaGFuZ2VkPi88L3N0RXZ0OmNoYW5nZWQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMTgtMDgtMTNUMTQ6MjU6NTMrMDQ6MzA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDppbnN0YW5jZUlEPnhtcC5paWQ6MDZjNmM4ODYtZDY2My1jMzQzLTkwZTUtNjQ4ZWJlYTkxYzgxPC9zdEV2dDppbnN0YW5jZUlEPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6YWN0aW9uPnNhdmVkPC9zdEV2dDphY3Rpb24+CiAgICAgICAgICAgICAgIDwvcmRmOmxpPgogICAgICAgICAgICA8L3JkZjpTZXE+CiAgICAgICAgIDwveG1wTU06SGlzdG9yeT4KICAgICAgICAgPHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD54bXAuZGlkOjEwNTdmODE3LTdhMTMtOGI0YS04NzU2LWVhYzUxYTJkNGJhNjwveG1wTU06T3JpZ2luYWxEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD5hZG9iZTpkb2NpZDpwaG90b3Nob3A6NWI3ZmJlNDgtMDc0ZS01NzRhLWFlNTctN2RmYjA4NmI1N2Q3PC94bXBNTTpEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06SW5zdGFuY2VJRD54bXAuaWlkOjA2YzZjODg2LWQ2NjMtYzM0My05MGU1LTY0OGViZWE5MWM4MTwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgICAgPHBob3Rvc2hvcDpJQ0NQcm9maWxlPnNSR0IgSUVDNjE5NjYtMi4xPC9waG90b3Nob3A6SUNDUHJvZmlsZT4KICAgICAgICAgPHBob3Rvc2hvcDpDb2xvck1vZGU+MzwvcGhvdG9zaG9wOkNvbG9yTW9kZT4KICAgICAgICAgPHBob3Rvc2hvcDpEb2N1bWVudEFuY2VzdG9ycz4KICAgICAgICAgICAgPHJkZjpCYWc+CiAgICAgICAgICAgICAgIDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmEwYjgxNWMzLTkzYjMtODU0MC04NmY0LTA0OTEyZTY5Y2Y4NTwvcmRmOmxpPgogICAgICAgICAgICA8L3JkZjpCYWc+CiAgICAgICAgIDwvcGhvdG9zaG9wOkRvY3VtZW50QW5jZXN0b3JzPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4K"; +function sA({ children: e, ...A }) { + return /* @__PURE__ */ o( c, { as: "header", @@ -19,37 +19,37 @@ function CA({ children: o, ...n }) { zIndex: 10, position: "fixed", color: "white", - ...n, - children: /* @__PURE__ */ A(p, { h: "100%", alignItems: "center", justifyContent: "space-between", children: o }) + ...A, + children: /* @__PURE__ */ o(u, { h: "100%", alignItems: "center", justifyContent: "space-between", children: e }) } ); } -function sA({ children: o, ...n }) { - return /* @__PURE__ */ A(p, { alignItems: "center", h: "100%", py: "10px", ...n, children: o }); +function bA({ children: e, ...A }) { + return /* @__PURE__ */ o(u, { alignItems: "center", h: "100%", py: "10px", ...A, children: e }); } -function bA(o) { - return /* @__PURE__ */ A(Y, { loading: "lazy", alt: "logo", maxW: "80px", maxH: "80px", ...o }); +function pA(e) { + return /* @__PURE__ */ o(T, { loading: "lazy", alt: "logo", maxW: "80px", maxH: "80px", ...e }); } -function pA({ children: o, ...n }) { - return /* @__PURE__ */ A( +function hA({ children: e, ...A }) { + return /* @__PURE__ */ o( s, { alignItems: "start", justifyContent: "center", h: "100%", spacing: 1, - ...n, - children: o + ...A, + children: e } ); } -function hA({ children: o, ...n }) { - return /* @__PURE__ */ A(d, { fontWeight: "bold", fontSize: "20px", ...n, children: o }); +function uA({ children: e, ...A }) { + return /* @__PURE__ */ o(d, { fontWeight: "bold", fontSize: "20px", ...A, children: e }); } -function uA({ children: o, ...n }) { - return /* @__PURE__ */ A(d, { ...n, children: o }); +function xA({ children: e, ...A }) { + return /* @__PURE__ */ o(d, { ...A, children: e }); } -function xA({ logoSrc: o = dA, ...n }) { +function RA({ logoSrc: e = CA, ...A }) { return /* @__PURE__ */ g( s, { @@ -57,55 +57,74 @@ function xA({ logoSrc: o = dA, ...n }) { alignItems: "center", justifyContent: "center", py: "10px", - ...n, + ...A, children: [ - /* @__PURE__ */ A(Y, { src: o, loading: "lazy", maxW: "90px" }), - /* @__PURE__ */ A(d, { fontSize: "xs", fontWeight: "bold", textAlign: "center", children: "مؤسسه تولید سیستم‌های خبره و هوشمند اسلامی باقرالعلوم(ع)" }) + /* @__PURE__ */ o(T, { src: e, loading: "lazy", maxW: "90px" }), + /* @__PURE__ */ o(d, { fontSize: "xs", fontWeight: "bold", textAlign: "center", children: "مؤسسه تولید سیستم‌های خبره و هوشمند اسلامی باقرالعلوم(ع)" }) ] } ); } -const WA = Object.assign(CA, { - BrandSection: sA, - Logo: bA, - Brand: pA, - Title: hA, - Description: uA, - Bi: xA -}), E = (o, n) => { - const t = (o == null ? void 0 : o.split("?")[0]) || ""; - return [n == null ? void 0 : n.path, ...(n == null ? void 0 : n.aliases) || []].filter(Boolean).some( +const MA = Object.assign(sA, { + BrandSection: bA, + Logo: pA, + Brand: hA, + Title: uA, + Description: xA, + Bi: RA +}), E = (e = "") => { + const A = String(e).split(/[?#]/)[0] || ""; + return !A || A === "/" ? A || "/" : A.replace(/\/+$/, ""); +}, P = (e, A) => { + const t = E(e); + return [A == null ? void 0 : A.path, ...(A == null ? void 0 : A.aliases) || []].filter(Boolean).map(E).some( (l) => t === l || t.startsWith(`${l}/`) ); -}, MA = (o = [], n) => o.find((t) => E(n, t)), h = lA( - ({ linkComponent: o, href: n, children: t, ...r }, l) => /* @__PURE__ */ A(nA, { ref: l, href: n, ...o ? { as: o } : {}, ...r, children: t }) +}, zA = (e = [], A) => e.find((t) => P(A, t)), w = aA( + ({ linkComponent: e, href: A, children: t, ...r }, l) => /* @__PURE__ */ o(tA, { ref: l, href: A, ...e ? { as: e } : {}, ...r, children: t }) ); -h.displayName = "SidebarLink"; -const RA = ({ - item: o, - isActive: n, +w.displayName = "SidebarLink"; +const mA = ({ + item: e, + isActive: A, isDisabled: t, linkComponent: r, onNavigate: l }) => { - const i = /* @__PURE__ */ A( - N, + const a = { + variant: A ? "solid" : "ghost", + colorScheme: A ? "blue" : void 0, + icon: /* @__PURE__ */ o(C, { as: e.icon }), + fontSize: "xl", + size: { base: "sm", lg: "lg" }, + "aria-label": e.title, + "aria-current": A ? "page" : void 0 + }; + let b; + if (t || A) + b = /* @__PURE__ */ o( + f, + { + ...a, + isDisabled: t, + cursor: A && !t ? "default" : void 0 + } + ); + else { + const x = r ? { as: r, href: e.path } : { as: "a", href: e.path }; + b = /* @__PURE__ */ o( + f, + { + ...a, + ...x, + onClick: l + } + ); + } + return /* @__PURE__ */ o( + j, { - variant: "ghost", - icon: /* @__PURE__ */ A(C, { as: o.icon }), - fontSize: "xl", - size: { base: "sm", lg: "lg" }, - isDisabled: t, - isActive: n, - "aria-label": o.title, - "aria-current": n ? "page" : void 0, - onClick: t ? void 0 : l - } - ); - return /* @__PURE__ */ A( - k, - { - label: t ? "عدم دسترسی" : o.title, + label: t ? "عدم دسترسی" : e.title, placement: "left-start", hasArrow: !0, rounded: "md", @@ -113,25 +132,17 @@ const RA = ({ px: 4, fontWeight: "bold", closeDelay: 150, - children: t ? /* @__PURE__ */ A(c, { as: "span", children: i }) : /* @__PURE__ */ A( - h, - { - linkComponent: r, - href: o.path, - _hover: { textDecoration: "none" }, - children: i - } - ) + children: /* @__PURE__ */ o(c, { as: "span", children: b }) } ); }, DA = ({ - item: o, - isActive: n, + item: e, + isActive: A, isDisabled: t, linkComponent: r, onNavigate: l }) => { - const i = /* @__PURE__ */ g( + const a = /* @__PURE__ */ g( s, { as: "span", @@ -141,76 +152,77 @@ const RA = ({ py: 1, px: 1, borderRadius: "xl", - color: n ? "blue.600" : "gray.600", - bg: n ? "blue.50" : "transparent", + color: A ? "blue.600" : "gray.600", + bg: A ? "blue.50" : "transparent", opacity: t ? 0.4 : 1, transition: "background-color 150ms ease, color 150ms ease", children: [ - /* @__PURE__ */ A(C, { as: o.icon, boxSize: 5 }), - /* @__PURE__ */ A( + /* @__PURE__ */ o(C, { as: e.icon, boxSize: 5 }), + /* @__PURE__ */ o( d, { as: "span", w: "full", fontSize: "10px", - fontWeight: n ? "bold" : "medium", + fontWeight: A ? "bold" : "medium", lineHeight: "short", textAlign: "center", noOfLines: 1, - children: o.mobileTitle || o.title + children: e.mobileTitle || e.title } ) ] } ); - return t ? /* @__PURE__ */ A( + return t || A ? /* @__PURE__ */ o( c, { flex: "1", minW: 0, display: "flex", alignItems: "center", - "aria-disabled": "true", - children: i + "aria-disabled": t ? "true" : void 0, + "aria-current": A ? "page" : void 0, + children: a } - ) : /* @__PURE__ */ A( - h, + ) : /* @__PURE__ */ o( + w, { linkComponent: r, - href: o.path, + href: e.path, flex: "1", minW: 0, display: "flex", alignItems: "center", _hover: { textDecoration: "none" }, onClick: l, - "aria-current": n ? "page" : void 0, - children: i + "aria-current": A ? "page" : void 0, + children: a } ); -}, T = () => null, mA = ({ - items: o = [], - currentPath: n, +}, B = () => null, ZA = ({ + items: e = [], + currentPath: A, linkComponent: t, onNavigate: r, children: l, - primaryMobileCount: i = 4, - moreTitle: j = "بیشتر", - moreDrawerTitle: B = "سایر بخش‌های سامانه", + primaryMobileCount: a = 4, + moreTitle: b = "بیشتر", + moreDrawerTitle: x = "سایر بخش‌های سامانه", desktopProps: Q, mobileProps: O }) => { - var M, z; - const { isOpen: P, onOpen: L, onClose: u } = F(), G = tA(), { cannot: V } = aA(), I = rA.toArray(l).find( - (e) => gA(e) && e.type === T - ), x = !!I, R = ((M = I == null ? void 0 : I.props) == null ? void 0 : M.title) || "خروج", w = ((z = I == null ? void 0 : I.props) == null ? void 0 : z.icon) || IA, U = n ?? (typeof window < "u" ? `${window.location.pathname}${window.location.search}` : ""), X = o.slice(0, i), D = o.slice(i), m = (e) => (Array.isArray(e == null ? void 0 : e.perm) ? e.perm : [e == null ? void 0 : e.perm]).filter(Boolean).some((a) => V(a)), b = (e) => E(U, e), Z = D.some(b), f = D.length > 0 || x, v = (e) => { - r == null || r(e), u(); - }, W = () => { - u(), cA(); + var Y, k; + const { isOpen: L, onOpen: V, onClose: R } = J(), v = rA(), { cannot: U } = cA(), I = gA.toArray(l).find( + (n) => lA(n) && n.type === B + ), m = !!I, D = ((Y = I == null ? void 0 : I.props) == null ? void 0 : Y.title) || "خروج", W = ((k = I == null ? void 0 : I.props) == null ? void 0 : k.icon) || IA, X = A ?? (typeof window < "u" ? `${window.location.pathname}${window.location.search}` : ""), H = e.slice(0, a), Z = e.slice(a), y = (n) => (Array.isArray(n == null ? void 0 : n.perm) ? n.perm : [n == null ? void 0 : n.perm]).filter(Boolean).some((i) => U(i)), p = (n) => P(X, n), G = Z.some(p), M = Z.length > 0 || m, z = (n) => { + r == null || r(n), R(); + }, S = () => { + R(), dA(); }; - return /* @__PURE__ */ g(H, { children: [ - /* @__PURE__ */ A( - J, + return /* @__PURE__ */ g(F, { children: [ + /* @__PURE__ */ o( + K, { py: 6, as: "nav", @@ -228,21 +240,21 @@ const RA = ({ display: { base: "none", lg: "flex" }, ...Q, children: /* @__PURE__ */ g(s, { spacing: 2, children: [ - o.map((e) => /* @__PURE__ */ A( - RA, + e.map((n) => /* @__PURE__ */ o( + mA, { - item: e, - isDisabled: m(e), - isActive: b(e), + item: n, + isDisabled: y(n), + isActive: p(n), linkComponent: t, - onNavigate: () => r == null ? void 0 : r(e) + onNavigate: () => r == null ? void 0 : r(n) }, - e.path + n.path )), - x && /* @__PURE__ */ A( - k, + m && /* @__PURE__ */ o( + j, { - label: R, + label: D, placement: "left-start", hasArrow: !0, rounded: "md", @@ -250,15 +262,15 @@ const RA = ({ px: 4, fontWeight: "bold", closeDelay: 150, - children: /* @__PURE__ */ A( - N, + children: /* @__PURE__ */ o( + f, { variant: "ghost", - icon: /* @__PURE__ */ A(C, { as: w }), + icon: /* @__PURE__ */ o(C, { as: W }), fontSize: "xl", size: { base: "sm", lg: "lg" }, - "aria-label": R, - onClick: W + "aria-label": D, + onClick: S } ) } @@ -266,7 +278,7 @@ const RA = ({ ] }) } ), - /* @__PURE__ */ A( + /* @__PURE__ */ o( c, { as: "nav", @@ -282,23 +294,23 @@ const RA = ({ boxShadow: "0 -6px 18px rgba(0, 0, 0, 0.08)", pb: "env(safe-area-inset-bottom)", ...O, - children: /* @__PURE__ */ g(p, { h: "56px", px: 1.5, spacing: 1, align: "stretch", children: [ - X.map((e) => /* @__PURE__ */ A( + children: /* @__PURE__ */ g(u, { h: "56px", px: 1.5, spacing: 1, align: "stretch", children: [ + H.map((n) => /* @__PURE__ */ o( DA, { - item: e, - isDisabled: m(e), - isActive: b(e), + item: n, + isDisabled: y(n), + isActive: p(n), linkComponent: t, - onNavigate: () => v(e) + onNavigate: () => z(n) }, - e.path + n.path )), - f && /* @__PURE__ */ A( + M && /* @__PURE__ */ o( c, { as: "button", - ref: G, + ref: v, type: "button", flex: "1", minW: 0, @@ -311,7 +323,7 @@ const RA = ({ alignItems: "center", justifyContent: "center", cursor: "pointer", - onClick: L, + onClick: V, "aria-label": "نمایش سایر بخش‌ها", children: /* @__PURE__ */ g( s, @@ -321,17 +333,17 @@ const RA = ({ py: 1, px: 1, borderRadius: "xl", - color: Z ? "blue.600" : "gray.600", - bg: Z ? "blue.50" : "transparent", + color: G ? "blue.600" : "gray.600", + bg: G ? "blue.50" : "transparent", children: [ - /* @__PURE__ */ A(C, { as: iA, boxSize: 5 }), - /* @__PURE__ */ A( + /* @__PURE__ */ o(C, { as: iA, boxSize: 5 }), + /* @__PURE__ */ o( d, { fontSize: "10px", - fontWeight: Z ? "bold" : "medium", + fontWeight: G ? "bold" : "medium", lineHeight: "short", - children: j + children: b } ) ] @@ -342,15 +354,15 @@ const RA = ({ ] }) } ), - f && /* @__PURE__ */ g( - K, + M && /* @__PURE__ */ g( + q, { - isOpen: P, + isOpen: L, placement: "bottom", - onClose: u, - finalFocusRef: G, + onClose: R, + finalFocusRef: v, children: [ - /* @__PURE__ */ A(q, {}), + /* @__PURE__ */ o($, {}), /* @__PURE__ */ g( _, { @@ -358,11 +370,11 @@ const RA = ({ maxH: "min(78dvh, 620px)", pb: "env(safe-area-inset-bottom)", children: [ - /* @__PURE__ */ A($, { insetInlineEnd: 3, insetInlineStart: "auto" }), - /* @__PURE__ */ A(AA, { borderBottomWidth: "1px", fontSize: "md", children: B }), - /* @__PURE__ */ g(oA, { py: 4, overflowY: "auto", children: [ - /* @__PURE__ */ A(eA, { columns: 4, spacing: 2, children: D.map((e) => { - const y = m(e), a = b(e), S = /* @__PURE__ */ g( + /* @__PURE__ */ o(AA, { insetInlineEnd: 3, insetInlineStart: "auto" }), + /* @__PURE__ */ o(oA, { borderBottomWidth: "1px", fontSize: "md", children: x }), + /* @__PURE__ */ g(eA, { py: 4, overflowY: "auto", children: [ + /* @__PURE__ */ o(nA, { columns: 4, spacing: 2, children: Z.map((n) => { + const h = y(n), i = p(n), N = /* @__PURE__ */ g( s, { h: "70px", @@ -371,43 +383,51 @@ const RA = ({ spacing: 1, px: 1, borderWidth: "1px", - borderColor: a ? "blue.300" : "gray.200", + borderColor: i ? "blue.300" : "gray.200", borderRadius: "lg", - bg: a ? "blue.50" : "white", - color: a ? "blue.700" : "gray.700", - opacity: y ? 0.4 : 1, + bg: i ? "blue.50" : "white", + color: i ? "blue.700" : "gray.700", + opacity: h ? 0.4 : 1, children: [ - /* @__PURE__ */ A(C, { as: e.icon, boxSize: 5, flexShrink: 0 }), - /* @__PURE__ */ A( + /* @__PURE__ */ o(C, { as: n.icon, boxSize: 5, flexShrink: 0 }), + /* @__PURE__ */ o( d, { w: "full", fontSize: "10px", lineHeight: "shorter", - fontWeight: a ? "bold" : "medium", + fontWeight: i ? "bold" : "medium", textAlign: "center", noOfLines: 2, - children: e.mobileTitle || e.title + children: n.mobileTitle || n.title } ) ] } ); - return y ? /* @__PURE__ */ A(c, { children: S }, e.path) : /* @__PURE__ */ A( - h, + return h || i ? /* @__PURE__ */ o( + c, + { + "aria-disabled": h ? "true" : void 0, + "aria-current": i ? "page" : void 0, + children: N + }, + n.path + ) : /* @__PURE__ */ o( + w, { linkComponent: t, - href: e.path, + href: n.path, _hover: { textDecoration: "none" }, - onClick: () => v(e), - "aria-current": a ? "page" : void 0, - children: S + onClick: () => z(n), + "aria-current": i ? "page" : void 0, + children: N }, - e.path + n.path ); }) }), - x && /* @__PURE__ */ A(c, { mt: 4, pt: 4, borderTopWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ g( - p, + m && /* @__PURE__ */ o(c, { mt: 4, pt: 4, borderTopWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ g( + u, { as: "button", type: "button", @@ -419,10 +439,10 @@ const RA = ({ color: "red.600", bg: "red.50", cursor: "pointer", - onClick: W, + onClick: S, children: [ - /* @__PURE__ */ A(C, { as: w, boxSize: 5 }), - /* @__PURE__ */ A(d, { fontWeight: "bold", children: R }) + /* @__PURE__ */ o(C, { as: W, boxSize: 5 }), + /* @__PURE__ */ o(d, { fontWeight: "bold", children: D }) ] } ) }) @@ -434,12 +454,12 @@ const RA = ({ } ) ] }); -}, zA = Object.assign(mA, { - Exit: T +}, SA = Object.assign(ZA, { + Exit: B }); export { - WA as Header, - zA as Sidebar, - MA as getActiveSidebarItem, - E as isSidebarPathActive + MA as Header, + SA as Sidebar, + zA as getActiveSidebarItem, + P as isSidebarPathActive }; diff --git a/src/layout/Sidebar.jsx b/src/layout/Sidebar.jsx index 86dfc62..06404a5 100644 --- a/src/layout/Sidebar.jsx +++ b/src/layout/Sidebar.jsx @@ -25,9 +25,19 @@ import { IoExit } from "react-icons/io5/index.js"; import { logoutKeycloak } from "../core/keycloak.jsx"; import { usePermission } from "../core/permission.jsx"; +const normalizeSidebarPath = (value = "") => { + const path = String(value).split(/[?#]/)[0] || ""; + + if (!path || path === "/") return path || "/"; + + return path.replace(/\/+$/, ""); +}; + export const isSidebarPathActive = (currentPath, item) => { - const normalizedPath = currentPath?.split("?")[0] || ""; - const candidatePaths = [item?.path, ...(item?.aliases || [])].filter(Boolean); + const normalizedPath = normalizeSidebarPath(currentPath); + const candidatePaths = [item?.path, ...(item?.aliases || [])] + .filter(Boolean) + .map(normalizeSidebarPath); return candidatePaths.some( (path) => normalizedPath === path || normalizedPath.startsWith(`${path}/`), @@ -58,19 +68,39 @@ const DesktopNavItem = ({ linkComponent, onNavigate, }) => { - const content = ( - } - fontSize="xl" - size={{ base: "sm", lg: "lg" }} - isDisabled={isDisabled} - isActive={isActive} - aria-label={item.title} - aria-current={isActive ? "page" : undefined} - onClick={isDisabled ? undefined : onNavigate} - /> - ); + const commonProps = { + variant: isActive ? "solid" : "ghost", + colorScheme: isActive ? "blue" : undefined, + icon: , + fontSize: "xl", + size: { base: "sm", lg: "lg" }, + "aria-label": item.title, + "aria-current": isActive ? "page" : undefined, + }; + + let content; + + if (isDisabled || isActive) { + content = ( + + ); + } else { + const linkProps = linkComponent + ? { as: linkComponent, href: item.path } + : { as: "a", href: item.path }; + + content = ( + + ); + } return ( - {isDisabled ? ( - {content} - ) : ( - - {content} - - )} + {content} ); }; @@ -134,14 +154,15 @@ const MobileNavigationButton = ({ ); - if (isDisabled) { + if (isDisabled || isActive) { return ( {content} @@ -398,8 +419,16 @@ const SidebarRoot = ({ ); - if (isDisabled) { - return {content}; + if (isDisabled || isActive) { + return ( + + {content} + + ); } return (