@guardian/threads
Version:
39 lines • 2.46 kB
JavaScript
import { __spreadArrays } from "tslib";
import React, { useRef, useState } from 'react';
import { withBreakpoints } from 'react-breakpoints';
import styles from './PageWithSidebar.module.css';
import { MdMenu } from 'react-icons/md';
import { PopOver } from '../../components/PopOver/PopOver';
export var PageWithSidebarNoBreakpoints = function (_a) {
var sidebar = _a.sidebar, sidebarClassName = _a.sidebarClassName, children = _a.children, currentBreakpoint = _a.currentBreakpoint;
var sidebarRef = useRef(null);
var _b = useState(false), mobileOpen = _b[0], setMobileOpen = _b[1];
var sidebarContentClassName = __spreadArrays([
styles.sidebar
], [sidebarClassName ? [sidebarClassName] : []]).join(' ');
switch (currentBreakpoint) {
case 'mobile':
var top_1 = sidebarRef.current
? sidebarRef.current.getBoundingClientRect().top
: 0;
return (React.createElement("div", { className: styles.container },
React.createElement("div", { ref: sidebarRef, className: styles.mobileSideBar },
mobileOpen && (React.createElement(PopOver, { persistent: true, top: top_1, left: 0, origin: "left", onClose: function () { return setMobileOpen(false); } },
React.createElement("div", { className: [
sidebarContentClassName,
styles.mobileSideBarPopover,
].join(' ') },
React.createElement("div", { className: styles.sidebarContent }, sidebar)))),
React.createElement("div", { className: styles.sidebarContent, onClick: function () { return setMobileOpen(!mobileOpen); } },
React.createElement(MdMenu, null),
React.createElement("div", null, "Menu"))),
React.createElement("div", { className: styles.content }, children)));
default:
return (React.createElement("div", { className: styles.container },
React.createElement("div", { className: sidebarContentClassName },
React.createElement("div", { className: styles.sidebarContent }, sidebar)),
React.createElement("div", { className: styles.content }, children)));
}
};
export var PageWithSidebar = withBreakpoints(PageWithSidebarNoBreakpoints);
//# sourceMappingURL=PageWithSidebar.js.map