@ucam/design-system
Version:
University of Cambridge Design System
44 lines (41 loc) • 6.98 kB
JavaScript
import { __rest } from 'tslib';
import React, { forwardRef } from 'react';
import { experimentalStyled, Drawer } from '@material-ui/core';
import PropTypes from 'prop-types';
const DesktopDrawer = experimentalStyled(Drawer)(({ theme }) => ({
width: '240px',
'.MuiDrawer-paper': { width: '240px' },
[theme.breakpoints.down('sm')]: {
display: 'none'
}
}));
/* eslint-disable react/prop-types */
const SidebarBase = React.forwardRef(function SidebarBase(_a, ref) {
var { children, drawerProps, sx } = _a, other = __rest(_a, ["children", "drawerProps", "sx"]);
const [mobileOpen, setMobileOpen] = React.useState(false);
return (React.createElement("nav", Object.assign({ ref: ref }, other),
React.createElement(DesktopDrawer, Object.assign({ className: "UcamSidebar-desktop", sx: sx, variant: "permanent", open: true }, drawerProps), children),
React.createElement(Drawer, Object.assign({ className: "UcamSidebar-mobile", sx: sx, variant: "temporary", open: mobileOpen, onClose: () => setMobileOpen(false), ModalProps: {
keepMounted: true // Better open performance on mobile.
} }, drawerProps), children)));
});
const Sidebar = forwardRef(function Sidebar(_a, ref) {
var { drawerProps = {} } = _a, rest = __rest(_a, ["drawerProps"]);
return React.createElement(SidebarBase, Object.assign({ drawerProps: drawerProps }, rest, { ref: ref }));
});
Sidebar.propTypes = {
/**
* Additional className(s) to be applied to the root element
*/
className: PropTypes.string,
/**
* Props applied to the Drawer element.
*/
drawerProps: PropTypes.shape(Drawer.propTypes),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.object
};
export { Sidebar as default };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2lkZWJhci5qcyIsInNvdXJjZXMiOlsiL0B1Y2FtL2Rlc2lnbi1zeXN0ZW0vc3JjL1NpZGViYXIvU2lkZWJhci50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IEZDLCBmb3J3YXJkUmVmLCBXZWFrVmFsaWRhdGlvbk1hcCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IERyYXdlciwgRHJhd2VyUHJvcHMgfSBmcm9tICdAbWF0ZXJpYWwtdWkvY29yZSc7XG5pbXBvcnQgeyBleHBlcmltZW50YWxTdHlsZWQgYXMgc3R5bGVkIH0gZnJvbSAnQG1hdGVyaWFsLXVpL2NvcmUnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IFN4UHJvcHMgfSBmcm9tICdAbWF0ZXJpYWwtdWkvc3lzdGVtJztcbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAnQG1hdGVyaWFsLXVpL2NvcmUvc3R5bGVzJztcblxudHlwZSBTaWRlYmFyQmFzZVByb3BzID0gSlNYLkludHJpbnNpY0VsZW1lbnRzWyduYXYnXSAmIFNpZGViYXJQcm9wcztcblxuY29uc3QgRGVza3RvcERyYXdlciA9IHN0eWxlZChEcmF3ZXIpKCh7IHRoZW1lIH0pID0+ICh7XG4gIHdpZHRoOiAnMjQwcHgnLFxuICAnLk11aURyYXdlci1wYXBlcic6IHsgd2lkdGg6ICcyNDBweCcgfSxcbiAgW3RoZW1lLmJyZWFrcG9pbnRzLmRvd24oJ3NtJyldOiB7XG4gICAgZGlzcGxheTogJ25vbmUnXG4gIH1cbn0pKTtcblxuLyogZXNsaW50LWRpc2FibGUgcmVhY3QvcHJvcC10eXBlcyAqL1xuY29uc3QgU2lkZWJhckJhc2UgPSBSZWFjdC5mb3J3YXJkUmVmPEhUTUxFbGVtZW50LCBTaWRlYmFyQmFzZVByb3BzPihmdW5jdGlvbiBTaWRlYmFyQmFzZShcbiAgeyBjaGlsZHJlbiwgZHJhd2VyUHJvcHMsIHN4LCAuLi5vdGhlciB9LFxuICByZWZcbikge1xuICBjb25zdCBbbW9iaWxlT3Blbiwgc2V0TW9iaWxlT3Blbl0gPSBSZWFjdC51c2VTdGF0ZShmYWxzZSk7XG5cbiAgcmV0dXJuIChcbiAgICA8bmF2IHJlZj17cmVmfSB7Li4ub3RoZXJ9PlxuICAgICAgPERlc2t0b3BEcmF3ZXIgY2xhc3NOYW1lPVwiVWNhbVNpZGViYXItZGVza3RvcFwiIHN4PXtzeH0gdmFyaWFudD1cInBlcm1hbmVudFwiIG9wZW4gey4uLmRyYXdlclByb3BzfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9EZXNrdG9wRHJhd2VyPlxuICAgICAgPERyYXdlclxuICAgICAgICBjbGFzc05hbWU9XCJVY2FtU2lkZWJhci1tb2JpbGVcIlxuICAgICAgICBzeD17c3h9XG4gICAgICAgIHZhcmlhbnQ9XCJ0ZW1wb3JhcnlcIlxuICAgICAgICBvcGVuPXttb2JpbGVPcGVufVxuICAgICAgICBvbkNsb3NlPXsoKSA9PiBzZXRNb2JpbGVPcGVuKGZhbHNlKX1cbiAgICAgICAgTW9kYWxQcm9wcz17e1xuICAgICAgICAgIGtlZXBNb3VudGVkOiB0cnVlIC8vIEJldHRlciBvcGVuIHBlcmZvcm1hbmNlIG9uIG1vYmlsZS5cbiAgICAgICAgfX1cbiAgICAgICAgey4uLmRyYXdlclByb3BzfVxuICAgICAgPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L0RyYXdlcj5cbiAgICA8L25hdj5cbiAgKTtcbn0pO1xuLyogZXNsaW50LWVuYWJsZSByZWFjdC9wcm9wLXR5cGVzICovXG5cbnR5cGUgU2lkZWJhclByb3BzID0ge1xuICAvKipcbiAgICogUHJvcHMgYXBwbGllZCB0byB0aGUgRHJhd2VyIGVsZW1lbnQuXG4gICAqL1xuICBkcmF3ZXJQcm9wcz86IERyYXdlclByb3BzO1xuICAvKipcbiAgICogVGhlIHN5c3RlbSBwcm9wIHRoYXQgYWxsb3dzIGRlZmluaW5nIHN5c3RlbSBvdmVycmlkZXMgYXMgd2VsbCBhcyBhZGRpdGlvbmFsIENTUyBzdHlsZXMuXG4gICAqL1xuICBzeD86IFN4UHJvcHM8VGhlbWU+O1xufSAmIEpTWC5JbnRyaW5zaWNFbGVtZW50c1snbmF2J107XG5cbmNvbnN0IFNpZGViYXIgPSBmb3J3YXJkUmVmPEhUTUxFbGVtZW50LCBTaWRlYmFyUHJvcHM+KGZ1bmN0aW9uIFNpZGViYXIoeyBkcmF3ZXJQcm9wcyA9IHt9LCAuLi5yZXN0IH0sIHJlZikge1xuICByZXR1cm4gPFNpZGViYXJCYXNlIGRyYXdlclByb3BzPXtkcmF3ZXJQcm9wc30gey4uLnJlc3R9IHJlZj17cmVmfSAvPjtcbn0pO1xuXG5TaWRlYmFyLnByb3BUeXBlcyA9IHtcbiAgLyoqXG4gICAqIEFkZGl0aW9uYWwgY2xhc3NOYW1lKHMpIHRvIGJlIGFwcGxpZWQgdG8gdGhlIHJvb3QgZWxlbWVudFxuICAgKi9cbiAgY2xhc3NOYW1lOiBQcm9wVHlwZXMuc3RyaW5nLFxuICAvKipcbiAgICogUHJvcHMgYXBwbGllZCB0byB0aGUgRHJhd2VyIGVsZW1lbnQuXG4gICAqL1xuICBkcmF3ZXJQcm9wczogUHJvcFR5cGVzLnNoYXBlKChEcmF3ZXIgYXMgRkM8RHJhd2VyUHJvcHM+KS5wcm9wVHlwZXMgYXMgV2Vha1ZhbGlkYXRpb25NYXA8RHJhd2VyUHJvcHM+KSxcbiAgLyoqXG4gICAqIFRoZSBzeXN0ZW0gcHJvcCB0aGF0IGFsbG93cyBkZWZpbmluZyBzeXN0ZW0gb3ZlcnJpZGVzIGFzIHdlbGwgYXMgYWRkaXRpb25hbCBDU1Mgc3R5bGVzLlxuICAgKi9cbiAgc3g6IFByb3BUeXBlcy5vYmplY3Rcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFNpZGViYXI7XG4iXSwibmFtZXMiOlsic3R5bGVkIl0sIm1hcHBpbmdzIjoiOzs7OztBQVNBLE1BQU0sYUFBYSxHQUFHQSxrQkFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxLQUFLLEVBQUUsTUFBTTtJQUNuRCxLQUFLLEVBQUUsT0FBTztJQUNkLGtCQUFrQixFQUFFLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRTtJQUN0QyxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHO1FBQzlCLE9BQU8sRUFBRSxNQUFNO0tBQ2hCO0NBQ0YsQ0FBQyxDQUFDLENBQUM7QUFFSjtBQUNBLE1BQU0sV0FBVyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQWdDLFNBQVMsV0FBVyxDQUN0RixFQUF1QyxFQUN2QyxHQUFHO1FBREgsRUFBRSxRQUFRLEVBQUUsV0FBVyxFQUFFLEVBQUUsT0FBWSxFQUFQLEtBQUssY0FBckMsaUNBQXVDLENBQUY7SUFHckMsTUFBTSxDQUFDLFVBQVUsRUFBRSxhQUFhLENBQUMsR0FBRyxLQUFLLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBRTFELFFBQ0UsMkNBQUssR0FBRyxFQUFFLEdBQUcsSUFBTSxLQUFLO1FBQ3RCLG9CQUFDLGFBQWEsa0JBQUMsU0FBUyxFQUFDLHFCQUFxQixFQUFDLEVBQUUsRUFBRSxFQUFFLEVBQUUsT0FBTyxFQUFDLFdBQVcsRUFBQyxJQUFJLFVBQUssV0FBVyxHQUM1RixRQUFRLENBQ0s7UUFDaEIsb0JBQUMsTUFBTSxrQkFDTCxTQUFTLEVBQUMsb0JBQW9CLEVBQzlCLEVBQUUsRUFBRSxFQUFFLEVBQ04sT0FBTyxFQUFDLFdBQVcsRUFDbkIsSUFBSSxFQUFFLFVBQVUsRUFDaEIsT0FBTyxFQUFFLE1BQU0sYUFBYSxDQUFDLEtBQUssQ0FBQyxFQUNuQyxVQUFVLEVBQUU7Z0JBQ1YsV0FBVyxFQUFFLElBQUk7YUFDbEIsSUFDRyxXQUFXLEdBRWQsUUFBUSxDQUNGLENBQ0wsRUFDTjtBQUNKLENBQUMsQ0FBQyxDQUFDO01BY0csT0FBTyxHQUFHLFVBQVUsQ0FBNEIsU0FBUyxPQUFPLENBQUMsRUFBNkIsRUFBRSxHQUFHO1FBQWxDLEVBQUUsV0FBVyxHQUFHLEVBQUUsT0FBVyxFQUFOLElBQUksY0FBM0IsZUFBNkIsQ0FBRjtJQUNoRyxPQUFPLG9CQUFDLFdBQVcsa0JBQUMsV0FBVyxFQUFFLFdBQVcsSUFBTSxJQUFJLElBQUUsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDO0FBQ3ZFLENBQUMsRUFBRTtBQUVILE9BQU8sQ0FBQyxTQUFTLEdBQUc7Ozs7SUFJbEIsU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNOzs7O0lBSTNCLFdBQVcsRUFBRSxTQUFTLENBQUMsS0FBSyxDQUFFLE1BQTBCLENBQUMsU0FBMkMsQ0FBQzs7OztJQUlyRyxFQUFFLEVBQUUsU0FBUyxDQUFDLE1BQU07Q0FDckI7Ozs7In0=