META-INF.resources.js.ddm_template_editor.components.Sidebar.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of com.liferay.template.web

Liferay Template Web

There is a newer version: 1.0.95

/**
 * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import {ClayButtonWithIcon} from '@clayui/button';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, {useEffect} from 'react';

import {ElementsSidebarPanel} from './ElementsSidebarPanel';
import PropertiesSidebarPanel from './PropertiesSidebarPanel';
import {PANEL_IDS} from './panelIds';

export default function Sidebar({
	selectedSidebarPanelId,
	setSelectedSidebarPanelId,
}) {
	useEffect(() => {
		const sideNavigation = Liferay.SideNavigation.instance(
			document.querySelector('.product-menu-toggle')
		);

		if (sideNavigation) {
			if (selectedSidebarPanelId && sideNavigation.visible()) {
				sideNavigation.hide();
			}

			const sideNavigationListener = sideNavigation.on(
				'openStart.lexicon.sidenav',
				() => setSelectedSidebarPanelId(null)
			);

			return () => {
				sideNavigationListener.removeListener();
			};
		}
	}, [selectedSidebarPanelId, setSelectedSidebarPanelId]);

	return (
		
			
				

				
			

			
				 {
						setSelectedSidebarPanelId((selectedSidebarPanelId) =>
							selectedSidebarPanelId === PANEL_IDS.elements
								? null
								: PANEL_IDS.elements
						);
					}}
					outline
					symbol="list-ul"
					title={Liferay.Language.get('elements')}
				/>

				 {
						setSelectedSidebarPanelId((selectedSidebarPanelId) =>
							selectedSidebarPanelId === PANEL_IDS.properties
								? null
								: PANEL_IDS.properties
						);
					}}
					outline
					symbol="cog"
					title={Liferay.Language.get('properties')}
				/>
			
		
	);
}

Sidebar.propTypes = {
	selectedSidebarPanelId: PropTypes.string,
	setSelectedSidebarPanelId: PropTypes.func.isRequired,
};