fix sidebar

dist/layout.js

@@ -150,12 +150,12 @@ const SA = Object.assign(CA, {
   Title: uA,
   Description: xA,
   Bi: mA
-}), E = (o = "") => {
+}), N = (o = "") => {
   const A = String(o).split(/[?#]/)[0] || "";
   return !A || A === "/" ? A || "/" : A.replace(/\/+$/, "");
 }, P = (o, A) => {
-  const t = E(o);
+  const t = N(o);
-  return [A == null ? void 0 : A.path, ...(A == null ? void 0 : A.aliases) || []].filter(Boolean).map(E).some(
+  return [A == null ? void 0 : A.path, ...(A == null ? void 0 : A.aliases) || []].filter(Boolean).map(N).some(
     (l) => t === l || t.startsWith(`${l}/`)
   );
 }, MA = (o = [], A) => o.find((t) => P(A, t)), G = aA(
@@ -171,8 +171,25 @@ const RA = ({
 }) => {
   const a = {
     variant: "ghost",
-    bg: A ? "gray.200" : "transparent",
+    position: "relative",
-    mx: A ? 2 : 0,
+    bg: "transparent",
+    _before: A ? {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      insetInlineStart: "8px",
+      insetInlineEnd: "8px",
+      bg: "gray.200",
+      borderRadius: "md",
+      zIndex: 0
+    } : void 0,
+    sx: {
+      "> svg": {
+        position: "relative",
+        zIndex: 1
+      }
+    },
     icon: /* @__PURE__ */ e(d, { as: o.icon }),
     fontSize: "xl",
     size: { base: "sm", lg: "lg" },
@@ -285,9 +302,9 @@ const RA = ({
   mobileProps: O
 }) => {
   var k, Y;
-  const { isOpen: L, onOpen: V, onClose: m } = J(), W = rA(), { cannot: U } = cA(), I = gA.toArray(l).find(
+  const { isOpen: L, onOpen: V, onClose: m } = J(), v = rA(), { cannot: U } = cA(), I = gA.toArray(l).find(
     (n) => lA(n) && n.type === B
-  ), R = !!I, f = ((k = I == null ? void 0 : I.props) == null ? void 0 : k.title) || "خروج", v = ((Y = I == null ? void 0 : I.props) == null ? void 0 : Y.icon) || IA, H = A ?? (typeof window < "u" ? `${window.location.pathname}${window.location.search}` : ""), X = o.slice(0, a), w = o.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(H, n), D = w.some(p), S = w.length > 0 || R, M = (n) => {
+  ), R = !!I, f = ((k = I == null ? void 0 : I.props) == null ? void 0 : k.title) || "خروج", W = ((Y = I == null ? void 0 : I.props) == null ? void 0 : Y.icon) || IA, H = A ?? (typeof window < "u" ? `${window.location.pathname}${window.location.search}` : ""), X = o.slice(0, a), w = o.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(H, n), D = w.some(p), S = w.length > 0 || R, M = (n) => {
     r == null || r(n), m();
   }, z = () => {
     m(), sA();
@@ -338,7 +355,7 @@ const RA = ({
                 Z,
                 {
                   variant: "ghost",
-                  icon: /* @__PURE__ */ e(d, { as: v }),
+                  icon: /* @__PURE__ */ e(d, { as: W }),
                   fontSize: "xl",
                   size: { base: "sm", lg: "lg" },
                   "aria-label": f,
@@ -382,7 +399,7 @@ const RA = ({
             c,
             {
               as: "button",
-              ref: W,
+              ref: v,
               type: "button",
               flex: "1",
               minW: 0,
@@ -432,7 +449,7 @@ const RA = ({
         isOpen: L,
         placement: "bottom",
         onClose: m,
-        finalFocusRef: W,
+        finalFocusRef: v,
         children: [
           /* @__PURE__ */ e($, {}),
           /* @__PURE__ */ g(
@@ -446,7 +463,7 @@ const RA = ({
                 /* @__PURE__ */ e(eA, { borderBottomWidth: "1px", fontSize: "md", children: x }),
                 /* @__PURE__ */ g(oA, { py: 4, overflowY: "auto", children: [
                   /* @__PURE__ */ e(nA, { columns: 4, spacing: 2, children: w.map((n) => {
-                    const h = y(n), i = p(n), N = /* @__PURE__ */ g(
+                    const h = y(n), i = p(n), E = /* @__PURE__ */ g(
                       C,
                       {
                         h: "70px",
@@ -482,7 +499,7 @@ const RA = ({
                       {
                         "aria-disabled": h ? "true" : void 0,
                         "aria-current": i ? "page" : void 0,
-                        children: N
+                        children: E
                       },
                       n.path
                     ) : /* @__PURE__ */ e(
@@ -493,7 +510,7 @@ const RA = ({
                         _hover: { textDecoration: "none" },
                         onClick: () => M(n),
                         "aria-current": i ? "page" : void 0,
-                        children: N
+                        children: E
                       },
                       n.path
                     );
@@ -513,7 +530,7 @@ const RA = ({
                       cursor: "pointer",
                       onClick: z,
                       children: [
-                        /* @__PURE__ */ e(d, { as: v, boxSize: 5 }),
+                        /* @__PURE__ */ e(d, { as: W, boxSize: 5 }),
                         /* @__PURE__ */ e(s, { fontWeight: "bold", children: f })
                       ]
                     }

src/layout/Sidebar.jsx

@@ -70,8 +70,30 @@ const DesktopNavItem = ({
 }) => {
   const commonProps = {
     variant: "ghost",
-    bg: isActive ? "gray.200" : "transparent",
+    position: "relative",
-    mx: isActive ? 2 : 0,
+    bg: "transparent",
+
+    _before: isActive
+      ? {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          insetInlineStart: "8px",
+          insetInlineEnd: "8px",
+          bg: "gray.200",
+          borderRadius: "md",
+          zIndex: 0,
+        }
+      : undefined,
+
+    sx: {
+      "> svg": {
+        position: "relative",
+        zIndex: 1,
+      },
+    },
+
     icon: <Icon as={item.icon} />,
     fontSize: "xl",
     size: { base: "sm", lg: "lg" },