jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
37 lines (34 loc) • 1.71 kB
JavaScript
import { __rest } from '../../../../../../node_modules/tslib/tslib.es6.js';
import React__default from 'react';
import { withTheme } from 'styled-components';
import { Grid } from '../../../../02-atoms/06-layout/04-grid/index.js';
import { Cell } from '../../../../02-atoms/06-layout/04-grid/01-cell/index.js';
/**
* A layout that has a single sidebar and a container. Fully responsive so when
* going to a narrow device it will not display as grid but rather sidebar on top of
* the content.
*/
const HolyGrailLayout = withTheme((_a) => {
var { content, sidebarFirst, sidebarSecond, footer, header, theme } = _a, props = __rest(_a, ["content", "sidebarFirst", "sidebarSecond", "footer", "header", "theme"]);
return (React__default.createElement(Grid, { gridGap: [4, 6], gridTemplateColumns: [
'1fr',
`${theme.layout.sidebar.width} auto ${theme.layout.sidebar.width}`
], gridTemplateAreas: [
`
"header"
"sidebar-first"
"content"
"sidebar-second"
"footer"`,
`
"header header header"
"sidebar-first content sidebar-second "
"footer footer footer"`
] },
React__default.createElement(Cell, { gridArea: "header" }, header),
React__default.createElement(Cell, { gridArea: "sidebar-first" }, sidebarFirst),
React__default.createElement(Cell, { gridArea: "content" }, content),
React__default.createElement(Cell, { gridArea: "sidebar-second" }, sidebarSecond),
React__default.createElement(Cell, { gridArea: "footer" }, footer)));
});
export { HolyGrailLayout };