nice-ui
Version:
React design system, components, and utilities
65 lines (64 loc) • 3.04 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_sticky_box_1 = require("react-sticky-box");
const nano_theme_1 = require("nano-theme");
const Drawer_1 = require("@material-ui/core/Drawer");
const constants_1 = require("../../constants");
const useWindowSize_1 = require("react-use/lib/useWindowSize");
const BasicButton_1 = require("../../2-inline-block/BasicButton");
const Iconista_1 = require("../../icons/Iconista");
const padding = 32;
const blockClass = (0, nano_theme_1.rule)({
d: 'flex',
alignItems: 'flex-start',
bxz: 'border-box',
maxW: '1300px',
mr: '0 auto',
'@media only screen and (max-width: 1000px)': {
padt: '8px',
},
});
const blockSmallScreenClass = (0, nano_theme_1.rule)({
d: 'block',
});
const asideClass = (0, nano_theme_1.rule)({
bxz: 'border-box',
f: `0 1 ${constants_1.NiceUiSizes.SidebarWidth}px`,
w: `${constants_1.NiceUiSizes.SidebarWidth + padding}px`,
pd: `0 ${padding}px 0 0`,
'@media only screen and (max-width: 1000px)': {
w: '100%',
pd: '4px 16px 16px 0',
},
});
const sectionClass = (0, nano_theme_1.rule)({
bxz: 'border-box',
f: '1 1 auto',
pd: `0 0 0 ${padding}px`,
w: `calc(100% - ${constants_1.NiceUiSizes.SidebarWidth}px)`,
maxW: `calc(100% - ${constants_1.NiceUiSizes.SidebarWidth}px)`,
[`.${blockSmallScreenClass.trim()} &`]: {
pd: '16px 24px',
},
});
const TwoColumnLayout = ({ top = 0, left, right, sidebarTopPadding }) => {
const [sidebar, setSidebar] = React.useState(false);
const { width } = (0, useWindowSize_1.default)();
if (width < 1000) {
return (React.createElement(React.Fragment, null,
React.createElement(Drawer_1.default, { anchor: 'left', open: sidebar, onClose: () => setSidebar((x) => !x), PaperProps: { style: { borderRadius: 32 } } },
React.createElement("div", { style: { padding: 16, minWidth: `calc(min(100vw - 32px, ${constants_1.NiceUiSizes.SidebarWidth}px))` }, onClick: () => setSidebar(false) }, left)),
React.createElement("div", { className: blockClass + blockSmallScreenClass },
React.createElement("div", { className: asideClass, style: { paddingTop: 16, paddingBottom: 16 } },
React.createElement(BasicButton_1.default, { border: true, size: 32, onClick: () => setSidebar((x) => !x) },
React.createElement(Iconista_1.Iconista, { set: "ant_outline", icon: "menu", width: 16, height: 16 }))),
React.createElement("section", null, right))));
}
const S = react_sticky_box_1.default;
return (React.createElement("div", { className: blockClass },
React.createElement(S, { offsetTop: top },
React.createElement("div", { className: asideClass, style: { paddingTop: sidebarTopPadding } }, left)),
React.createElement("section", { className: sectionClass }, right)));
};
exports.default = TwoColumnLayout;