polen
Version:
A framework for delightful GraphQL developer portals
30 lines • 2.33 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Cross2Icon, HamburgerMenuIcon } from '@radix-ui/react-icons';
import { Box, Flex, IconButton, Text } from '@radix-ui/themes';
import { useEffect } from 'react';
import { Sidebar } from '../components/sidebar/Sidebar.js';
export const HamburgerMenu = ({ isOpen, onToggle, onClose, sidebarData, }) => {
// Prevent body scroll when mobile menu is open
useEffect(() => {
if (isOpen) {
document.body.style.overflow = `hidden`;
}
else {
document.body.style.overflow = ``;
}
// Cleanup
return () => {
document.body.style.overflow = ``;
};
}, [isOpen]);
return (_jsxs(_Fragment, { children: [_jsx(Box, { display: { initial: `block`, xs: `block`, sm: `block`, md: `none`, lg: `none`, xl: `none` }, children: _jsx(IconButton, { size: '2', variant: 'ghost', onClick: onToggle, "aria-label": 'Toggle navigation menu', children: isOpen ? _jsx(Cross2Icon, { width: '18', height: '18' }) : _jsx(HamburgerMenuIcon, { width: '18', height: '18' }) }) }), isOpen && (_jsxs(_Fragment, { children: [_jsx(Box, { position: 'fixed', inset: '0', style: {
backgroundColor: `var(--black-a9)`,
zIndex: 50,
}, onClick: onClose, display: { initial: `block`, xs: `block`, sm: `block`, md: `none`, lg: `none`, xl: `none` } }), _jsxs(Box, { position: 'fixed', top: '0', left: '0', bottom: '0', width: '280px', style: {
backgroundColor: `var(--color-background)`,
boxShadow: `var(--shadow-6)`,
zIndex: 100,
overflowY: `auto`,
}, p: '4', display: { initial: `block`, xs: `block`, sm: `block`, md: `none`, lg: `none`, xl: `none` }, children: [_jsxs(Flex, { justify: 'between', align: 'center', mb: '4', children: [_jsx(Text, { size: '5', weight: 'bold', children: "Navigation" }), _jsx(IconButton, { size: '2', variant: 'ghost', onClick: onClose, "aria-label": 'Close navigation menu', children: _jsx(Cross2Icon, { width: '18', height: '18' }) })] }), _jsx(Sidebar, { data: sidebarData })] })] }))] }));
};
//# sourceMappingURL=HamburgerMenu.js.map