@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
57 lines (55 loc) • 1.66 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useEffect } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
import { resolveDimension } from '../../common/utils';
import { publishGridState, useSkipLink } from '../../controllers';
import LeftSidebarInner from './internal/left-sidebar-inner';
import LeftSidebarOuter from './internal/left-sidebar-outer';
import SlotDimensions from './slot-dimensions';
/**
* __Left sidebar without resize__
*
* Provides a slot for a left sidebar without resize within the PageLayout.
*
* - [Examples](https://atlassian.design/components/page-layout/examples)
* - [Code](https://atlassian.design/components/page-layout/code)
*/
const LeftSidebarWithoutResize = props => {
const {
children,
id,
width,
isFixed,
shouldPersistWidth,
testId,
skipLinkTitle
} = props;
const leftSidebarWidth = resolveDimension(VAR_LEFT_SIDEBAR_WIDTH, width, shouldPersistWidth);
useEffect(() => {
publishGridState({
[VAR_LEFT_SIDEBAR_WIDTH]: leftSidebarWidth
});
return () => {
publishGridState({
[VAR_LEFT_SIDEBAR_WIDTH]: 0
});
};
}, [leftSidebarWidth]);
useSkipLink(id, skipLinkTitle);
return jsx(LeftSidebarOuter, {
id: id,
testId: testId,
isFixed: isFixed
}, jsx(SlotDimensions, {
variableName: VAR_LEFT_SIDEBAR_WIDTH,
value: leftSidebarWidth
}), jsx(LeftSidebarInner, {
isFixed: isFixed
}, children));
};
export default LeftSidebarWithoutResize;