polen
Version:
A framework for delightful GraphQL developer portals
77 lines • 3.55 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Texts } from '#template/components/Texts/index';
import { Box, Flex } from '@radix-ui/themes';
import { useLocation } from 'react-router';
import { getPathActiveReport, Link } from '../Link.js';
export const Items = ({ items }) => {
return (_jsx(Flex, { direction: 'column', gap: '2px', children: items.map((item, index) => (_jsx(Item, { item: item }, `${item.pathExp}-${index}`))) }));
};
//
//
//
//
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • SidebarItem
//
//
export const Item = ({ item }) => {
if (item.type === `ItemLink`) {
return _jsx(SBLink, { link: item });
}
if (item.type === `ItemSection` && item.isLinkToo) {
return _jsx(LinkedSection, { section: item });
}
return _jsx(Section, { section: item });
};
//
//
//
//
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • SidebarItemLink
//
//
const SBLink = ({ link }) => {
const location = useLocation();
const currentPathExp = location.pathname;
const active = getPathActiveReport(link.pathExp, currentPathExp);
return (_jsx(Link, { role: 'Sidebar Link', color: active.is ? `iris` : `gray`, "data-testid": `sidebar-link-${link.pathExp}`, to: `/${link.pathExp}`, style: {
display: `block`,
textDecoration: `none`,
color: active.is ? `var(--accent-12)` : undefined,
backgroundColor: active.isDirect ? `var(--accent-2)` : active.isDescendant ? `var(--accent-1)` : `transparent`,
borderRadius: `var(--radius-2)`,
}, children: _jsx(Box, { py: '2', px: '4', children: link.title }) }));
};
//
//
//
//
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Section
//
//
const Section = ({ section }) => {
return (_jsxs(Box, { mt: '8', children: [_jsx(Box, { ml: '4', mb: '2', children: _jsx(Texts.MinorHeading, { color: 'gray', children: section.title }) }), _jsx(Items, { items: section.links })] }));
};
//
//
//
//
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • LinkedSection
//
//
const LinkedSection = ({ section }) => {
return (_jsxs(Box, { children: [_jsx(SBLink, { link: section }), _jsx(Flex, { direction: 'column', gap: '2', id: `section-${section.pathExp.replace(/\//g, `-`)}`, role: 'group', ml: '5', py: '2px', style: {
borderLeft: `1px solid var(--gray-5)`,
}, children: section.links.map((link, index) => (_jsx(SectionLink, { link: link }, `${link.pathExp}-${index}`))) })] }));
};
const SectionLink = ({ link }) => {
const location = useLocation();
const active = getPathActiveReport(link.pathExp, location.pathname);
return (_jsx(Link, { role: 'Sidebar Link', to: `/` + link.pathExp, color: active.is ? `iris` : `gray`, style: {
textDecoration: `none`,
color: active.is ? `var(--accent-12)` : undefined,
backgroundColor: active.isDirect ? `var(--accent-2)` : active.isDescendant ? `var(--accent-1)` : `transparent`,
borderBottomRightRadius: `var(--radius-2)`,
borderTopRightRadius: `var(--radius-2)`,
}, children: _jsx(Box, { py: '2', px: '4', children: link.title }) }));
};
//# sourceMappingURL=SidebarItem.js.map