interesting
/
go-ethereum
mirror of https://github.com/ethereum/go-ethereum.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

close mobile docs dropdown when page is selected

This commit is contained in:
Corwin Smith 2022-12-06 16:19:55 -07:00
parent 56b9963afd
commit 1b5195908c
3 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/UI/docs/DocsLinks.tsx
View File

@ -19,9 +19,10 @@ import { NavLink } from '../../../types';
interface Props {
navLinks: NavLink[];
updateMobileAccordionState: () => void;
}
export const DocsLinks: FC<Props> = ({ navLinks }) => {
export const DocsLinks: FC<Props> = ({ navLinks, updateMobileAccordionState }) => {
const router = useRouter();
const { slug } = router.query;
return (
@ -52,7 +53,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
_groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }}
>
{to ? (
<NextLink href={to} passHref>
<NextLink href={to} passHref onClick={updateMobileAccordionState}>
<Link textDecoration='none !important'>
<Text
textStyle='docs-nav-dropdown'
@ -89,7 +90,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
</AccordionButton>
{items && (
<AccordionPanel borderBottom='2px solid' borderColor='primary' px={0} py={4}>
<LinksList links={items} />
<LinksList links={items} updateMobileAccordionState={updateMobileAccordionState} />
</AccordionPanel>
)}
</>

16
src/components/UI/docs/DocsNav.tsx
View File

@ -1,4 +1,4 @@
import { FC } from 'react';
import { FC, useState } from 'react';
import {
Accordion,
AccordionButton,
@ -17,14 +17,22 @@ interface Props {
}
export const DocsNav: FC<Props> = ({ navLinks }) => {
const OPEN = 0;
const CLOSED = -1;
const [mobileAccordionState, setMobileAccordionState] = useState(CLOSED)
const updateMobileAccordionState = () => {
setMobileAccordionState(mobileAccordionState === OPEN ? CLOSED : OPEN)
}
return (
<Stack w={{ base: '100%', lg: 72 }}>
<Stack display={{ base: 'none', lg: 'block' }}>
<DocsLinks navLinks={navLinks} />
<DocsLinks navLinks={navLinks} updateMobileAccordionState={updateMobileAccordionState} />
</Stack>
<Stack display={{ base: 'block', lg: 'none' }}>
<Accordion allowToggle>
<Accordion allowToggle index={mobileAccordionState} onChange={updateMobileAccordionState}>
<AccordionItem border='none'>
<AccordionButton
display='flex'
@ -49,7 +57,7 @@ export const DocsNav: FC<Props> = ({ navLinks }) => {
<AccordionIcon />
</AccordionButton>
<AccordionPanel p={0}>
<DocsLinks navLinks={navLinks} />
<DocsLinks navLinks={navLinks} updateMobileAccordionState={updateMobileAccordionState} />
</AccordionPanel>
</AccordionItem>
</Accordion>

9
src/components/UI/docs/LinksList.tsx
View File

@ -7,9 +7,10 @@ import { NavLink } from '../../../types';
interface LinksListProps {
links: NavLink[];
updateMobileAccordionState: () => void;
}
export const LinksList: FC<LinksListProps> = ({ links }) => {
export const LinksList: FC<LinksListProps> = ({ links, updateMobileAccordionState }) => {
const router = useRouter();
const { slug } = router.query;
return (
@ -19,7 +20,7 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
return to ? (
<Stack key={id} pb={items ? 6 : 0} _hover={{ background: 'primary', color: 'bg' }} data-group>
<NextLink href={to} passHref key={id}>
<NextLink href={to} passHref key={id} onClick={updateMobileAccordionState}>
<Link textDecoration='none !important'>
<Text
textStyle='docs-nav-links'
@ -41,14 +42,14 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
</Text>
</Link>
</NextLink>
{items && <LinksList links={items} />}
{items && <LinksList links={items} updateMobileAccordionState={updateMobileAccordionState}/>}
</Stack>
) : (
<Stack key={id} pb={6}>
<Text textStyle='docs-nav-links' color={items ? 'primary' : 'body'}>
{id}
</Text>
{items && <LinksList links={items} />}
{items && <LinksList links={items} updateMobileAccordionState={updateMobileAccordionState} />}
</Stack>
);
})}