2020-03-12 09:41:35 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import classNames from 'classnames';
|
2020-03-13 15:49:33 +00:00
|
|
|
import PropTypes from 'prop-types';
|
2020-05-05 08:10:02 +00:00
|
|
|
import { useContainerQueries } from '@woocommerce/base-hooks';
|
2020-03-12 09:41:35 +00:00
|
|
|
|
2020-03-27 20:56:48 +00:00
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
|
|
|
import './style.scss';
|
|
|
|
|
2020-03-12 09:41:35 +00:00
|
|
|
const SidebarLayout = ( { children, className } ) => {
|
2020-05-05 08:10:02 +00:00
|
|
|
const [ resizeListener, containerQueryClassName ] = useContainerQueries();
|
|
|
|
|
2020-03-12 09:41:35 +00:00
|
|
|
return (
|
2020-05-05 08:10:02 +00:00
|
|
|
<div
|
|
|
|
className={ classNames(
|
|
|
|
'wc-block-sidebar-layout',
|
|
|
|
className,
|
|
|
|
containerQueryClassName
|
|
|
|
) }
|
|
|
|
>
|
|
|
|
{ resizeListener }
|
2020-03-12 09:41:35 +00:00
|
|
|
{ children }
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-03-13 15:49:33 +00:00
|
|
|
SidebarLayout.propTypes = {
|
|
|
|
className: PropTypes.string,
|
|
|
|
};
|
|
|
|
|
2020-03-12 09:41:35 +00:00
|
|
|
export default SidebarLayout;
|