Skip to content

Commit

Permalink
[docs-infra] Fix TOC RTL padding regression (mui#44535)
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari authored Nov 30, 2024
1 parent 452d971 commit e1b3bfa
Showing 1 changed file with 11 additions and 16 deletions.
27 changes: 11 additions & 16 deletions docs/src/modules/components/AppTableOfContents.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,7 @@ const NavList = styled(Typography)({
});

const NavItem = styled(Link, {
shouldForwardProp: (prop) =>
prop !== 'active' && prop !== 'secondary' && prop !== 'secondarySubItem',
shouldForwardProp: (prop) => prop !== 'active' && prop !== 'level',
})(({ theme }) => {
const activeStyles = {
borderLeftColor: (theme.vars || theme).palette.primary[200],
Expand All @@ -67,9 +66,8 @@ const NavItem = styled(Link, {

return [
{
'--_padding-left': '12px',
boxSizing: 'border-box',
padding: theme.spacing('6px', 0, '6px', 'var(--_padding-left)'),
padding: '6px 0 6px 12px',
borderLeft: `1px solid transparent`,
display: 'block',
fontSize: theme.typography.pxToRem(13),
Expand All @@ -93,15 +91,15 @@ const NavItem = styled(Link, {
},
},
{
props: ({ secondary }) => secondary,
props: ({ level }) => level === 2,
style: {
'--_padding-left': theme.spacing(3),
padding: `6px 0 6px ${theme.spacing(3)}`,
},
},
{
props: ({ secondarySubItem }) => secondarySubItem,
props: ({ level }) => level === 3,
style: {
'--_padding-left': theme.spacing(4.5),
padding: `6px 0 6px ${theme.spacing(4.5)}`,
},
},
],
Expand Down Expand Up @@ -250,15 +248,14 @@ export default function AppTableOfContents(props) {
[],
);

const itemLink = (item, secondary, secondarySubItem) => (
const itemLink = (item, level) => (
<NavItem
display="block"
href={`#${item.hash}`}
underline="none"
onClick={handleClick(item.hash)}
active={activeState === item.hash}
secondary={secondary}
secondarySubItem={secondarySubItem}
level={level}
>
<span dangerouslySetInnerHTML={{ __html: item.text }} />
</NavItem>
Expand Down Expand Up @@ -324,18 +321,16 @@ export default function AppTableOfContents(props) {
<NavList component="ul">
{toc.map((item) => (
<li key={item.text}>
{itemLink(item)}
{itemLink(item, 1)}
{item.children.length > 0 ? (
<NavList as="ul">
{item.children.map((subitem) => (
<li key={subitem.text}>
{itemLink(subitem, true)}
{itemLink(subitem, 2)}
{subitem.children?.length > 0 ? (
<NavList as="ul">
{subitem.children.map((nestedSubItem) => (
<li key={nestedSubItem.text}>
{itemLink(nestedSubItem, false, true)}
</li>
<li key={nestedSubItem.text}>{itemLink(nestedSubItem, 3)}</li>
))}
</NavList>
) : null}
Expand Down

0 comments on commit e1b3bfa

Please sign in to comment.