@elementor/editor-site-navigation 0.7.0 → 0.8.1

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.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)
+
+
+### Bug Fixes
+
+* comment out pages panel [ED-10871] ([#64](https://github.com/elementor/elementor-packages/issues/64)) ([3a8b890](https://github.com/elementor/elementor-packages/commit/3a8b890d8f21ac816d3c0b961b37372bcb91caff))
+
+
+
+
+
+# [0.8.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.7.0...@elementor/editor-site-navigation@0.8.0) (2023-06-25)
+
+
+### Features
+
+* **site-navigation:** pages navigation panel UI [ED-10871] ([#51](https://github.com/elementor/elementor-packages/issues/51)) ([594427c](https://github.com/elementor/elementor-packages/commit/594427c3c296fe664577319bba29bf711f6bbdde))
+
+
+
+
+
 # [0.7.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.6.2...@elementor/editor-site-navigation@0.7.0) (2023-06-25)
 
 

package/dist/index.js

@@ -248,6 +248,84 @@ function RecentlyEdited() {
 
 // src/init.ts
 var import_editor_app_bar = require("@elementor/editor-app-bar");
+var import_editor = require("@elementor/editor");
+
+// src/components/panel/shell.tsx
+var React18 = __toESM(require("react"));
+var import_ui12 = require("@elementor/ui");
+var import_icons13 = require("@elementor/icons");
+
+// src/components/panel/pages-list/pages-collapsible-list.tsx
+var React17 = __toESM(require("react"));
+
+// src/components/panel/pages-list/collapsible-list.tsx
+var React6 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_ui6 = require("@elementor/ui");
+var import_icons5 = require("@elementor/icons");
+var RotateIcon = (0, import_ui6.styled)(import_icons5.ChevronDownIcon, {
+  shouldForwardProp: (prop) => prop !== "isOpen"
+})(({ theme, isOpen }) => ({
+  transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.standard
+  })
+}));
+
+// src/components/panel/pages-list/pages-collapsible-list.tsx
+var import_icons12 = require("@elementor/icons");
+
+// src/components/panel/pages-list/page-list-item.tsx
+var React16 = __toESM(require("react"));
+var import_ui11 = require("@elementor/ui");
+var import_icons11 = require("@elementor/icons");
+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");
+
+// src/components/panel/actions-menu/page-actions-menu.tsx
+var React15 = __toESM(require("react"));
+var import_ui10 = require("@elementor/ui");
+
+// src/components/panel/pages-actions/rename.tsx
+var React10 = __toESM(require("react"));
+var import_icons6 = require("@elementor/icons");
+var import_i18n3 = require("@wordpress/i18n");
+
+// src/components/panel/actions-menu/action-menu-item.tsx
+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");
+
+// src/components/panel/actions-menu/action-menu-item.tsx
+var import_ui9 = require("@elementor/ui");
+
+// src/components/panel/pages-actions/duplicate.tsx
+var React11 = __toESM(require("react"));
+var import_i18n4 = require("@wordpress/i18n");
+var import_icons7 = require("@elementor/icons");
+
+// 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");
+
+// src/components/panel/pages-actions/view.tsx
+var React13 = __toESM(require("react"));
+var import_icons9 = require("@elementor/icons");
+var import_i18n6 = require("@wordpress/i18n");
+
+// 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");
+
+// src/init.ts
 function init() {
   registerTopBarMenuItems();
 }

package/dist/index.mjs

@@ -230,6 +230,93 @@ function RecentlyEdited() {
 
 // src/init.ts
 import { injectIntoPageIndication } from "@elementor/editor-app-bar";
+import { injectIntoTop } from "@elementor/editor";
+
+// 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 { PlusIcon as PlusIcon2 } from "@elementor/icons";
+
+// src/components/panel/pages-list/pages-collapsible-list.tsx
+import * as React17 from "react";
+
+// src/components/panel/pages-list/collapsible-list.tsx
+import * as React6 from "react";
+import { useState as useState3 } from "react";
+import { Collapse, IconButton, List, ListItem, ListItemIcon as ListItemIcon2, ListItemText, styled } from "@elementor/ui";
+import { ChevronDownIcon as ChevronDownIcon2 } from "@elementor/icons";
+var RotateIcon = styled(ChevronDownIcon2, {
+  shouldForwardProp: (prop) => prop !== "isOpen"
+})(({ theme, isOpen }) => ({
+  transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.standard
+  })
+}));
+
+// src/components/panel/pages-list/pages-collapsible-list.tsx
+import { PageTypeIcon as PageTypeIcon2 } from "@elementor/icons";
+
+// src/components/panel/pages-list/page-list-item.tsx
+import * as React16 from "react";
+import {
+  bindMenu as bindMenu2,
+  bindTrigger as bindTrigger2,
+  ListItem as ListItem2,
+  ListItemButton as ListItemButton2,
+  ListItemIcon as ListItemIcon4,
+  ListItemText as ListItemText3,
+  ToggleButton,
+  usePopupState as usePopupState2
+} from "@elementor/ui";
+import { DotsVerticalIcon, HomeIcon as HomeIcon2 } from "@elementor/icons";
+import { useActiveDocument as useActiveDocument3, useNavigateToDocument as useNavigateToDocument3 } from "@elementor/editor-documents";
+
+// src/components/shared/page-title-and-status.tsx
+import * as React7 from "react";
+import { Box as Box2, Typography as Typography3 } from "@elementor/ui";
+
+// src/components/panel/actions-menu/page-actions-menu.tsx
+import * as React15 from "react";
+import { Divider as Divider2, Menu as Menu2 } from "@elementor/ui";
+
+// src/components/panel/pages-actions/rename.tsx
+import * as React10 from "react";
+import { EraseIcon } from "@elementor/icons";
+import { __ as __3 } from "@wordpress/i18n";
+
+// src/components/panel/actions-menu/action-menu-item.tsx
+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";
+
+// src/components/panel/actions-menu/action-menu-item.tsx
+import { MenuItem as MenuItem3 } from "@elementor/ui";
+
+// src/components/panel/pages-actions/duplicate.tsx
+import * as React11 from "react";
+import { __ as __4 } from "@wordpress/i18n";
+import { CopyIcon } from "@elementor/icons";
+
+// 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";
+
+// src/components/panel/pages-actions/view.tsx
+import * as React13 from "react";
+import { EyeIcon } from "@elementor/icons";
+import { __ as __6 } from "@wordpress/i18n";
+
+// src/components/panel/pages-actions/set-home.tsx
+import * as React14 from "react";
+import { HomeIcon } from "@elementor/icons";
+import { __ as __7 } from "@wordpress/i18n";
+
+// src/init.ts
 function init() {
   registerTopBarMenuItems();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.7.0",
+	"version": "0.8.1",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,10 +32,11 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
-		"@elementor/editor-app-bar": "^0.6.2",
+		"@elementor/editor": "^0.6.1",
+		"@elementor/editor-app-bar": "^0.6.3",
 		"@elementor/editor-documents": "^0.8.2",
-		"@elementor/icons": "^0.4.0",
-		"@elementor/ui": "^1.4.50",
+		"@elementor/icons": "^0.5.0",
+		"@elementor/ui": "^1.4.53",
 		"@wordpress/api-fetch": "^6.27.0",
 		"@wordpress/i18n": "^4.31.0",
 		"@wordpress/url": "^3.31.0"
@@ -46,5 +47,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "ad9032e095915dbef0f8543d83f73b9288adc8ad"
+	"gitHead": "ada7204a85dbd362c29518f8ab28defe6942a4b7"
 }

package/src/components/panel/actions-menu/action-list-item.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ComponentType } from 'react';
+import { ListItemButton, ListItemIcon, ListItemText } from '@elementor/ui';
+import { Page } from '../../../types';
+
+export type Props = {
+	title: string;
+	icon: ComponentType;
+	disabled?: boolean;
+	onClick: ( page: Page ) => void;
+}
+
+export default function ActionListItem( { title, icon: Icon, disabled, onClick }: Props ) {
+	return (
+		<ListItemButton
+			disabled={ disabled }
+			onClick={ onClick }
+		>
+			<ListItemIcon>
+				<Icon />
+			</ListItemIcon>
+			<ListItemText>
+				{ title }
+			</ListItemText>
+		</ListItemButton>
+	);
+}

package/src/components/panel/actions-menu/action-menu-item.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import ActionListItem, { Props as ActionListItemProps } from './action-list-item';
+import { MenuItem } from '@elementor/ui';
+
+export default function ActionMenuItem( props: ActionListItemProps ) {
+	return (
+		<MenuItem disableGutters>
+			<ActionListItem { ...props } />
+		</MenuItem>
+	);
+}

package/src/components/panel/actions-menu/page-actions-menu.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Divider, Menu, MenuProps } from '@elementor/ui';
+import Rename from '../pages-actions/rename';
+import Duplicate from '../pages-actions/duplicate';
+import Delete from '../pages-actions/delete';
+import { Page } from '../../../types';
+import View from '../pages-actions/view';
+import SetHome from '../pages-actions/set-home';
+
+type Props = MenuProps & {
+	page: Page
+};
+
+export default function PageActionsMenu( { page, ...props }: Props ) {
+	return (
+		<Menu
+			PaperProps={ { sx: { mt: 4, width: 200 } } }
+			MenuListProps={ { dense: true } }
+			{ ...props }
+		>
+			<Rename />
+			<Duplicate />
+			<Delete page={ page } />
+			<View />
+			<Divider />
+			<SetHome page={ page } />
+		</Menu>
+	);
+}

package/src/components/panel/pages-actions/delete.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { TrashIcon } from '@elementor/icons';
+import { Page } from '../../../types';
+import { useActiveDocument } from '@elementor/editor-documents';
+import { __ } from '@wordpress/i18n';
+import ActionMenuItem from '../actions-menu/action-menu-item';
+
+export default function Delete( { page }: { page: Page } ) {
+	const activeDocument = useActiveDocument();
+
+	const isActive = activeDocument?.id === page.id;
+
+	return (
+		<ActionMenuItem
+			title={ __( 'Delete', 'elementor' ) }
+			icon={ TrashIcon }
+			disabled={ page.isHome || isActive }
+			onClick={ () => null }
+		/>
+	);
+}

package/src/components/panel/pages-actions/duplicate.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { CopyIcon } from '@elementor/icons';
+import ActionMenuItem from '../actions-menu/action-menu-item';
+
+export default function Duplicate() {
+	return (
+		<ActionMenuItem
+			title={ __( 'Duplicate', 'elementor' ) }
+			icon={ CopyIcon }
+			onClick={ () => null }
+		/>
+	);
+}

package/src/components/panel/pages-actions/rename.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { EraseIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import ActionMenuItem from '../actions-menu/action-menu-item';
+
+export default function Rename() {
+	return (
+		<ActionMenuItem
+			title={ __( 'Rename', 'elementor' ) }
+			icon={ EraseIcon }
+			onClick={ () => null }
+		/>
+	);
+}

package/src/components/panel/pages-actions/set-home.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Page } from '../../../types';
+import { HomeIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import ActionMenuItem from '../actions-menu/action-menu-item';
+
+export default function SetHome( { page }: { page: Page } ) {
+	return (
+		<ActionMenuItem
+			title={ __( 'Set as homepage', 'elementor' ) }
+			icon={ HomeIcon }
+			disabled={ !! page.isHome }
+			onClick={ () => null }
+		/>
+	);
+}

package/src/components/panel/pages-actions/view.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { EyeIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import ActionMenuItem from '../actions-menu/action-menu-item';
+
+export default function View() {
+	return (
+		<ActionMenuItem
+			title={ __( 'View Page', 'elementor' ) } // TODO 21/06/2023 : post label should come from post type
+			icon={ EyeIcon }
+			onClick={ () => null }
+		/>
+	);
+}

package/src/components/panel/pages-list/__tests__/page-list-item.test.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { act, render } from '@testing-library/react';
+import { Page } from '../../../../types';
+import PageListItem from '../page-list-item';
+import { useNavigateToDocument } from '@elementor/editor-documents';
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	useActiveDocument: jest.fn(),
+	useNavigateToDocument: jest.fn(),
+} ) );
+
+describe( '@elementor/editor-site-navigation - PageListItem', () => {
+	afterAll( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should render a published post', () => {
+		// Arrange.
+		const page: Page = {
+			id: 1,
+			title: 'Test Post',
+			status: 'publish',
+			type: 'page',
+		};
+
+		// Act.
+		const { getByText, queryByText } = render( <PageListItem page={ page } /> );
+
+		// Assert.
+		const label = getByText( 'Test Post' );
+		const publishedLabel = queryByText( 'publish', { exact: false } );
+
+		expect( label ).toBeInTheDocument();
+		expect( publishedLabel ).toBeNull();
+	} );
+
+	it( 'should show the post status for non-published posts', () => {
+		// Arrange.
+		const page: Page = {
+			id: 1,
+			title: 'Test Post',
+			status: 'draft',
+			type: 'page',
+		};
+
+		// Act.
+		const { getByText } = render( <PageListItem page={ page } /> );
+
+		// Assert.
+		const label = getByText( 'draft', { exact: false } );
+		expect( label ).toBeInTheDocument();
+	} );
+
+	it( 'should render actions menu', () => {
+		// Arrange.
+		const page: Page = {
+			id: 1,
+			title: 'Test Post',
+			status: 'draft',
+			type: 'page',
+		};
+
+		const actions = [ 'View Page', 'Rename', 'Duplicate', 'Delete', 'Set as homepage' ];
+
+		// Act.
+		const { getByText, getAllByRole } = render( <PageListItem page={ page } /> );
+		const buttons = getAllByRole( 'button' );
+		// Button to open menu
+		const button = buttons[ 1 ];
+
+		act( () => {
+			// Open menu
+			button.click();
+		} );
+
+		// Assert.
+		actions.forEach( ( action ) => {
+			const label = getByText( action );
+			expect( label ).toBeInTheDocument();
+		} );
+	} );
+
+	it( 'should navigate to document on click', () => {
+		// Arrange.
+		const navigateToDocument = jest.fn();
+		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
+
+		const id = 10;
+
+		const page: Page = {
+			id,
+			title: 'Test Post',
+			status: 'draft',
+			type: 'page',
+		};
+
+		// Act.
+		const { getAllByRole } = render( <PageListItem page={ page } /> );
+		const buttons = getAllByRole( 'button' );
+		const button = buttons[ 0 ];
+
+		act( () => {
+			button.click();
+		} );
+
+		// Assert.
+		expect( navigateToDocument ).toHaveBeenCalledTimes( 1 );
+		expect( navigateToDocument ).toHaveBeenCalledWith( id );
+	} );
+} );

package/src/components/panel/pages-list/__tests__/pages-collapsible-list.test.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Page } from '../../../../types';
+import PagesCollapsibleList from '../pages-collapsible-list';
+
+jest.mock( '@elementor/editor-documents' );
+
+describe( '@elementor/editor-site-navigation - PagesCollapsibleList', () => {
+	const mockPosts: Page[] = [
+		{ id: 1, type: 'page', title: 'Home', status: 'draft' },
+		{ 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' },
+	];
+
+	afterAll( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should render closed list', () => {
+		// Act.
+		const { getByText, queryByText } = render(
+			<PagesCollapsibleList pages={ mockPosts } isOpenByDefault={ false } />,
+		);
+
+		// Assert.
+		const label = getByText( `Pages (${ mockPosts.length })` );
+		expect( label ).toBeInTheDocument();
+
+		const postInList = queryByText( 'Services' );
+		expect( postInList ).toBeNull();
+	} );
+
+	it( 'should render open list', () => {
+		// Act.
+		const { getByText } = render(
+			<PagesCollapsibleList pages={ mockPosts } isOpenByDefault={ true } />,
+		);
+
+		// Assert.
+		const label = getByText( `Pages (${ mockPosts.length })` );
+		expect( label ).toBeInTheDocument();
+
+		const postInList = getByText( 'Services' );
+		expect( postInList ).toBeInTheDocument();
+	} );
+} );

package/src/components/panel/pages-list/collapsible-list.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { ComponentType, PropsWithChildren, useState } from 'react';
+import { Collapse, IconButton, List, ListItem, ListItemIcon, ListItemText, styled, SvgIconProps } from '@elementor/ui';
+import { ChevronDownIcon } from '@elementor/icons';
+
+type Props = {
+	label: string
+	Icon: ComponentType;
+	isOpenByDefault?: boolean;
+}
+
+interface RotateIconProps extends SvgIconProps {
+	isOpen: boolean;
+}
+
+// TODO 21/06/2023 : Should replace this with future Rotate component that will be implemented in elementor-ui
+const RotateIcon = styled( ChevronDownIcon, {
+	shouldForwardProp: ( prop ) => prop !== 'isOpen',
+} )<RotateIconProps>( ( { theme, isOpen } ) => ( {
+	transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)',
+	transition: theme.transitions.create( 'transform', {
+		duration: theme.transitions.duration.standard,
+	} ),
+} ) );
+
+export default function CollapsibleList(
+	{
+		label,
+		Icon,
+		isOpenByDefault = false,
+		children,
+	}: PropsWithChildren<Props>
+) {
+	const [ isOpen, setIsOpen ] = useState( isOpenByDefault );
+
+	return (
+		<>
+			<ListItem disableGutters>
+				<ListItemIcon>
+					<IconButton
+						onClick={ () => setIsOpen( ( prev ) => ! prev ) }
+						sx={ { color: 'inherit' } }
+						size="small"
+					>
+						<RotateIcon fontSize="small" isOpen={ isOpen } />
+					</IconButton>
+				</ListItemIcon>
+				<ListItemIcon>
+					<Icon />
+				</ListItemIcon>
+				<ListItemText>{ label }</ListItemText>
+			</ListItem>
+			<Collapse
+				in={ isOpen }
+				timeout="auto"
+				unmountOnExit>
+				<List dense>
+					{ children }
+				</List>
+			</Collapse>
+		</>
+	);
+}

package/src/components/panel/pages-list/page-list-item.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {
+	bindMenu,
+	bindTrigger,
+	ListItem,
+	ListItemButton,
+	ListItemIcon,
+	ListItemText,
+	ToggleButton,
+	usePopupState,
+} from '@elementor/ui';
+import { DotsVerticalIcon, HomeIcon } from '@elementor/icons';
+import { Page } from '../../../types';
+import { useActiveDocument, useNavigateToDocument } from '@elementor/editor-documents';
+import PageTitleAndStatus from '../../shared/page-title-and-status';
+import PageActionsMenu from '../actions-menu/page-actions-menu';
+
+export default function PageListItem( { page }: { page: Page } ) {
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: 'page-actions',
+	} );
+
+	const activeDocument = useActiveDocument();
+	const navigateToDocument = useNavigateToDocument();
+
+	const isActive = activeDocument?.id === page.id;
+
+	return (
+		<>
+			<ListItem
+				disablePadding
+				secondaryAction={
+					<ToggleButton
+						value
+						color="secondary"
+						size="small"
+						selected={ popupState.isOpen }
+						{ ...bindTrigger( popupState ) }
+					>
+						<DotsVerticalIcon fontSize="small" />
+					</ToggleButton>
+				}
+			>
+				<ListItemButton
+					selected={ isActive }
+					onClick={ () => navigateToDocument( page.id ) }
+					dense
+				>
+					<ListItemIcon />
+					<ListItemText
+						disableTypography={ true }
+					>
+						<PageTitleAndStatus page={ page } />
+					</ListItemText>
+					{ page.isHome &&
+						<ListItemIcon>
+							<HomeIcon color="disabled" />
+						</ListItemIcon>
+					}
+				</ListItemButton>
+			</ListItem>
+			<PageActionsMenu page={ page } { ...bindMenu( popupState ) } />
+		</>
+	);
+}

package/src/components/panel/pages-list/pages-collapsible-list.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import CollapsibleList from './collapsible-list';
+import { Page } from '../../../types';
+import { PageTypeIcon } from '@elementor/icons';
+import PageListItem from './page-list-item';
+
+type Props = {
+	pages: Page[];
+	isOpenByDefault?: boolean;
+}
+
+export default function PagesCollapsibleList( { pages, isOpenByDefault = false }: Props ) {
+	const label = `Pages (${ pages.length })`; // TODO 21/06/2023 : This label should come from the backend
+
+	return (
+		<CollapsibleList
+			label={ label }
+			Icon={ PageTypeIcon }
+			isOpenByDefault={ isOpenByDefault }
+		>
+			{ pages.map( ( page ) => <PageListItem key={ page.id } page={ page } /> ) }
+		</CollapsibleList>
+	);
+}

package/src/components/panel/shell.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Box, Button, Divider, Grid, List, Paper, ThemeProvider, Typography } from '@elementor/ui';
+import { PlusIcon } from '@elementor/icons';
+import { Page } from '../../types';
+import PagesCollapsibleList from './pages-list/pages-collapsible-list';
+
+// TODO: Remove once connected to real data fetching.
+const mockPages: Page[] = [
+	{
+		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' },
+];
+
+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"
+					>
+						<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>
+	);
+};
+
+export default Shell;

package/src/components/shared/page-title-and-status.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Box, Typography } from '@elementor/ui';
+import { Page } from '../../types';
+import { useReverseHtmlEntities } from '../../hooks/use-reverse-html-entities';
+
+const PageStatus = ( { status }: { status: string } ) => {
+	if ( 'publish' === status ) {
+		return null;
+	}
+
+	return (
+		<Typography
+			component="span"
+			variant="body1"
+			sx={ {
+				textTransform: 'capitalize',
+				fontStyle: 'italic',
+				whiteSpace: 'nowrap',
+				flexBasis: 'content',
+			} }
+		>
+			({ status })
+		</Typography>
+	);
+};
+
+const PageTitle = ( { title }: { title: string } ) => {
+	const modifiedTitle = useReverseHtmlEntities( title );
+
+	return (
+		<Typography
+			component="span"
+			variant="body1"
+			noWrap
+			sx={ {
+				flexBasis: 'auto',
+			} }
+		>
+			{ modifiedTitle }
+		</Typography>
+	);
+};
+
+export default function PageTitleAndStatus( { page }: { page: Page } ) {
+	return (
+		<Box display="flex">
+			<PageTitle title={ page.title } />&nbsp;<PageStatus status={ page.status } />
+		</Box>
+	);
+}

package/src/init.ts

@@ -1,8 +1,12 @@
 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';
 
 export default function init() {
 	registerTopBarMenuItems();
+	// TODO 06/06/2023 : uncomment registerPanel() when we are ready to release
+	// registerPanel();
 }
 
 function registerTopBarMenuItems() {
@@ -11,3 +15,11 @@ function registerTopBarMenuItems() {
 		filler: RecentlyEdited,
 	} );
 }
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function registerPanel() {
+	injectIntoTop( {
+		id: 'navigation-panel',
+		filler: Shell,
+	} );
+}

package/src/types.ts

@@ -0,0 +1,7 @@
+export type Page = {
+	isHome?: boolean;
+	id: number;
+	title: string;
+	status: string;
+	type: string;
+};