Skip to content

Commit 859dffe

Browse files
corwintinescorwintines
authored
Merge pull request #213 from ethereum/side-nav-fixes
SideNav / TableOfContents fixes
2 parents 99c2421 + 1f76f89 commit 859dffe

File tree

4 files changed

+86
-88
lines changed

4 files changed

+86
-88
lines changed

‎src/components/SideNav.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,13 @@ const SideNavLink = ({ children, ...props }: LinkProps) => {
6666
export interface IPropsNavLink {
6767
item: DeveloperDocsLink
6868
path: string
69+
isTopLevel?: boolean
6970
}
7071

71-
const NavLink: React.FC<IPropsNavLink> = ({ item, path }) => {
72+
const NavLink: React.FC<IPropsNavLink> = ({ item, path, isTopLevel }) => {
7273
const { t } = useTranslation("page-developers-docs")
73-
const isLinkInPath = path.includes(item.to) || path.includes(item.path)
74+
const isLinkInPath =
75+
isTopLevel || path.includes(item.to) || path.includes(item.path)
7476
const [isOpen, setIsOpen] = useState<boolean>(isLinkInPath)
7577

7678
useEffect(() => {
@@ -115,7 +117,7 @@ const NavLink: React.FC<IPropsNavLink> = ({ item, path }) => {
115117
key={item.id}
116118
animate={isOpen ? "open" : "closed"}
117119
variants={innerLinksVariants}
118-
initial="closed"
120+
initial={isOpen ? "open" : "closed"}
119121
>
120122
{item.items.map((childItem, idx) => (
121123
<NavLink item={childItem} path={path} key={idx} />
@@ -166,7 +168,7 @@ const SideNav = ({ path }: SideNavProps) => {
166168
aria-label={t("common:nav-developers-docs")}
167169
>
168170
{docLinks.map((item, idx) => (
169-
<NavLink item={item} path={path} key={idx} />
171+
<NavLink item={item} path={path} key={idx} isTopLevel />
170172
))}
171173
</Box>
172174
)

‎src/components/TableOfContents/TableOfContentsMobile.tsx

Lines changed: 39 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -37,49 +37,47 @@ const Mobile: React.FC<IPropsTableOfContentsMobile> = ({ items, maxDepth }) => {
3737
}
3838

3939
return (
40-
<Show below={lgBp}>
41-
{/* TODO: switch `l` to `lg` after UI migration and use `hideBelow` prop */}
42-
<Box
43-
as="aside"
44-
background="background.base"
45-
border="1px"
46-
borderColor="border"
47-
borderRadius="4px"
48-
py={2}
49-
px={4}
40+
<Box
41+
hideFrom={lgBp}
42+
as="aside"
43+
background="background.base"
44+
border="1px"
45+
borderColor="border"
46+
borderRadius="4px"
47+
py={2}
48+
px={4}
49+
>
50+
<Flex
51+
color="text200"
52+
cursor="pointer"
53+
alignItems="center"
54+
justify="space-between"
55+
{...getButtonProps()}
5056
>
51-
<Flex
52-
color="text200"
53-
cursor="pointer"
54-
alignItems="center"
55-
justify="space-between"
56-
{...getButtonProps()}
57-
>
58-
<chakra.span flex={1} fontWeight={500}>
59-
{t("on-this-page")}
60-
</chakra.span>
61-
<Icon
62-
as={MdExpandMore}
63-
transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
64-
boxSize={6}
65-
transition="transform .4s"
57+
<chakra.span flex={1} fontWeight={500}>
58+
{t("on-this-page")}
59+
</chakra.span>
60+
<Icon
61+
as={MdExpandMore}
62+
transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
63+
boxSize={6}
64+
transition="transform .4s"
65+
/>
66+
</Flex>
67+
<Fade
68+
in={isOpen}
69+
{...getDisclosureProps()}
70+
transition={{ enter: { duration: 0.6 } }}
71+
>
72+
<List {...outerListProps}>
73+
<ItemsList
74+
items={items}
75+
depth={0}
76+
maxDepth={maxDepth ? maxDepth : 1}
6677
/>
67-
</Flex>
68-
<Fade
69-
in={isOpen}
70-
{...getDisclosureProps()}
71-
transition={{ enter: { duration: 0.6 } }}
72-
>
73-
<List {...outerListProps}>
74-
<ItemsList
75-
items={items}
76-
depth={0}
77-
maxDepth={maxDepth ? maxDepth : 1}
78-
/>
79-
</List>
80-
</Fade>
81-
</Box>
82-
</Show>
78+
</List>
79+
</Fade>
80+
</Box>
8381
)
8482
}
8583

‎src/components/TableOfContents/index.tsx

Lines changed: 39 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
Icon,
88
List,
99
ListItem,
10-
Show,
1110
useToken,
1211
} from "@chakra-ui/react"
1312

@@ -68,47 +67,46 @@ const TableOfContents: React.FC<IProps> = ({
6867
}
6968

7069
return (
71-
<Show above={lgBp}>
72-
<Box
73-
as="aside"
74-
position="sticky"
75-
top="7.25rem" // Account for navbar
76-
p={4}
77-
pe={0}
78-
maxW="25%"
79-
minW={48}
80-
height={calc.subtract("100vh", "80px")}
81-
overflowY="auto"
82-
{...rest}
83-
>
84-
<List {...outerListProps}>
85-
{!hideEditButton && editPath && (
86-
<ListItem mb={2}>
87-
<ButtonLink
88-
leftIcon={<Icon as={FaGithub} />}
89-
href={editPath}
90-
variant="outline"
91-
>
92-
{t("edit-page")}
93-
</ButtonLink>
94-
</ListItem>
95-
)}
96-
<ListItem>
97-
<Box mb={2} textTransform="uppercase">
98-
{t("on-this-page")}
99-
</Box>
100-
<List m={0}>
101-
<ItemsList
102-
items={items}
103-
depth={0}
104-
maxDepth={maxDepth ? maxDepth : 1}
105-
activeHash={activeHash}
106-
/>
107-
</List>
70+
<Box
71+
hideBelow={lgBp}
72+
as="aside"
73+
position="sticky"
74+
top="7.25rem" // Account for navbar
75+
p={4}
76+
pe={0}
77+
maxW="25%"
78+
minW={48}
79+
height={calc.subtract("100vh", "80px")}
80+
overflowY="auto"
81+
{...rest}
82+
>
83+
<List {...outerListProps}>
84+
{!hideEditButton && editPath && (
85+
<ListItem mb={2}>
86+
<ButtonLink
87+
leftIcon={<Icon as={FaGithub} />}
88+
href={editPath}
89+
variant="outline"
90+
>
91+
{t("edit-page")}
92+
</ButtonLink>
10893
</ListItem>
109-
</List>
110-
</Box>
111-
</Show>
94+
)}
95+
<ListItem>
96+
<Box mb={2} textTransform="uppercase">
97+
{t("on-this-page")}
98+
</Box>
99+
<List m={0}>
100+
<ItemsList
101+
items={items}
102+
depth={0}
103+
maxDepth={maxDepth ? maxDepth : 1}
104+
activeHash={activeHash}
105+
/>
106+
</List>
107+
</ListItem>
108+
</List>
109+
</Box>
112110
)
113111
}
114112

‎src/lib/utils/toc.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ListProps } from "@chakra-ui/react"
22

3-
import type { ToCItem,TocNodeType } from "@/lib/types"
3+
import type { ToCItem, TocNodeType } from "@/lib/types"
44

55
// RegEx patterns
66
const customIdRegEx = /^.+(\s*\{#([^\}]+?)\}\s*)$/
@@ -44,7 +44,7 @@ export const outerListProps: ListProps = {
4444
pt: 0,
4545
sx: {
4646
// TODO: Flip to object syntax with `lg` token after completion of Chakra migration
47-
"@media (max-width: 1024px)": {
47+
"@media (max-width: var(--eth-breakpoints-lg))": {
4848
borderStart: 0,
4949
borderTop: "1px",
5050
borderTopColor: "primary300",

0 commit comments

Comments
 (0)