Make clicking NavItem close the hamburger menu
continuous-integration/drone/push Build is passing Details

This commit is contained in:
William Tran 2021-07-26 22:20:01 -04:00
parent 217b62e69a
commit 7979c09d00
2 changed files with 19 additions and 3 deletions

View File

@ -12,6 +12,7 @@ export interface LinkProps {
className?: string;
id: string;
children: ReactNode;
setMobileNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
}
type Link = ComponentType<LinkProps>;
@ -71,6 +72,7 @@ export function OrganizedContent(props: Props) {
currentIndex={currentIndex}
link={props.link}
pageTitle={props.pageTitle}
setMobileNavOpen={setMobileNavOpen}
/>
</div>
</div>
@ -143,9 +145,16 @@ interface NavProps {
currentIndex: number;
link: Link;
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 (
<div className={styles.nav}>
<h1 className={styles.mobileNavTitle}>{pageTitle}</h1>
@ -165,6 +174,7 @@ function Nav({ sections, currentIndex, link: Link, pageTitle }: NavProps) {
className={classNames.join(" ")}
id={section.id}
key={section.id}
setMobileNavOpen={setMobileNavOpen}
>
<span className={styles.marker} />
<div>{section.title}</div>

View File

@ -205,9 +205,15 @@ export function OrganizedContentDemo() {
const [id, setId] = useState(sections[0].id);
function FakeLink({ className, id, children }: LinkProps) {
function FakeLink({ className, id, children, setMobileNavOpen }: LinkProps) {
return (
<div className={className} onClick={() => setId(id)}>
<div
className={className}
onClick={() => {
if (setMobileNavOpen) setMobileNavOpen(false);
setId(id);
}}
>
{children}
</div>
);