@elementor/editor-site-navigation 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.9.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.8.1...@elementor/editor-site-navigation@0.9.0) (2023-06-26)
+
+
+### Features
+
+* added panel infrastructure to pages panel [ED-10863] ([#65](https://github.com/elementor/elementor-packages/issues/65)) ([e743522](https://github.com/elementor/elementor-packages/commit/e743522558b9e7cdf40e2c2dcf71e4049c815992))
+
+
+
+
+
 ## [0.8.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.8.0...@elementor/editor-site-navigation@0.8.1) (2023-06-25)
 
 

package/dist/index.js

@@ -248,12 +248,19 @@ function RecentlyEdited() {
 
 // src/init.ts
 var import_editor_app_bar = require("@elementor/editor-app-bar");
-var import_editor = require("@elementor/editor");
+
+// src/hooks/useToggleButtonProps.ts
+var import_i18n9 = require("@wordpress/i18n");
+var import_icons14 = require("@elementor/icons");
+
+// src/components/panel/panel.ts
+var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/panel/shell.tsx
 var React18 = __toESM(require("react"));
 var import_ui12 = require("@elementor/ui");
 var import_icons13 = require("@elementor/icons");
+var import_editor_panels = require("@elementor/editor-panels");
 
 // src/components/panel/pages-list/pages-collapsible-list.tsx
 var React17 = __toESM(require("react"));
@@ -271,6 +278,31 @@ var RotateIcon = (0, import_ui6.styled)(import_icons5.ChevronDownIcon, {
     duration: theme.transitions.duration.standard
   })
 }));
+function CollapsibleList({
+  label,
+  Icon,
+  isOpenByDefault = false,
+  children
+}) {
+  const [isOpen, setIsOpen] = (0, import_react4.useState)(isOpenByDefault);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui6.ListItem, { disableGutters: true }, /* @__PURE__ */ React6.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React6.createElement(
+    import_ui6.IconButton,
+    {
+      onClick: () => setIsOpen((prev) => !prev),
+      sx: { color: "inherit" },
+      size: "small"
+    },
+    /* @__PURE__ */ React6.createElement(RotateIcon, { fontSize: "small", isOpen })
+  )), /* @__PURE__ */ React6.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React6.createElement(Icon, null)), /* @__PURE__ */ React6.createElement(import_ui6.ListItemText, null, label)), /* @__PURE__ */ React6.createElement(
+    import_ui6.Collapse,
+    {
+      in: isOpen,
+      timeout: "auto",
+      unmountOnExit: true
+    },
+    /* @__PURE__ */ React6.createElement(import_ui6.List, { dense: true }, children)
+  ));
+}
 
 // src/components/panel/pages-list/pages-collapsible-list.tsx
 var import_icons12 = require("@elementor/icons");
@@ -284,6 +316,45 @@ var import_editor_documents5 = require("@elementor/editor-documents");
 // src/components/shared/page-title-and-status.tsx
 var React7 = __toESM(require("react"));
 var import_ui7 = require("@elementor/ui");
+var PageStatus = ({ status }) => {
+  if ("publish" === status) {
+    return null;
+  }
+  return /* @__PURE__ */ React7.createElement(
+    import_ui7.Typography,
+    {
+      component: "span",
+      variant: "body1",
+      sx: {
+        textTransform: "capitalize",
+        fontStyle: "italic",
+        whiteSpace: "nowrap",
+        flexBasis: "content"
+      }
+    },
+    "(",
+    status,
+    ")"
+  );
+};
+var PageTitle = ({ title }) => {
+  const modifiedTitle = useReverseHtmlEntities(title);
+  return /* @__PURE__ */ React7.createElement(
+    import_ui7.Typography,
+    {
+      component: "span",
+      variant: "body1",
+      noWrap: true,
+      sx: {
+        flexBasis: "auto"
+      }
+    },
+    modifiedTitle
+  );
+};
+function PageTitleAndStatus({ page }) {
+  return /* @__PURE__ */ React7.createElement(import_ui7.Box, { display: "flex" }, /* @__PURE__ */ React7.createElement(PageTitle, { title: page.title }), "\xA0", /* @__PURE__ */ React7.createElement(PageStatus, { status: page.status }));
+}
 
 // src/components/panel/actions-menu/page-actions-menu.tsx
 var React15 = __toESM(require("react"));
@@ -300,34 +371,251 @@ var React9 = __toESM(require("react"));
 // src/components/panel/actions-menu/action-list-item.tsx
 var React8 = __toESM(require("react"));
 var import_ui8 = require("@elementor/ui");
+function ActionListItem({ title, icon: Icon, disabled, onClick }) {
+  return /* @__PURE__ */ React8.createElement(
+    import_ui8.ListItemButton,
+    {
+      disabled,
+      onClick
+    },
+    /* @__PURE__ */ React8.createElement(import_ui8.ListItemIcon, null, /* @__PURE__ */ React8.createElement(Icon, null)),
+    /* @__PURE__ */ React8.createElement(import_ui8.ListItemText, null, title)
+  );
+}
 
 // src/components/panel/actions-menu/action-menu-item.tsx
 var import_ui9 = require("@elementor/ui");
+function ActionMenuItem(props) {
+  return /* @__PURE__ */ React9.createElement(import_ui9.MenuItem, { disableGutters: true }, /* @__PURE__ */ React9.createElement(ActionListItem, { ...props }));
+}
+
+// src/components/panel/pages-actions/rename.tsx
+function Rename() {
+  return /* @__PURE__ */ React10.createElement(
+    ActionMenuItem,
+    {
+      title: (0, import_i18n3.__)("Rename", "elementor"),
+      icon: import_icons6.EraseIcon,
+      onClick: () => null
+    }
+  );
+}
 
 // src/components/panel/pages-actions/duplicate.tsx
 var React11 = __toESM(require("react"));
 var import_i18n4 = require("@wordpress/i18n");
 var import_icons7 = require("@elementor/icons");
+function Duplicate() {
+  return /* @__PURE__ */ React11.createElement(
+    ActionMenuItem,
+    {
+      title: (0, import_i18n4.__)("Duplicate", "elementor"),
+      icon: import_icons7.CopyIcon,
+      onClick: () => null
+    }
+  );
+}
 
 // src/components/panel/pages-actions/delete.tsx
 var React12 = __toESM(require("react"));
 var import_icons8 = require("@elementor/icons");
 var import_editor_documents4 = require("@elementor/editor-documents");
 var import_i18n5 = require("@wordpress/i18n");
+function Delete({ page }) {
+  const activeDocument = (0, import_editor_documents4.useActiveDocument)();
+  const isActive = activeDocument?.id === page.id;
+  return /* @__PURE__ */ React12.createElement(
+    ActionMenuItem,
+    {
+      title: (0, import_i18n5.__)("Delete", "elementor"),
+      icon: import_icons8.TrashIcon,
+      disabled: page.isHome || isActive,
+      onClick: () => null
+    }
+  );
+}
 
 // src/components/panel/pages-actions/view.tsx
 var React13 = __toESM(require("react"));
 var import_icons9 = require("@elementor/icons");
 var import_i18n6 = require("@wordpress/i18n");
+function View() {
+  return /* @__PURE__ */ React13.createElement(
+    ActionMenuItem,
+    {
+      title: (0, import_i18n6.__)("View Page", "elementor"),
+      icon: import_icons9.EyeIcon,
+      onClick: () => null
+    }
+  );
+}
 
 // src/components/panel/pages-actions/set-home.tsx
 var React14 = __toESM(require("react"));
 var import_icons10 = require("@elementor/icons");
 var import_i18n7 = require("@wordpress/i18n");
+function SetHome({ page }) {
+  return /* @__PURE__ */ React14.createElement(
+    ActionMenuItem,
+    {
+      title: (0, import_i18n7.__)("Set as homepage", "elementor"),
+      icon: import_icons10.HomeIcon,
+      disabled: !!page.isHome,
+      onClick: () => null
+    }
+  );
+}
+
+// src/components/panel/actions-menu/page-actions-menu.tsx
+function PageActionsMenu({ page, ...props }) {
+  return /* @__PURE__ */ React15.createElement(
+    import_ui10.Menu,
+    {
+      PaperProps: { sx: { mt: 4, width: 200 } },
+      MenuListProps: { dense: true },
+      ...props
+    },
+    /* @__PURE__ */ React15.createElement(Rename, null),
+    /* @__PURE__ */ React15.createElement(Duplicate, null),
+    /* @__PURE__ */ React15.createElement(Delete, { page }),
+    /* @__PURE__ */ React15.createElement(View, null),
+    /* @__PURE__ */ React15.createElement(import_ui10.Divider, null),
+    /* @__PURE__ */ React15.createElement(SetHome, { page })
+  );
+}
+
+// src/components/panel/pages-list/page-list-item.tsx
+function PageListItem({ page }) {
+  const popupState = (0, import_ui11.usePopupState)({
+    variant: "popover",
+    popupId: "page-actions"
+  });
+  const activeDocument = (0, import_editor_documents5.useActiveDocument)();
+  const navigateToDocument = (0, import_editor_documents5.useNavigateToDocument)();
+  const isActive = activeDocument?.id === page.id;
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+    import_ui11.ListItem,
+    {
+      disablePadding: true,
+      secondaryAction: /* @__PURE__ */ React16.createElement(
+        import_ui11.ToggleButton,
+        {
+          value: true,
+          color: "secondary",
+          size: "small",
+          selected: popupState.isOpen,
+          ...(0, import_ui11.bindTrigger)(popupState)
+        },
+        /* @__PURE__ */ React16.createElement(import_icons11.DotsVerticalIcon, { fontSize: "small" })
+      )
+    },
+    /* @__PURE__ */ React16.createElement(
+      import_ui11.ListItemButton,
+      {
+        selected: isActive,
+        onClick: () => navigateToDocument(page.id),
+        dense: true
+      },
+      /* @__PURE__ */ React16.createElement(import_ui11.ListItemIcon, null),
+      /* @__PURE__ */ React16.createElement(
+        import_ui11.ListItemText,
+        {
+          disableTypography: true
+        },
+        /* @__PURE__ */ React16.createElement(PageTitleAndStatus, { page })
+      ),
+      page.isHome && /* @__PURE__ */ React16.createElement(import_ui11.ListItemIcon, null, /* @__PURE__ */ React16.createElement(import_icons11.HomeIcon, { color: "disabled" }))
+    )
+  ), /* @__PURE__ */ React16.createElement(PageActionsMenu, { page, ...(0, import_ui11.bindMenu)(popupState) }));
+}
+
+// src/components/panel/pages-list/pages-collapsible-list.tsx
+function PagesCollapsibleList({ pages, isOpenByDefault = false }) {
+  const label = `Pages (${pages.length})`;
+  return /* @__PURE__ */ React17.createElement(
+    CollapsibleList,
+    {
+      label,
+      Icon: import_icons12.PageTypeIcon,
+      isOpenByDefault
+    },
+    pages.map((page) => /* @__PURE__ */ React17.createElement(PageListItem, { key: page.id, page }))
+  );
+}
+
+// src/components/panel/shell.tsx
+var import_i18n8 = require("@wordpress/i18n");
+var mockPages = [
+  {
+    id: 1,
+    type: "page",
+    title: "This is a very long title that somebody wrote, a very very long line",
+    status: "pending approval"
+  },
+  { id: 2, type: "page", title: "About", status: "publish" },
+  { id: 3, type: "page", title: "Services", status: "publish", isHome: true },
+  { id: 4, type: "page", title: "Contact", status: "draft" },
+  { id: 5, type: "page", title: "FAQ", status: "publish" }
+];
+var Shell = () => {
+  return /* @__PURE__ */ React18.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React18.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React18.createElement(import_editor_panels.PanelHeaderTitle, null, (0, import_i18n8.__)("Pages", "elementor"))), /* @__PURE__ */ React18.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React18.createElement(
+    import_ui12.Box,
+    {
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React18.createElement(
+      import_ui12.Button,
+      {
+        sx: { mt: 4, mb: 4, mr: 5 },
+        startIcon: /* @__PURE__ */ React18.createElement(import_icons13.PlusIcon, null)
+      },
+      "Add New"
+    )
+  ), /* @__PURE__ */ React18.createElement(import_ui12.List, { dense: true }, /* @__PURE__ */ React18.createElement(PagesCollapsibleList, { pages: mockPages, isOpenByDefault: true }))));
+};
+var shell_default = Shell;
+
+// src/components/panel/panel.ts
+var {
+  panel,
+  usePanelStatus,
+  usePanelActions
+} = (0, import_editor_panels2.createPanel)({
+  id: "site-navigation-panel",
+  component: shell_default
+});
+
+// src/hooks/useToggleButtonProps.ts
+function useToggleButtonProps() {
+  const { isOpen, isBlocked } = usePanelStatus();
+  const { open, close } = usePanelActions();
+  return {
+    title: (0, import_i18n9.__)("Pages", "elementor"),
+    icon: import_icons14.PagesIcon,
+    onClick: () => isOpen ? close() : open(),
+    selected: isOpen,
+    disabled: isBlocked
+  };
+}
+
+// src/init.ts
+var import_editor_panels3 = require("@elementor/editor-panels");
+
+// src/env.ts
+var import_env = require("@elementor/env");
+var { env, validateEnv } = (0, import_env.parseEnv)("@elementor/editor-site-navigation", (envData) => {
+  return envData;
+});
 
 // src/init.ts
 function init() {
   registerTopBarMenuItems();
+  if (env.is_panel_active) {
+    (0, import_editor_panels3.registerPanel)(panel);
+    registerButton();
+  }
 }
 function registerTopBarMenuItems() {
   (0, import_editor_app_bar.injectIntoPageIndication)({
@@ -335,6 +623,13 @@ function registerTopBarMenuItems() {
     filler: RecentlyEdited
   });
 }
+function registerButton() {
+  import_editor_app_bar.toolsMenu.registerToggleAction({
+    id: "toggle-site-navigation-panel",
+    priority: 2,
+    useProps: useToggleButtonProps
+  });
+}
 
 // src/index.ts
 init();

package/dist/index.mjs

@@ -229,13 +229,20 @@ function RecentlyEdited() {
 }
 
 // src/init.ts
-import { injectIntoPageIndication } from "@elementor/editor-app-bar";
-import { injectIntoTop } from "@elementor/editor";
+import { injectIntoPageIndication, toolsMenu } from "@elementor/editor-app-bar";
+
+// src/hooks/useToggleButtonProps.ts
+import { __ as __9 } from "@wordpress/i18n";
+import { PagesIcon } from "@elementor/icons";
+
+// src/components/panel/panel.ts
+import { createPanel } from "@elementor/editor-panels";
 
 // src/components/panel/shell.tsx
 import * as React18 from "react";
-import { Box as Box3, Button as Button2, Divider as Divider3, Grid, List as List2, Paper, ThemeProvider, Typography as Typography4 } from "@elementor/ui";
+import { Box as Box3, Button as Button2, List as List2 } from "@elementor/ui";
 import { PlusIcon as PlusIcon2 } from "@elementor/icons";
+import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
 
 // src/components/panel/pages-list/pages-collapsible-list.tsx
 import * as React17 from "react";
@@ -253,6 +260,31 @@ var RotateIcon = styled(ChevronDownIcon2, {
     duration: theme.transitions.duration.standard
   })
 }));
+function CollapsibleList({
+  label,
+  Icon,
+  isOpenByDefault = false,
+  children
+}) {
+  const [isOpen, setIsOpen] = useState3(isOpenByDefault);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(ListItem, { disableGutters: true }, /* @__PURE__ */ React6.createElement(ListItemIcon2, null, /* @__PURE__ */ React6.createElement(
+    IconButton,
+    {
+      onClick: () => setIsOpen((prev) => !prev),
+      sx: { color: "inherit" },
+      size: "small"
+    },
+    /* @__PURE__ */ React6.createElement(RotateIcon, { fontSize: "small", isOpen })
+  )), /* @__PURE__ */ React6.createElement(ListItemIcon2, null, /* @__PURE__ */ React6.createElement(Icon, null)), /* @__PURE__ */ React6.createElement(ListItemText, null, label)), /* @__PURE__ */ React6.createElement(
+    Collapse,
+    {
+      in: isOpen,
+      timeout: "auto",
+      unmountOnExit: true
+    },
+    /* @__PURE__ */ React6.createElement(List, { dense: true }, children)
+  ));
+}
 
 // src/components/panel/pages-list/pages-collapsible-list.tsx
 import { PageTypeIcon as PageTypeIcon2 } from "@elementor/icons";
@@ -275,6 +307,45 @@ import { useActiveDocument as useActiveDocument3, useNavigateToDocument as useNa
 // src/components/shared/page-title-and-status.tsx
 import * as React7 from "react";
 import { Box as Box2, Typography as Typography3 } from "@elementor/ui";
+var PageStatus = ({ status }) => {
+  if ("publish" === status) {
+    return null;
+  }
+  return /* @__PURE__ */ React7.createElement(
+    Typography3,
+    {
+      component: "span",
+      variant: "body1",
+      sx: {
+        textTransform: "capitalize",
+        fontStyle: "italic",
+        whiteSpace: "nowrap",
+        flexBasis: "content"
+      }
+    },
+    "(",
+    status,
+    ")"
+  );
+};
+var PageTitle = ({ title }) => {
+  const modifiedTitle = useReverseHtmlEntities(title);
+  return /* @__PURE__ */ React7.createElement(
+    Typography3,
+    {
+      component: "span",
+      variant: "body1",
+      noWrap: true,
+      sx: {
+        flexBasis: "auto"
+      }
+    },
+    modifiedTitle
+  );
+};
+function PageTitleAndStatus({ page }) {
+  return /* @__PURE__ */ React7.createElement(Box2, { display: "flex" }, /* @__PURE__ */ React7.createElement(PageTitle, { title: page.title }), "\xA0", /* @__PURE__ */ React7.createElement(PageStatus, { status: page.status }));
+}
 
 // src/components/panel/actions-menu/page-actions-menu.tsx
 import * as React15 from "react";
@@ -291,34 +362,251 @@ import * as React9 from "react";
 // src/components/panel/actions-menu/action-list-item.tsx
 import * as React8 from "react";
 import { ListItemButton, ListItemIcon as ListItemIcon3, ListItemText as ListItemText2 } from "@elementor/ui";
+function ActionListItem({ title, icon: Icon, disabled, onClick }) {
+  return /* @__PURE__ */ React8.createElement(
+    ListItemButton,
+    {
+      disabled,
+      onClick
+    },
+    /* @__PURE__ */ React8.createElement(ListItemIcon3, null, /* @__PURE__ */ React8.createElement(Icon, null)),
+    /* @__PURE__ */ React8.createElement(ListItemText2, null, title)
+  );
+}
 
 // src/components/panel/actions-menu/action-menu-item.tsx
 import { MenuItem as MenuItem3 } from "@elementor/ui";
+function ActionMenuItem(props) {
+  return /* @__PURE__ */ React9.createElement(MenuItem3, { disableGutters: true }, /* @__PURE__ */ React9.createElement(ActionListItem, { ...props }));
+}
+
+// src/components/panel/pages-actions/rename.tsx
+function Rename() {
+  return /* @__PURE__ */ React10.createElement(
+    ActionMenuItem,
+    {
+      title: __3("Rename", "elementor"),
+      icon: EraseIcon,
+      onClick: () => null
+    }
+  );
+}
 
 // src/components/panel/pages-actions/duplicate.tsx
 import * as React11 from "react";
 import { __ as __4 } from "@wordpress/i18n";
 import { CopyIcon } from "@elementor/icons";
+function Duplicate() {
+  return /* @__PURE__ */ React11.createElement(
+    ActionMenuItem,
+    {
+      title: __4("Duplicate", "elementor"),
+      icon: CopyIcon,
+      onClick: () => null
+    }
+  );
+}
 
 // src/components/panel/pages-actions/delete.tsx
 import * as React12 from "react";
 import { TrashIcon } from "@elementor/icons";
 import { useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
 import { __ as __5 } from "@wordpress/i18n";
+function Delete({ page }) {
+  const activeDocument = useActiveDocument2();
+  const isActive = activeDocument?.id === page.id;
+  return /* @__PURE__ */ React12.createElement(
+    ActionMenuItem,
+    {
+      title: __5("Delete", "elementor"),
+      icon: TrashIcon,
+      disabled: page.isHome || isActive,
+      onClick: () => null
+    }
+  );
+}
 
 // src/components/panel/pages-actions/view.tsx
 import * as React13 from "react";
 import { EyeIcon } from "@elementor/icons";
 import { __ as __6 } from "@wordpress/i18n";
+function View() {
+  return /* @__PURE__ */ React13.createElement(
+    ActionMenuItem,
+    {
+      title: __6("View Page", "elementor"),
+      icon: EyeIcon,
+      onClick: () => null
+    }
+  );
+}
 
 // src/components/panel/pages-actions/set-home.tsx
 import * as React14 from "react";
 import { HomeIcon } from "@elementor/icons";
 import { __ as __7 } from "@wordpress/i18n";
+function SetHome({ page }) {
+  return /* @__PURE__ */ React14.createElement(
+    ActionMenuItem,
+    {
+      title: __7("Set as homepage", "elementor"),
+      icon: HomeIcon,
+      disabled: !!page.isHome,
+      onClick: () => null
+    }
+  );
+}
+
+// src/components/panel/actions-menu/page-actions-menu.tsx
+function PageActionsMenu({ page, ...props }) {
+  return /* @__PURE__ */ React15.createElement(
+    Menu2,
+    {
+      PaperProps: { sx: { mt: 4, width: 200 } },
+      MenuListProps: { dense: true },
+      ...props
+    },
+    /* @__PURE__ */ React15.createElement(Rename, null),
+    /* @__PURE__ */ React15.createElement(Duplicate, null),
+    /* @__PURE__ */ React15.createElement(Delete, { page }),
+    /* @__PURE__ */ React15.createElement(View, null),
+    /* @__PURE__ */ React15.createElement(Divider2, null),
+    /* @__PURE__ */ React15.createElement(SetHome, { page })
+  );
+}
+
+// src/components/panel/pages-list/page-list-item.tsx
+function PageListItem({ page }) {
+  const popupState = usePopupState2({
+    variant: "popover",
+    popupId: "page-actions"
+  });
+  const activeDocument = useActiveDocument3();
+  const navigateToDocument = useNavigateToDocument3();
+  const isActive = activeDocument?.id === page.id;
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+    ListItem2,
+    {
+      disablePadding: true,
+      secondaryAction: /* @__PURE__ */ React16.createElement(
+        ToggleButton,
+        {
+          value: true,
+          color: "secondary",
+          size: "small",
+          selected: popupState.isOpen,
+          ...bindTrigger2(popupState)
+        },
+        /* @__PURE__ */ React16.createElement(DotsVerticalIcon, { fontSize: "small" })
+      )
+    },
+    /* @__PURE__ */ React16.createElement(
+      ListItemButton2,
+      {
+        selected: isActive,
+        onClick: () => navigateToDocument(page.id),
+        dense: true
+      },
+      /* @__PURE__ */ React16.createElement(ListItemIcon4, null),
+      /* @__PURE__ */ React16.createElement(
+        ListItemText3,
+        {
+          disableTypography: true
+        },
+        /* @__PURE__ */ React16.createElement(PageTitleAndStatus, { page })
+      ),
+      page.isHome && /* @__PURE__ */ React16.createElement(ListItemIcon4, null, /* @__PURE__ */ React16.createElement(HomeIcon2, { color: "disabled" }))
+    )
+  ), /* @__PURE__ */ React16.createElement(PageActionsMenu, { page, ...bindMenu2(popupState) }));
+}
+
+// src/components/panel/pages-list/pages-collapsible-list.tsx
+function PagesCollapsibleList({ pages, isOpenByDefault = false }) {
+  const label = `Pages (${pages.length})`;
+  return /* @__PURE__ */ React17.createElement(
+    CollapsibleList,
+    {
+      label,
+      Icon: PageTypeIcon2,
+      isOpenByDefault
+    },
+    pages.map((page) => /* @__PURE__ */ React17.createElement(PageListItem, { key: page.id, page }))
+  );
+}
+
+// src/components/panel/shell.tsx
+import { __ as __8 } from "@wordpress/i18n";
+var mockPages = [
+  {
+    id: 1,
+    type: "page",
+    title: "This is a very long title that somebody wrote, a very very long line",
+    status: "pending approval"
+  },
+  { id: 2, type: "page", title: "About", status: "publish" },
+  { id: 3, type: "page", title: "Services", status: "publish", isHome: true },
+  { id: 4, type: "page", title: "Contact", status: "draft" },
+  { id: 5, type: "page", title: "FAQ", status: "publish" }
+];
+var Shell = () => {
+  return /* @__PURE__ */ React18.createElement(Panel, null, /* @__PURE__ */ React18.createElement(PanelHeader, null, /* @__PURE__ */ React18.createElement(PanelHeaderTitle, null, __8("Pages", "elementor"))), /* @__PURE__ */ React18.createElement(PanelBody, null, /* @__PURE__ */ React18.createElement(
+    Box3,
+    {
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React18.createElement(
+      Button2,
+      {
+        sx: { mt: 4, mb: 4, mr: 5 },
+        startIcon: /* @__PURE__ */ React18.createElement(PlusIcon2, null)
+      },
+      "Add New"
+    )
+  ), /* @__PURE__ */ React18.createElement(List2, { dense: true }, /* @__PURE__ */ React18.createElement(PagesCollapsibleList, { pages: mockPages, isOpenByDefault: true }))));
+};
+var shell_default = Shell;
+
+// src/components/panel/panel.ts
+var {
+  panel,
+  usePanelStatus,
+  usePanelActions
+} = createPanel({
+  id: "site-navigation-panel",
+  component: shell_default
+});
+
+// src/hooks/useToggleButtonProps.ts
+function useToggleButtonProps() {
+  const { isOpen, isBlocked } = usePanelStatus();
+  const { open, close } = usePanelActions();
+  return {
+    title: __9("Pages", "elementor"),
+    icon: PagesIcon,
+    onClick: () => isOpen ? close() : open(),
+    selected: isOpen,
+    disabled: isBlocked
+  };
+}
+
+// src/init.ts
+import { registerPanel } from "@elementor/editor-panels";
+
+// src/env.ts
+import { parseEnv } from "@elementor/env";
+var { env, validateEnv } = parseEnv("@elementor/editor-site-navigation", (envData) => {
+  return envData;
+});
 
 // src/init.ts
 function init() {
   registerTopBarMenuItems();
+  if (env.is_panel_active) {
+    registerPanel(panel);
+    registerButton();
+  }
 }
 function registerTopBarMenuItems() {
   injectIntoPageIndication({
@@ -326,6 +614,13 @@ function registerTopBarMenuItems() {
     filler: RecentlyEdited
   });
 }
+function registerButton() {
+  toolsMenu.registerToggleAction({
+    id: "toggle-site-navigation-panel",
+    priority: 2,
+    useProps: useToggleButtonProps
+  });
+}
 
 // src/index.ts
 init();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.8.1",
+	"version": "0.9.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,10 +32,11 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
-		"@elementor/editor": "^0.6.1",
-		"@elementor/editor-app-bar": "^0.6.3",
+		"@elementor/editor-app-bar": "^0.6.4",
 		"@elementor/editor-documents": "^0.8.2",
-		"@elementor/icons": "^0.5.0",
+		"@elementor/editor-panels": "^0.1.1",
+		"@elementor/env": "^0.2.0",
+		"@elementor/icons": "^0.6.0",
 		"@elementor/ui": "^1.4.53",
 		"@wordpress/api-fetch": "^6.27.0",
 		"@wordpress/i18n": "^4.31.0",
@@ -47,5 +48,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "ada7204a85dbd362c29518f8ab28defe6942a4b7"
+	"gitHead": "ed96d6908a9c9d3bab7fe15df52dba55bd64dff5"
 }

package/src/components/panel/panel.ts

@@ -0,0 +1,11 @@
+import { createPanel } from '@elementor/editor-panels';
+import Shell from './shell';
+
+export const {
+	panel,
+	usePanelStatus,
+	usePanelActions,
+} = createPanel( {
+	id: 'site-navigation-panel',
+	component: Shell,
+} );

package/src/components/panel/shell.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { Box, Button, Divider, Grid, List, Paper, ThemeProvider, Typography } from '@elementor/ui';
+import { Box, Button, List } from '@elementor/ui';
 import { PlusIcon } from '@elementor/icons';
 import { Page } from '../../types';
+import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
 import PagesCollapsibleList from './pages-list/pages-collapsible-list';
+import { __ } from '@wordpress/i18n';
 
 // TODO: Remove once connected to real data fetching.
 const mockPages: Page[] = [
@@ -20,38 +22,28 @@ const mockPages: Page[] = [
 
 const Shell = () => {
 	return (
-		<ThemeProvider colorScheme="light">
-			<Box sx={ { width: '100%', maxWidth: 360 } }>
-				<Paper>
-					<Grid
-						container
-						justifyContent="center"
-						alignItems="center"
-						sx={ { height: 51 } }>
-						<Typography variant="h6">Pages</Typography>
-					</Grid>
-					<Divider />
-					<Box
-						display="flex"
-						justifyContent="flex-end"
-						alignItems="center"
+		<Panel>
+			<PanelHeader>
+				<PanelHeaderTitle>{ __( 'Pages', 'elementor' ) }</PanelHeaderTitle>
+			</PanelHeader>
+			<PanelBody>
+				<Box
+					display="flex"
+					justifyContent="flex-end"
+					alignItems="center"
+				>
+					<Button
+						sx={ { mt: 4, mb: 4, mr: 5 } }
+						startIcon={ <PlusIcon /> }
 					>
-						<Button
-							sx={ { mt: 4, mb: 4, mr: 5 } }
-							startIcon={ <PlusIcon /> }
-						>
-							Add New
-						</Button>
-					</Box>
-					<Box sx={ { width: '100%', maxWidth: 360 } }>
-						<List dense>
-							<PagesCollapsibleList pages={ mockPages } isOpenByDefault={ true } />
-						</List>
-					</Box>
-					<Divider />
-				</Paper>
-			</Box>
-		</ThemeProvider>
+						Add New
+					</Button>
+				</Box>
+				<List dense>
+					<PagesCollapsibleList pages={ mockPages } isOpenByDefault={ true } />
+				</List>
+			</PanelBody>
+		</Panel>
 	);
 };
 

package/src/env.ts

@@ -0,0 +1,9 @@
+import { parseEnv } from '@elementor/env';
+
+export const { env, validateEnv } = parseEnv<{
+	is_panel_active: boolean;
+}>( '@elementor/editor-site-navigation', ( envData ) => {
+	return envData as {
+		is_panel_active: boolean;
+	};
+} );

package/src/hooks/useToggleButtonProps.ts

@@ -0,0 +1,20 @@
+import { __ } from '@wordpress/i18n';
+import { PagesIcon } from '@elementor/icons';
+import { usePanelActions, usePanelStatus } from '../components/panel/panel';
+
+export function useToggleButtonProps() {
+	const { isOpen, isBlocked } = usePanelStatus();
+	const { open, close } = usePanelActions();
+
+	return {
+		title: __( 'Pages', 'elementor' ),
+		icon: PagesIcon,
+		onClick: () => (
+			isOpen
+				? close()
+				: open()
+		),
+		selected: isOpen,
+		disabled: isBlocked,
+	};
+}

package/src/init.ts

@@ -1,12 +1,17 @@
 import RecentlyEdited from './components/top-bar/recently-edited';
-import { injectIntoPageIndication } from '@elementor/editor-app-bar';
-import { injectIntoTop } from '@elementor/editor';
-import Shell from './components/panel/shell';
+import { injectIntoPageIndication, toolsMenu } from '@elementor/editor-app-bar';
+import { useToggleButtonProps } from './hooks/useToggleButtonProps';
+import { registerPanel } from '@elementor/editor-panels';
+import { panel } from './components/panel/panel';
+import { env } from './env';
 
 export default function init() {
 	registerTopBarMenuItems();
-	// TODO 06/06/2023 : uncomment registerPanel() when we are ready to release
-	// registerPanel();
+	// TODO 06/06/2023 :  remove if when we are production ready
+	if ( env.is_panel_active ) {
+		registerPanel( panel );
+		registerButton();
+	}
 }
 
 function registerTopBarMenuItems() {
@@ -16,10 +21,10 @@ function registerTopBarMenuItems() {
 	} );
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function registerPanel() {
-	injectIntoTop( {
-		id: 'navigation-panel',
-		filler: Shell,
+function registerButton() {
+	toolsMenu.registerToggleAction( {
+		id: 'toggle-site-navigation-panel',
+		priority: 2,
+		useProps: useToggleButtonProps,
 	} );
 }