How to use terra-application-layout - 8 common examples

import { Utils } from 'terra-application-layout';
import escapeRegExp from 'lodash.escaperegexp';

const propTypes = {
  /**
   * The title to render within the DevSiteRoutingMenu's header.
   */
  title: PropTypes.string,
  /**
   * The array of routing shapes to be rendered as menu items within the DevSiteRoutingMenu.
   */
  menuItems: Utils.propTypes.navigationItemsPropType, // eslint-disable-line react/forbid-foreign-prop-types
  /**
   * The Object of layout-related APIs provided to the components of the Layout.
   */
  layoutConfig: Utils.propTypes.layoutConfigPropType.isRequired, // eslint-disable-line react/forbid-foreign-prop-types
  /**
   * The Object containing RoutingStack APIs provided to children of the RoutingStack. This is
   * used to render a Back button upon presence of a `showParent` implementation.
   */
  routingStackDelegate: RoutingStackDelegate.propType.isRequired,
  /**
   * The location from the router context. This prop is provided by the `withRouter` HOC-generator.
   */
  location: PropTypes.shape({
    pathname: PropTypes.string,
  }).isRequired,
};

const defaultProps = {
  title: '',
  menuItems: [],

import PropTypes from 'prop-types';
import { Utils } from 'terra-application-layout';

import styles from './Extensions.scss';

const cx = classNames.bind(styles);

const propTypes = {
  /**
   * The children extension items passed to the component.
   */
  children: PropTypes.node,
  /**
   * The layout configuration information to flex rendering..
   */
  layoutConfig: Utils.propTypes.layoutConfigPropType, // eslint-disable-line react/forbid-foreign-prop-types
};

const defaultProps = {
  children: [],
  layoutConfig: undefined,
};

const Extensions = (props) => {
  const { children, layoutConfig } = props;
  const isCompactSize = Utils.helpers.isSizeCompact(layoutConfig.size);

  let containerProps = { className: cx('container') };
  if (isCompactSize) {
    containerProps = {
      className: cx('container-compact'),
    };

import NavigationSideMenu from 'terra-navigation-side-menu';
import RoutingStackDelegate from 'terra-navigation-layout/lib/RoutingStackDelegate';
import SearchField from 'terra-search-field';
import { FormattedMessage } from 'react-intl';
import { Utils } from 'terra-application-layout';
import escapeRegExp from 'lodash.escaperegexp';

const propTypes = {
  /**
   * The title to render within the DevSiteRoutingMenu's header.
   */
  title: PropTypes.string,
  /**
   * The array of routing shapes to be rendered as menu items within the DevSiteRoutingMenu.
   */
  menuItems: Utils.propTypes.navigationItemsPropType, // eslint-disable-line react/forbid-foreign-prop-types
  /**
   * The Object of layout-related APIs provided to the components of the Layout.
   */
  layoutConfig: Utils.propTypes.layoutConfigPropType.isRequired, // eslint-disable-line react/forbid-foreign-prop-types
  /**
   * The Object containing RoutingStack APIs provided to children of the RoutingStack. This is
   * used to render a Back button upon presence of a `showParent` implementation.
   */
  routingStackDelegate: RoutingStackDelegate.propType.isRequired,
  /**
   * The location from the router context. This prop is provided by the `withRouter` HOC-generator.
   */
  location: PropTypes.shape({
    pathname: PropTypes.string,
  }).isRequired,
};

title: 'Custom Checkbox Item',
      isSelectable: true,
      isSelected: checkboxItemEnabled,
      isReadOnly: false,
      parentKey: Utils.utilityHelpers.defaultKeys.MENU,
    }, {
      key: 'readonly-item',
      title: 'Custom ReadOnly Item',
      isSelectable: true,
      isReadOnly: true,
      parentKey: Utils.utilityHelpers.defaultKeys.MENU,
    }, {
      key: 'additional-3',
      contentLocation: Utils.utilityHelpers.locations.FOOTER,
      title: 'Custom Footer',
      parentKey: Utils.utilityHelpers.defaultKeys.MENU,
    }];

    /**
     * The data provided for utilityConfig will be visible in the ApplicationLayout's header in the
     * standard rendering mode and within the menus in the compact rendering mode.
     *
     * The ApplicationLayout's Utils export provides a helper function named getDefaultUtilityConfig that will
     * generate the configuration for the standard set of utility options. If the standard configuration is not
     * desirable, an entirely custom configuration can be used instead.
     */
    const utilityConfig = Object.freeze({
      title: 'Swanson, Henry',
      accessory: userAvatar,
      menuItems: Utils.utilityHelpers.getDefaultUtilityItems(intl, userData, customUtilityItems),
      initialSelectedKey: Utils.utilityHelpers.defaultKeys.MENU,
      onChange: (event, itemData, disclose) => {

render() {
    const { intl, location } = this.props;
    const { checkboxItemEnabled } = this.state;

    const customUtilityItems = [{
      key: 'additional-1',
      title: 'Drill-in Item',
      childKeys: [
        'additional-sub-1',
        'additional-sub-2',
      ],
      parentKey: Utils.utilityHelpers.defaultKeys.MENU,
    }, {
      key: 'additional-sub-1',
      title: 'Additional Item 1 - Sub 1',
      parentKey: 'additional-1',
    }, {
      key: 'additional-sub-2',
      title: 'Additional Item 1 - Sub 2',
      parentKey: 'additional-1',
    }, {
      key: 'checkbox-item',
      title: 'Custom Checkbox Item',
      isSelectable: true,
      isSelected: checkboxItemEnabled,
      isReadOnly: false,
      parentKey: Utils.utilityHelpers.defaultKeys.MENU,
    }, {

render() {
    const { intl, location } = this.props;
    const { checkboxItemEnabled } = this.state;

    const customUtilityItems = [{
      key: 'additional-1',
      title: 'Drill-in Item',
      childKeys: [
        'additional-sub-1',
        'additional-sub-2',
      ],
      parentKey: Utils.utilityHelpers.defaultKeys.MENU,
    }, {
      key: 'additional-sub-1',
      title: 'Additional Item 1 - Sub 1',
      parentKey: 'additional-1',
    }, {
      key: 'additional-sub-2',
      title: 'Additional Item 1 - Sub 2',
      parentKey: 'additional-1',
    }, {
      key: 'checkbox-item',
      title: 'Custom Checkbox Item',
      isSelectable: true,
      isSelected: checkboxItemEnabled,
      isReadOnly: false,
      parentKey: Utils.utilityHelpers.defaultKeys.MENU,
    }, {

parentKey: Utils.utilityHelpers.defaultKeys.MENU,
    }, {
      key: 'additional-sub-1',
      title: 'Additional Item 1 - Sub 1',
      parentKey: 'additional-1',
    }, {
      key: 'additional-sub-2',
      title: 'Additional Item 1 - Sub 2',
      parentKey: 'additional-1',
    }, {
      key: 'checkbox-item',
      title: 'Custom Checkbox Item',
      isSelectable: true,
      isSelected: checkboxItemEnabled,
      isReadOnly: false,
      parentKey: Utils.utilityHelpers.defaultKeys.MENU,
    }, {
      key: 'readonly-item',
      title: 'Custom ReadOnly Item',
      isSelectable: true,
      isReadOnly: true,
      parentKey: Utils.utilityHelpers.defaultKeys.MENU,
    }, {
      key: 'additional-3',
      contentLocation: Utils.utilityHelpers.locations.FOOTER,
      title: 'Custom Footer',
      parentKey: Utils.utilityHelpers.defaultKeys.MENU,
    }];

    /**
     * The data provided for utilityConfig will be visible in the ApplicationLayout's header in the
     * standard rendering mode and within the menus in the compact rendering mode.

const Extensions = (props) => {
  const { children, layoutConfig } = props;
  const isCompactSize = Utils.helpers.isSizeCompact(layoutConfig.size);

  let containerProps = { className: cx('container') };
  if (isCompactSize) {
    containerProps = {
      className: cx('container-compact'),
    };
  }

  const wrappedChildren = React.Children.map(children, child => (
    <div>
      { child }
    </div>
  ));

  return (
    <div></div>