From e0d557a2389a5c9bf1bcd9356bed9dd69e617f47 Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Wed, 5 Jun 2024 16:38:40 -0700
Subject: [PATCH] feat: close mobile nav onclick (#123)

* feat: close mobile nav onclick

* fix: wrap func in callback
---
 src/app/components/Nav/Nav.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/components/Nav/Nav.js b/src/app/components/Nav/Nav.js
index 3b142567..fb579c75 100644
--- a/src/app/components/Nav/Nav.js
+++ b/src/app/components/Nav/Nav.js
@@ -1,4 +1,4 @@
-import { useState, memo } from "react";
+import { useState, memo, useCallback } from "react";
 import { Link, useLocation } from "react-router-dom";
 
 import { Text } from "app/components";
@@ -10,9 +10,11 @@ import "./Nav.scss";
 const Nav = () => {
 	const { pathname } = useLocation();
 	const [mobileExpand, setMobileExpand] = useState(false);
-	const toggleMobileExpand = () => {
+
+	const toggleMobileExpand = useCallback(() => {
 		setMobileExpand(!mobileExpand);
-	};
+	}, [mobileExpand]);
+
 	if (pathname === "/designathon22/" || pathname === "/designathon22")
 		return <></>;
 
@@ -122,13 +124,19 @@ const Nav = () => {
 							{ label: "Contact", url: "/contact" },
 							{ label: "Houses", url: "/houses" },
 						].map(({ label, url }) => (
-							<Link key={url} to={url} className="item center">
+							<Link
+								key={url}
+								to={url}
+								className="item center"
+								onClick={toggleMobileExpand}
+							>
 								<Text size="L">{label}</Text>
 							</Link>
 						))}
 						<Link
 							to="/join"
 							className="item center button fill sky"
+							onClick={toggleMobileExpand}
 						>
 							<Text size="L">Join</Text>
 						</Link>