Make clicking NavItem close the hamburger menu

components/OrganizedContent.tsx

@@ -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>

components/playground.tsx

@@ -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>
     );