From 5cd551d259077268ec4dab39007d1fb9620c2449 Mon Sep 17 00:00:00 2001
From: Beau Findlay <me@beaufindlay.com>
Date: Tue, 30 Apr 2024 20:58:02 +0100
Subject: [PATCH] Close mobile navbar when links are clicked

---
 src/Client/src/components/NavBar.tsx  | 8 +++++++-
 src/Client/src/components/NavLink.tsx | 4 +++-
 src/Client/src/pages/WorkPage.tsx     | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/Client/src/components/NavBar.tsx b/src/Client/src/components/NavBar.tsx
index b31b964..749b737 100644
--- a/src/Client/src/components/NavBar.tsx
+++ b/src/Client/src/components/NavBar.tsx
@@ -45,7 +45,11 @@ export default function NavBar() {
         <div className="fixed inset-0 z-10" />
         <Dialog.Panel className="fixed inset-y-0 right-0 z-10 bg-black w-full overflow-y-auto px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 text-white sm:border-l-2">
           <div className="flex items-center justify-between">
-            <Link to="/" className="-m-1.5 p-1.5">
+            <Link
+              to="/"
+              className="-m-1.5 p-1.5"
+              onClick={() => setMobileMenuOpen(false)}
+            >
               <span className="sr-only">Beau Findlay</span>
               <img className="h-16 w-auto" src={logo} alt="Logo" />
             </Link>
@@ -64,12 +68,14 @@ export default function NavBar() {
                 <NavLink
                   to="/work"
                   className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7"
+                  onClick={() => setMobileMenuOpen(false)}
                 >
                   Work
                 </NavLink>
                 <NavLink
                   to="/about"
                   className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7"
+                  onClick={() => setMobileMenuOpen(false)}
                 >
                   This App
                 </NavLink>
diff --git a/src/Client/src/components/NavLink.tsx b/src/Client/src/components/NavLink.tsx
index ae04782..5a7acdd 100644
--- a/src/Client/src/components/NavLink.tsx
+++ b/src/Client/src/components/NavLink.tsx
@@ -4,15 +4,17 @@ interface Props {
   children: string;
   to: string;
   className?: string | null;
+  onClick?: () => void;
 }
 
-export default function NavLink({ children, to, className }: Props) {
+export default function NavLink({ children, to, className, onClick }: Props) {
   const defaultStyles = "text-base font-semibold leading-6 hover:text-gray-300";
   const styles = className ? className : defaultStyles;
 
   return (
     <ReactNavLink
       to={to}
+      onClick={onClick}
       className={({ isActive }) =>
         isActive ? `${styles} underline underline-offset-4` : styles
       }
diff --git a/src/Client/src/pages/WorkPage.tsx b/src/Client/src/pages/WorkPage.tsx
index ab65dbc..b5e3362 100644
--- a/src/Client/src/pages/WorkPage.tsx
+++ b/src/Client/src/pages/WorkPage.tsx
@@ -6,7 +6,7 @@ export default function WorkPage() {
   return (
     <>
       <Title className="text-center mb-4">Work</Title>
-      <p className="text-center text-2xl font-semibold mb-10">
+      <p className="text-center text-2xl font-semibold mb-12">
         Freelance Software Engineer since 2018
       </p>
       <WorkTimeline />