jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
32 lines (29 loc) • 1.59 kB
JavaScript
import { __rest } from '../../../../../../node_modules/tslib/tslib.es6.js';
import React__default from 'react';
import styled, { withTheme } from 'styled-components';
import { Grid } from '../../../../02-atoms/06-layout/04-grid/index.js';
import { Cell } from '../../../../02-atoms/06-layout/04-grid/Cell.js';
const ResponsiveGrid = styled(Grid) `
${props => props.theme.mediaQueries.smallRevert} {
display: block;
}
`;
/**
* 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(ResponsiveGrid, { columns: `${theme.layout.sidebar.width} auto ${theme.layout.sidebar.width}`, areas: [
'header header header',
'sidebar-first content sidebar-second ',
'footer footer footer'
] },
React__default.createElement(Cell, { area: "header" }, header),
React__default.createElement(Cell, { area: "sidebar-first" }, sidebarFirst),
React__default.createElement(Cell, { area: "content" }, content),
React__default.createElement(Cell, { area: "sidebar-second" }, sidebarSecond),
React__default.createElement(Cell, { area: "footer" }, footer)));
});
export { HolyGrailLayout };