@redocly/theme/lib/layouts/PageLayout.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PageLayout = PageLayout;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../core/utils");
const constants_1 = require("../core/constants");
function PageLayout({ sidebar, children, }) {
    return (react_1.default.createElement(Container, { "data-component-name": "Layout/PageLayout" },
        sidebar,
        react_1.default.createElement(ContentContainer, { id: constants_1.CONTENT_ID, tabIndex: 0 }, children)));
}
const Container = styled_components_1.default.div `
  display: flex;
  flex-direction: row;
  min-height: calc(100vh - var(--navbar-height));

  @media screen and (min-width: ${utils_1.breakpoints.max}) {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
  }
`;
const ContentContainer = styled_components_1.default.div `
  flex: 1 0 0;
  /*
    flex-basis is ignored for nested flex in Chrome, need to set width
    See more here: https://stackoverflow.com/a/34355447
  */
  width: 0;
  max-width: 100%;
`;
//# sourceMappingURL=PageLayout.js.map