@compill/admin 1.0.67 → 1.0.69

package/index.cjs.js

@@ -2847,16 +2847,18 @@ function Content(_a) {
 function Menu(_a) {
   var {
       darkMode,
-      config
+      config,
+      useNextRouter
     } = _a,
-    props = __rest$1(_a, ["darkMode", "config"]);
+    props = __rest$1(_a, ["darkMode", "config", "useNextRouter"]);
+  const Comp = useNextRouter ? NextMenuItem : MenuItem;
   return jsxRuntime.jsx("ul", Object.assign({}, props, {
     children: config.map((item, index) => {
       if (item.type == "divider") return jsxRuntime.jsx(Divider, {
         title: item.label
       }, index);
       if (item.type == "item") {
-        return jsxRuntime.jsx(MenuItem, {
+        return jsxRuntime.jsx(Comp, {
           icon: item.icon,
           path: item.path,
           depth: 0,
@@ -2903,37 +2905,13 @@ function MenuItem(_a) {
       style: {
         position: "relative"
       },
-      children: [jsxRuntime.jsxs(ui.Button, Object.assign({
-        as: "li",
-        minH: "8",
-        ms: `${(depth !== null && depth !== void 0 ? depth : 0) * 2}`,
-        p: "2",
-        font: "title",
-        textColor: darkMode ? "white" : "black",
-        fontWeight: "600",
-        rounded: "lg",
-        textSize: "sm",
-        variant: "borderless",
-        hover_bgColor: darkMode ? "white" : "black",
-        hover_bgOpacity: "10",
-        hover_textColor: darkMode ? "white" : "zinc-800",
-        cursor: "pointer",
-        dflex: true,
-        alignItems: "center",
-        gap: "3"
-      }, props, {
-        children: [icon && jsxRuntime.jsx(ui.Icon, {
-          path: icon,
-          opacity: selected ? "100" : "60"
-        }), children]
-      })), match && jsxRuntime.jsx("div", {
-        position: "absolute",
-        bgColor: darkMode ? "white" : "black",
-        bgOpacity: "90",
-        w: "0.5",
-        h: "6",
-        top: "1.5",
-        start: "-4"
+      children: [jsxRuntime.jsx(MenuButton, Object.assign({
+        depth: depth,
+        darkMode: darkMode,
+        icon: icon,
+        selected: selected
+      }, props)), match && jsxRuntime.jsx(SelectedIndicator, {
+        darkMode: darkMode
       })]
     }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsxRuntime.jsx(MenuItem, {
       icon: item.icon,
@@ -2945,6 +2923,92 @@ function MenuItem(_a) {
     }, index))]
   });
 }
+function NextMenuItem(_a) {
+  var {
+      icon,
+      path,
+      depth,
+      darkMode,
+      subMenu,
+      children
+    } = _a,
+    props = __rest$1(_a, ["icon", "path", "depth", "darkMode", "subMenu", "children"]);
+  const {
+    pathname
+  } = router.useRouter();
+  const selected = path == "/" ? pathname == "/" : pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
+  const match = path == "/" ? pathname == "/" : pathname == (path.startsWith("/") ? path : `/${path}`);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(Link__default["default"], {
+      href: path,
+      style: {
+        position: "relative"
+      },
+      children: [jsxRuntime.jsx(MenuButton, Object.assign({
+        depth: depth,
+        darkMode: darkMode,
+        icon: icon,
+        selected: selected
+      }, props)), match && jsxRuntime.jsx(SelectedIndicator, {
+        darkMode: darkMode
+      })]
+    }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsxRuntime.jsx(NextMenuItem, {
+      icon: item.icon,
+      path: item.path,
+      depth: (depth !== null && depth !== void 0 ? depth : 0) + 1,
+      darkMode: darkMode,
+      subMenu: item.children,
+      children: item.label
+    }, index))]
+  });
+}
+function MenuButton(_a) {
+  var {
+      depth,
+      darkMode,
+      icon,
+      selected,
+      children
+    } = _a,
+    props = __rest$1(_a, ["depth", "darkMode", "icon", "selected", "children"]);
+  return jsxRuntime.jsxs(ui.Button, Object.assign({
+    as: "li",
+    minH: "8",
+    ms: `${(depth !== null && depth !== void 0 ? depth : 0) * 2}`,
+    p: "2",
+    font: "title",
+    textColor: darkMode ? "white" : "black",
+    fontWeight: "600",
+    rounded: "lg",
+    textSize: "sm",
+    variant: "borderless",
+    hover_bgColor: darkMode ? "white" : "black",
+    hover_bgOpacity: "10",
+    hover_textColor: darkMode ? "white" : "zinc-800",
+    cursor: "pointer",
+    dflex: true,
+    alignItems: "center",
+    gap: "3"
+  }, props, {
+    children: [icon && jsxRuntime.jsx(ui.Icon, {
+      path: icon,
+      opacity: selected ? "100" : "60"
+    }), children]
+  }));
+}
+function SelectedIndicator({
+  darkMode
+}) {
+  return jsxRuntime.jsx("div", {
+    position: "absolute",
+    bgColor: darkMode ? "white" : "black",
+    bgOpacity: "90",
+    w: "0.5",
+    h: "6",
+    top: "1.5",
+    start: "-4"
+  });
+}
 
 function Sidebar(_a) {
   var {

package/index.esm.js

@@ -2837,16 +2837,18 @@ function Content(_a) {
 function Menu(_a) {
   var {
       darkMode,
-      config
+      config,
+      useNextRouter
     } = _a,
-    props = __rest$1(_a, ["darkMode", "config"]);
+    props = __rest$1(_a, ["darkMode", "config", "useNextRouter"]);
+  const Comp = useNextRouter ? NextMenuItem : MenuItem;
   return jsx("ul", Object.assign({}, props, {
     children: config.map((item, index) => {
       if (item.type == "divider") return jsx(Divider, {
         title: item.label
       }, index);
       if (item.type == "item") {
-        return jsx(MenuItem, {
+        return jsx(Comp, {
           icon: item.icon,
           path: item.path,
           depth: 0,
@@ -2893,37 +2895,13 @@ function MenuItem(_a) {
       style: {
         position: "relative"
       },
-      children: [jsxs(Button, Object.assign({
-        as: "li",
-        minH: "8",
-        ms: `${(depth !== null && depth !== void 0 ? depth : 0) * 2}`,
-        p: "2",
-        font: "title",
-        textColor: darkMode ? "white" : "black",
-        fontWeight: "600",
-        rounded: "lg",
-        textSize: "sm",
-        variant: "borderless",
-        hover_bgColor: darkMode ? "white" : "black",
-        hover_bgOpacity: "10",
-        hover_textColor: darkMode ? "white" : "zinc-800",
-        cursor: "pointer",
-        dflex: true,
-        alignItems: "center",
-        gap: "3"
-      }, props, {
-        children: [icon && jsx(Icon, {
-          path: icon,
-          opacity: selected ? "100" : "60"
-        }), children]
-      })), match && jsx("div", {
-        position: "absolute",
-        bgColor: darkMode ? "white" : "black",
-        bgOpacity: "90",
-        w: "0.5",
-        h: "6",
-        top: "1.5",
-        start: "-4"
+      children: [jsx(MenuButton, Object.assign({
+        depth: depth,
+        darkMode: darkMode,
+        icon: icon,
+        selected: selected
+      }, props)), match && jsx(SelectedIndicator, {
+        darkMode: darkMode
       })]
     }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsx(MenuItem, {
       icon: item.icon,
@@ -2935,6 +2913,92 @@ function MenuItem(_a) {
     }, index))]
   });
 }
+function NextMenuItem(_a) {
+  var {
+      icon,
+      path,
+      depth,
+      darkMode,
+      subMenu,
+      children
+    } = _a,
+    props = __rest$1(_a, ["icon", "path", "depth", "darkMode", "subMenu", "children"]);
+  const {
+    pathname
+  } = useRouter();
+  const selected = path == "/" ? pathname == "/" : pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
+  const match = path == "/" ? pathname == "/" : pathname == (path.startsWith("/") ? path : `/${path}`);
+  return jsxs(Fragment, {
+    children: [jsxs(Link, {
+      href: path,
+      style: {
+        position: "relative"
+      },
+      children: [jsx(MenuButton, Object.assign({
+        depth: depth,
+        darkMode: darkMode,
+        icon: icon,
+        selected: selected
+      }, props)), match && jsx(SelectedIndicator, {
+        darkMode: darkMode
+      })]
+    }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsx(NextMenuItem, {
+      icon: item.icon,
+      path: item.path,
+      depth: (depth !== null && depth !== void 0 ? depth : 0) + 1,
+      darkMode: darkMode,
+      subMenu: item.children,
+      children: item.label
+    }, index))]
+  });
+}
+function MenuButton(_a) {
+  var {
+      depth,
+      darkMode,
+      icon,
+      selected,
+      children
+    } = _a,
+    props = __rest$1(_a, ["depth", "darkMode", "icon", "selected", "children"]);
+  return jsxs(Button, Object.assign({
+    as: "li",
+    minH: "8",
+    ms: `${(depth !== null && depth !== void 0 ? depth : 0) * 2}`,
+    p: "2",
+    font: "title",
+    textColor: darkMode ? "white" : "black",
+    fontWeight: "600",
+    rounded: "lg",
+    textSize: "sm",
+    variant: "borderless",
+    hover_bgColor: darkMode ? "white" : "black",
+    hover_bgOpacity: "10",
+    hover_textColor: darkMode ? "white" : "zinc-800",
+    cursor: "pointer",
+    dflex: true,
+    alignItems: "center",
+    gap: "3"
+  }, props, {
+    children: [icon && jsx(Icon, {
+      path: icon,
+      opacity: selected ? "100" : "60"
+    }), children]
+  }));
+}
+function SelectedIndicator({
+  darkMode
+}) {
+  return jsx("div", {
+    position: "absolute",
+    bgColor: darkMode ? "white" : "black",
+    bgOpacity: "90",
+    w: "0.5",
+    h: "6",
+    top: "1.5",
+    start: "-4"
+  });
+}
 
 function Sidebar(_a) {
   var {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@compill/admin",
-    "version": "1.0.67",
+    "version": "1.0.69",
     "module": "./index.esm.js",
     "main": "./index.cjs.js"
 }

package/src/lib/layout/Menu.d.ts

@@ -3,6 +3,7 @@ import { ParentComponent, SoperioComponent } from "@soperio/react";
 export interface MenuProps extends SoperioComponent, ParentComponent {
     darkMode?: boolean;
     config: MenuConfig;
+    useNextRouter?: boolean;
 }
 export type MenuConfig = MenuItems;
 type MenuItems = (MenuItem | MenuDivider)[];
@@ -21,5 +22,5 @@ export type MenuDivider = {
  *
  *
  */
-export declare function Menu({ darkMode, config, ...props }: MenuProps): JSX.Element;
+export declare function Menu({ darkMode, config, useNextRouter, ...props }: MenuProps): JSX.Element;
 export {};