Make clicking NavItem close the hamburger menu
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
217b62e69a
commit
7979c09d00
|
@ -12,6 +12,7 @@ export interface LinkProps {
|
||||||
className?: string;
|
className?: string;
|
||||||
id: string;
|
id: string;
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
|
setMobileNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
type Link = ComponentType<LinkProps>;
|
type Link = ComponentType<LinkProps>;
|
||||||
|
@ -71,6 +72,7 @@ export function OrganizedContent(props: Props) {
|
||||||
currentIndex={currentIndex}
|
currentIndex={currentIndex}
|
||||||
link={props.link}
|
link={props.link}
|
||||||
pageTitle={props.pageTitle}
|
pageTitle={props.pageTitle}
|
||||||
|
setMobileNavOpen={setMobileNavOpen}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -143,9 +145,16 @@ interface NavProps {
|
||||||
currentIndex: number;
|
currentIndex: number;
|
||||||
link: Link;
|
link: Link;
|
||||||
pageTitle: string;
|
pageTitle: string;
|
||||||
|
setMobileNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
function Nav({ sections, currentIndex, link: Link, pageTitle }: NavProps) {
|
function Nav({
|
||||||
|
sections,
|
||||||
|
currentIndex,
|
||||||
|
link: Link,
|
||||||
|
pageTitle,
|
||||||
|
setMobileNavOpen,
|
||||||
|
}: NavProps) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.nav}>
|
<div className={styles.nav}>
|
||||||
<h1 className={styles.mobileNavTitle}>{pageTitle}</h1>
|
<h1 className={styles.mobileNavTitle}>{pageTitle}</h1>
|
||||||
|
@ -165,6 +174,7 @@ function Nav({ sections, currentIndex, link: Link, pageTitle }: NavProps) {
|
||||||
className={classNames.join(" ")}
|
className={classNames.join(" ")}
|
||||||
id={section.id}
|
id={section.id}
|
||||||
key={section.id}
|
key={section.id}
|
||||||
|
setMobileNavOpen={setMobileNavOpen}
|
||||||
>
|
>
|
||||||
<span className={styles.marker} />
|
<span className={styles.marker} />
|
||||||
<div>{section.title}</div>
|
<div>{section.title}</div>
|
||||||
|
|
|
@ -205,9 +205,15 @@ export function OrganizedContentDemo() {
|
||||||
|
|
||||||
const [id, setId] = useState(sections[0].id);
|
const [id, setId] = useState(sections[0].id);
|
||||||
|
|
||||||
function FakeLink({ className, id, children }: LinkProps) {
|
function FakeLink({ className, id, children, setMobileNavOpen }: LinkProps) {
|
||||||
return (
|
return (
|
||||||
<div className={className} onClick={() => setId(id)}>
|
<div
|
||||||
|
className={className}
|
||||||
|
onClick={() => {
|
||||||
|
if (setMobileNavOpen) setMobileNavOpen(false);
|
||||||
|
setId(id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue