@elementor/editor-site-navigation 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.17.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.16.0...@elementor/editor-site-navigation@0.17.0) (2023-07-30)
+
+
+### Features
+
+* **site-navigation:** add set as homepage action to pages panel [ED-10865] ([#97](https://github.com/elementor/elementor-packages/issues/97)) ([e947107](https://github.com/elementor/elementor-packages/commit/e947107f29ae43cc1569820a1f6acd6d60fda38e))
+
+
+
+
+
+# [0.16.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.15.0...@elementor/editor-site-navigation@0.16.0) (2023-07-30)
+
+
+### Features
+
+* **site-navigation:** add delete action to pages panel [ED-10868] ([#94](https://github.com/elementor/elementor-packages/issues/94)) ([96447ff](https://github.com/elementor/elementor-packages/commit/96447ff3dede4681b10d904ee1ad9e82ef677392))
+
+
+
+
+
 # [0.15.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.14.0...@elementor/editor-site-navigation@0.15.0) (2023-07-30)
 
 

package/dist/index.js

@@ -250,22 +250,22 @@ function RecentlyEdited() {
 var import_editor_app_bar = require("@elementor/editor-app-bar");
 
 // src/hooks/use-toggle-button-props.ts
-var import_i18n14 = require("@wordpress/i18n");
+var import_i18n15 = require("@wordpress/i18n");
 var import_icons15 = require("@elementor/icons");
 
 // src/components/panel/panel.ts
 var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/panel/shell.tsx
-var React24 = __toESM(require("react"));
-var import_ui14 = require("@elementor/ui");
+var React23 = __toESM(require("react"));
+var import_ui15 = require("@elementor/ui");
 var import_editor_panels = require("@elementor/editor-panels");
-var import_i18n13 = require("@wordpress/i18n");
+var import_i18n14 = require("@wordpress/i18n");
 
 // src/components/panel/posts-list/posts-collapsible-list.tsx
-var React22 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var import_icons13 = require("@elementor/icons");
-var import_ui12 = require("@elementor/ui");
+var import_ui13 = require("@elementor/ui");
 
 // src/hooks/use-posts.ts
 var import_query = require("@elementor/query");
@@ -412,7 +412,7 @@ function CollapsibleList({
 }
 
 // src/components/panel/posts-list/post-list-item.tsx
-var React21 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 
 // src/components/panel/posts-list/list-items/list-item-rename.tsx
 var React9 = __toESM(require("react"));
@@ -586,8 +586,8 @@ function ListItemDuplicate() {
 }
 
 // src/components/panel/posts-list/list-items/list-item-view.tsx
-var React20 = __toESM(require("react"));
-var import_ui11 = require("@elementor/ui");
+var React19 = __toESM(require("react"));
+var import_ui12 = require("@elementor/ui");
 var import_icons12 = require("@elementor/icons");
 var import_editor_documents5 = require("@elementor/editor-documents");
 
@@ -635,160 +635,247 @@ function PageTitleAndStatus({ page }) {
 }
 
 // src/components/panel/actions-menu/actions/rename.tsx
-var React15 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_icons7 = require("@elementor/icons");
 var import_i18n7 = require("@wordpress/i18n");
 
 // src/components/panel/actions-menu/action-menu-item.tsx
-var React14 = __toESM(require("react"));
-
-// src/components/panel/actions-menu/action-list-item.tsx
 var React13 = __toESM(require("react"));
 var import_ui9 = require("@elementor/ui");
-function ActionListItem({ title, icon: Icon, disabled, onClick }) {
-  return /* @__PURE__ */ React13.createElement(
+function ActionMenuItem({ title, icon: Icon, ListItemButtonProps }) {
+  return /* @__PURE__ */ React13.createElement(import_ui9.MenuItem, { disableGutters: true }, /* @__PURE__ */ React13.createElement(
     import_ui9.ListItemButton,
     {
-      disabled,
-      onClick
+      ...ListItemButtonProps
     },
     /* @__PURE__ */ React13.createElement(import_ui9.ListItemIcon, null, /* @__PURE__ */ React13.createElement(Icon, null)),
     /* @__PURE__ */ React13.createElement(import_ui9.ListItemText, null, title)
-  );
-}
-
-// src/components/panel/actions-menu/action-menu-item.tsx
-var import_ui10 = require("@elementor/ui");
-function ActionMenuItem(props) {
-  return /* @__PURE__ */ React14.createElement(import_ui10.MenuItem, { disableGutters: true }, /* @__PURE__ */ React14.createElement(ActionListItem, { ...props }));
+  ));
 }
 
 // src/components/panel/actions-menu/actions/rename.tsx
 function Rename({ post }) {
   const { setEditMode } = usePostListContext();
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React14.createElement(
     ActionMenuItem,
     {
       title: (0, import_i18n7.__)("Rename", "elementor"),
       icon: import_icons7.EraseIcon,
-      onClick: () => {
-        setEditMode({
-          mode: "rename",
-          details: {
-            postId: post.id
-          }
-        });
+      ListItemButtonProps: {
+        onClick: () => {
+          setEditMode({
+            mode: "rename",
+            details: {
+              postId: post.id
+            }
+          });
+        }
       }
     }
   );
 }
 
 // src/components/panel/actions-menu/actions/duplicate.tsx
-var React16 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_icons8 = require("@elementor/icons");
 var import_i18n8 = require("@wordpress/i18n");
 function Duplicate({ post, popupState }) {
   const { setEditMode } = usePostListContext();
-  return /* @__PURE__ */ React16.createElement(
+  const onClick = () => {
+    popupState.close();
+    setEditMode({
+      mode: "duplicate",
+      details: {
+        postId: post.id,
+        title: post.title.rendered
+      }
+    });
+  };
+  return /* @__PURE__ */ React15.createElement(
     ActionMenuItem,
     {
       title: (0, import_i18n8.__)("Duplicate", "elementor"),
       icon: import_icons8.CopyIcon,
-      onClick: () => {
-        popupState.close();
-        setEditMode({
-          mode: "duplicate",
-          details: {
-            postId: post.id,
-            title: post.title.rendered
-          }
-        });
+      ListItemButtonProps: {
+        onClick
       }
     }
   );
 }
 
 // src/components/panel/actions-menu/actions/delete.tsx
-var React17 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 var import_icons9 = require("@elementor/icons");
-var import_editor_documents4 = require("@elementor/editor-documents");
 var import_i18n9 = require("@wordpress/i18n");
+var import_ui10 = require("@elementor/ui");
+var import_react7 = require("react");
+var import_editor_documents4 = require("@elementor/editor-documents");
 function Delete({ post }) {
+  const [isDialogOpen, setIsDialogOpen] = (0, import_react7.useState)(false);
   const activeDocument = (0, import_editor_documents4.useActiveDocument)();
-  const isActive = activeDocument?.id === post.id;
-  return /* @__PURE__ */ React17.createElement(
+  const isPostActive = activeDocument?.id === post.id;
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     ActionMenuItem,
     {
       title: (0, import_i18n9.__)("Delete", "elementor"),
       icon: import_icons9.TrashIcon,
-      disabled: post.isHome || isActive,
-      onClick: () => null
+      ListItemButtonProps: {
+        disabled: post.isHome || isPostActive,
+        onClick: () => setIsDialogOpen(true),
+        sx: { "&:hover": { color: "error.main" } }
+      }
     }
+  ), isDialogOpen && /* @__PURE__ */ React16.createElement(DeleteDialog, { post, setIsDialogOpen }));
+}
+function DeleteDialog({ post, setIsDialogOpen }) {
+  const { type } = usePostListContext();
+  const { deletePost } = usePostActions(type);
+  const dialogTitle = (0, import_i18n9.sprintf)((0, import_i18n9.__)("Delete \u201C%s\u201D?", "elementor"), post.title.rendered);
+  const deletePage = async () => {
+    await deletePost.mutateAsync(post.id);
+  };
+  const handleCancel = () => {
+    if (deletePost.isLoading) {
+      return;
+    }
+    setIsDialogOpen(false);
+  };
+  return /* @__PURE__ */ React16.createElement(
+    import_ui10.Dialog,
+    {
+      open: true,
+      onClose: handleCancel,
+      "aria-labelledby": "delete-dialog"
+    },
+    /* @__PURE__ */ React16.createElement(import_ui10.DialogTitle, null, dialogTitle),
+    /* @__PURE__ */ React16.createElement(import_ui10.Divider, null),
+    /* @__PURE__ */ React16.createElement(import_ui10.DialogContent, null, /* @__PURE__ */ React16.createElement(import_ui10.DialogContentText, null, (0, import_i18n9.__)("The page and its content will be deleted forever and we won\u2019t be able to recover them.", "elementor"))),
+    /* @__PURE__ */ React16.createElement(import_ui10.DialogActions, null, /* @__PURE__ */ React16.createElement(import_ui10.Button, { variant: "contained", color: "secondary", onClick: handleCancel, disabled: deletePost.isLoading }, (0, import_i18n9.__)("Cancel", "elementor")), /* @__PURE__ */ React16.createElement(import_ui10.Button, { variant: "contained", color: "error", onClick: deletePage, disabled: deletePost.isLoading }, !deletePost.isLoading ? (0, import_i18n9.__)("Delete", "elementor") : /* @__PURE__ */ React16.createElement(import_ui10.CircularProgress, null)))
   );
 }
 
 // src/components/panel/actions-menu/actions/view.tsx
-var React18 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_icons10 = require("@elementor/icons");
 var import_i18n10 = require("@wordpress/i18n");
 function View({ post }) {
   const { type } = usePostListContext();
   const title = (0, import_i18n10.__)("View %s", "elementor").replace("%s", postTypesMap[type].labels.singular_name);
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React17.createElement(
     ActionMenuItem,
     {
       title,
       icon: import_icons10.EyeIcon,
-      onClick: () => {
-        window.open(post.link, "_blank");
+      ListItemButtonProps: {
+        onClick: () => window.open(post.link, "_blank")
       }
     }
   );
 }
 
 // src/components/panel/actions-menu/actions/set-home.tsx
-var React19 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var import_icons11 = require("@elementor/icons");
 var import_i18n11 = require("@wordpress/i18n");
+
+// src/hooks/use-homepage-actions.ts
+var import_query4 = require("@elementor/query");
+
+// src/api/settings.ts
+var import_api_fetch4 = __toESM(require("@wordpress/api-fetch"));
+var getSettings = () => {
+  const baseUri = "/wp/v2/settings";
+  const keys = ["show_on_front", "page_on_front"];
+  const queryParams = new URLSearchParams({
+    _fields: keys.join(",")
+  });
+  const uri = baseUri + "?" + queryParams.toString();
+  return (0, import_api_fetch4.default)({ path: uri });
+};
+var updateSettings = (settings) => {
+  return (0, import_api_fetch4.default)({
+    path: "/wp/v2/settings",
+    method: "POST",
+    data: settings
+  });
+};
+
+// src/hooks/use-homepage.ts
+var import_query3 = require("@elementor/query");
+var settingsQueryKey = () => ["site-navigation", "homepage"];
+function useHomepage() {
+  return (0, import_query3.useQuery)({
+    queryKey: settingsQueryKey(),
+    queryFn: () => getSettings()
+  });
+}
+
+// src/hooks/use-homepage-actions.ts
+function useHomepageActions() {
+  const invalidateSettings = useInvalidateSettings();
+  const onSuccess = async () => invalidateSettings({ exact: true });
+  const updateSettingsMutation = (0, import_query4.useMutation)(
+    (settings) => updateSettings(settings),
+    { onSuccess }
+  );
+  return { updateSettingsMutation };
+}
+function useInvalidateSettings() {
+  const queryClient = (0, import_query4.useQueryClient)();
+  return (options = {}) => {
+    const queryKey = settingsQueryKey();
+    return queryClient.invalidateQueries(queryKey, options);
+  };
+}
+
+// src/components/panel/actions-menu/actions/set-home.tsx
+var import_ui11 = require("@elementor/ui");
 function SetHome({ post }) {
-  return /* @__PURE__ */ React19.createElement(
+  const { updateSettingsMutation } = useHomepageActions();
+  const handleClick = () => {
+    updateSettingsMutation.mutateAsync({ show_on_front: "page", page_on_front: post.id });
+  };
+  return /* @__PURE__ */ React18.createElement(
     ActionMenuItem,
     {
       title: (0, import_i18n11.__)("Set as homepage", "elementor"),
-      icon: import_icons11.HomeIcon,
-      disabled: !!post.isHome,
-      onClick: () => null
+      icon: !updateSettingsMutation.isLoading ? import_icons11.HomeIcon : import_ui11.CircularProgress,
+      ListItemButtonProps: {
+        disabled: !!post.isHome || post.status !== "publish" || updateSettingsMutation.isLoading,
+        onClick: handleClick
+      }
     }
   );
 }
 
 // src/components/panel/posts-list/list-items/list-item-view.tsx
+var import_i18n12 = require("@wordpress/i18n");
 function ListItemView({ post }) {
   const activeDocument = (0, import_editor_documents5.useActiveDocument)();
   const navigateToDocument = (0, import_editor_documents5.useNavigateToDocument)();
-  const popupState = (0, import_ui11.usePopupState)({
+  const popupState = (0, import_ui12.usePopupState)({
     variant: "popover",
     popupId: "post-actions",
     disableAutoFocus: true
   });
   const isActive = activeDocument?.id === post.id;
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
-    import_ui11.ListItem,
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+    import_ui12.ListItem,
     {
       disablePadding: true,
-      secondaryAction: /* @__PURE__ */ React20.createElement(
-        import_ui11.ToggleButton,
+      secondaryAction: /* @__PURE__ */ React19.createElement(
+        import_ui12.ToggleButton,
         {
           value: true,
           size: "small",
           selected: popupState.isOpen,
-          ...(0, import_ui11.bindTrigger)(popupState)
+          ...(0, import_ui12.bindTrigger)(popupState)
         },
-        /* @__PURE__ */ React20.createElement(import_icons12.DotsVerticalIcon, { fontSize: "small" })
+        /* @__PURE__ */ React19.createElement(import_icons12.DotsVerticalIcon, { fontSize: "small" })
       )
     },
-    /* @__PURE__ */ React20.createElement(
-      import_ui11.ListItemButton,
+    /* @__PURE__ */ React19.createElement(
+      import_ui12.ListItemButton,
       {
         selected: isActive,
         onClick: () => {
@@ -798,29 +885,29 @@ function ListItemView({ post }) {
         },
         dense: true
       },
-      /* @__PURE__ */ React20.createElement(import_ui11.ListItemIcon, null),
-      /* @__PURE__ */ React20.createElement(
-        import_ui11.ListItemText,
+      /* @__PURE__ */ React19.createElement(import_ui12.ListItemIcon, null),
+      /* @__PURE__ */ React19.createElement(
+        import_ui12.ListItemText,
         {
           disableTypography: true
         },
-        /* @__PURE__ */ React20.createElement(PageTitleAndStatus, { page: post })
+        /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { page: post })
       ),
-      post.isHome && /* @__PURE__ */ React20.createElement(import_ui11.ListItemIcon, null, /* @__PURE__ */ React20.createElement(import_icons12.HomeIcon, { color: "disabled" }))
+      post.isHome && /* @__PURE__ */ React19.createElement(import_ui12.ListItemIcon, null, /* @__PURE__ */ React19.createElement(import_icons12.HomeIcon, { titleAccess: (0, import_i18n12.__)("Homepage", "elementor"), color: "disabled" }))
     )
-  ), /* @__PURE__ */ React20.createElement(
-    import_ui11.Menu,
+  ), /* @__PURE__ */ React19.createElement(
+    import_ui12.Menu,
     {
       PaperProps: { sx: { mt: 4, width: 200 } },
       MenuListProps: { dense: true },
-      ...(0, import_ui11.bindMenu)(popupState)
+      ...(0, import_ui12.bindMenu)(popupState)
     },
-    /* @__PURE__ */ React20.createElement(Rename, { post }),
-    /* @__PURE__ */ React20.createElement(Duplicate, { post, popupState }),
-    /* @__PURE__ */ React20.createElement(Delete, { post }),
-    /* @__PURE__ */ React20.createElement(View, { post }),
-    /* @__PURE__ */ React20.createElement(import_ui11.Divider, null),
-    /* @__PURE__ */ React20.createElement(SetHome, { post })
+    /* @__PURE__ */ React19.createElement(Rename, { post }),
+    /* @__PURE__ */ React19.createElement(Duplicate, { post, popupState }),
+    /* @__PURE__ */ React19.createElement(Delete, { post }),
+    /* @__PURE__ */ React19.createElement(View, { post }),
+    /* @__PURE__ */ React19.createElement(import_ui12.Divider, null),
+    /* @__PURE__ */ React19.createElement(SetHome, { post })
   ));
 }
 
@@ -828,72 +915,78 @@ function ListItemView({ post }) {
 function PostListItem2({ post }) {
   const { editMode } = usePostListContext();
   if ("rename" === editMode.mode && post?.id && post?.id === editMode.details.postId) {
-    return /* @__PURE__ */ React21.createElement(ListItemRename, { post });
+    return /* @__PURE__ */ React20.createElement(ListItemRename, { post });
   }
   if ("create" === editMode.mode && !post) {
-    return /* @__PURE__ */ React21.createElement(ListItemCreate, null);
+    return /* @__PURE__ */ React20.createElement(ListItemCreate, null);
   }
   if ("duplicate" === editMode.mode && !post) {
-    return /* @__PURE__ */ React21.createElement(ListItemDuplicate, null);
+    return /* @__PURE__ */ React20.createElement(ListItemDuplicate, null);
   }
   if (!post) {
     return null;
   }
-  return /* @__PURE__ */ React21.createElement(ListItemView, { post });
+  return /* @__PURE__ */ React20.createElement(ListItemView, { post });
 }
 
 // src/components/panel/posts-list/posts-collapsible-list.tsx
 function PostsCollapsibleList({ isOpenByDefault = false }) {
   const { type, editMode } = usePostListContext();
   const { data: posts, isLoading: postsLoading } = usePosts(type);
+  const { data: homepageSettings } = useHomepage();
   if (!posts || postsLoading) {
-    return /* @__PURE__ */ React22.createElement(import_ui12.Box, { spacing: 4, sx: { px: 6 } }, /* @__PURE__ */ React22.createElement(import_ui12.Skeleton, { variant: "text", sx: { fontSize: "2rem" } }), /* @__PURE__ */ React22.createElement(import_ui12.Skeleton, { variant: "rounded", width: "100%", height: "48" }));
+    return /* @__PURE__ */ React21.createElement(import_ui13.Box, { spacing: 4, sx: { px: 6 } }, /* @__PURE__ */ React21.createElement(import_ui13.Skeleton, { variant: "text", sx: { fontSize: "2rem" } }), /* @__PURE__ */ React21.createElement(import_ui13.Skeleton, { variant: "rounded", width: "100%", height: "48" }));
   }
   const label = `${postTypesMap[type].labels.plural_name} (${posts.length.toString()})`;
-  return /* @__PURE__ */ React22.createElement(import_ui12.List, { dense: true }, /* @__PURE__ */ React22.createElement(
+  const isHomepageSet = homepageSettings?.show_on_front === "page" && !!homepageSettings?.page_on_front;
+  const homepageId = isHomepageSet ? homepageSettings.page_on_front : null;
+  return /* @__PURE__ */ React21.createElement(import_ui13.List, { dense: true }, /* @__PURE__ */ React21.createElement(
     CollapsibleList,
     {
       label,
       Icon: import_icons13.PageTypeIcon,
       isOpenByDefault: isOpenByDefault || false
     },
-    posts.map((post) => /* @__PURE__ */ React22.createElement(PostListItem2, { key: post.id, post })),
-    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React22.createElement(PostListItem2, null)
+    posts.map((post) => {
+      post = { ...post, isHome: post.id === homepageId };
+      return /* @__PURE__ */ React21.createElement(PostListItem2, { key: post.id, post });
+    }),
+    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React21.createElement(PostListItem2, null)
   ));
 }
 
 // src/components/panel/add-new-button.tsx
-var React23 = __toESM(require("react"));
-var import_ui13 = require("@elementor/ui");
+var React22 = __toESM(require("react"));
+var import_ui14 = require("@elementor/ui");
 var import_icons14 = require("@elementor/icons");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n13 = require("@wordpress/i18n");
 function AddNewButton() {
   const { setEditMode } = usePostListContext();
-  return /* @__PURE__ */ React23.createElement(
-    import_ui13.Button,
+  return /* @__PURE__ */ React22.createElement(
+    import_ui14.Button,
     {
       size: "small",
       sx: { mt: 4, mb: 4, mr: 5 },
-      startIcon: /* @__PURE__ */ React23.createElement(import_icons14.PlusIcon, null),
+      startIcon: /* @__PURE__ */ React22.createElement(import_icons14.PlusIcon, null),
       onClick: () => {
         setEditMode({ mode: "create", details: {} });
       }
     },
-    (0, import_i18n12.__)("Add New", "elementor")
+    (0, import_i18n13.__)("Add New", "elementor")
   );
 }
 
 // src/components/panel/shell.tsx
 var Shell = () => {
-  return /* @__PURE__ */ React24.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React24.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React24.createElement(import_editor_panels.PanelHeaderTitle, null, (0, import_i18n13.__)("Pages", "elementor"))), /* @__PURE__ */ React24.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React24.createElement(PostListContextProvider, { type: "page" }, /* @__PURE__ */ React24.createElement(
-    import_ui14.Box,
+  return /* @__PURE__ */ React23.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React23.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React23.createElement(import_editor_panels.PanelHeaderTitle, null, (0, import_i18n14.__)("Pages", "elementor"))), /* @__PURE__ */ React23.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React23.createElement(PostListContextProvider, { type: "page" }, /* @__PURE__ */ React23.createElement(
+    import_ui15.Box,
     {
       display: "flex",
       justifyContent: "flex-end",
       alignItems: "center"
     },
-    /* @__PURE__ */ React24.createElement(AddNewButton, null)
-  ), /* @__PURE__ */ React24.createElement(PostsCollapsibleList, { isOpenByDefault: true }))));
+    /* @__PURE__ */ React23.createElement(AddNewButton, null)
+  ), /* @__PURE__ */ React23.createElement(PostsCollapsibleList, { isOpenByDefault: true }))));
 };
 var shell_default = Shell;
 
@@ -912,7 +1005,7 @@ function useToggleButtonProps() {
   const { isOpen, isBlocked } = usePanelStatus();
   const { open, close } = usePanelActions();
   return {
-    title: (0, import_i18n14.__)("Pages", "elementor"),
+    title: (0, import_i18n15.__)("Pages", "elementor"),
     icon: import_icons15.PagesIcon,
     onClick: () => isOpen ? close() : open(),
     selected: isOpen,