polen
Version:
A framework for delightful GraphQL developer portals
25 lines • 1.65 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Grid } from '@radix-ui/themes';
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { HamburgerMenu } from '../components/HamburgerMenu.js';
import { Sidebar } from '../components/sidebar/Sidebar.js';
export const SidebarLayout = ({ children, sidebar }) => {
const location = useLocation();
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
// Close mobile menu on route change
useEffect(() => {
setMobileMenuOpen(false);
}, [location.pathname]);
const isShowSidebar = sidebar && sidebar.length > 0;
return (_jsxs(Grid, { areas: {
initial: `'content'`,
sm: `'content'`,
md: `'sidebar sidebar . content content content content content'`,
}, rows: 'auto', columns: { initial: `1fr`, sm: `1fr`, md: `repeat(8, 1fr)` }, gapX: { initial: `0`, sm: `0`, md: `2` }, children: [isShowSidebar && (_jsx(Box, { display: { initial: `block`, md: `none` }, mb: '4', children: _jsx(HamburgerMenu, { isOpen: mobileMenuOpen, onToggle: () => {
setMobileMenuOpen(!mobileMenuOpen);
}, onClose: () => {
setMobileMenuOpen(false);
}, sidebarData: sidebar }) })), isShowSidebar && (_jsx(Box, { display: { initial: `none`, xs: `none`, sm: `none`, md: `block` }, gridColumn: '1 / 3', gridRow: '1 / auto', children: _jsx(Sidebar, { data: sidebar }) })), _jsx(Box, { gridArea: 'content / content / auto / 8', children: children })] }));
};
//# sourceMappingURL=SidebarLayout.js.map