Merge pull request #27 from dephraiim/doc-187

Close panel on when user clicks on a nav link

apps/web/components/navigation.tsx

@@ -39,8 +39,13 @@ const navigation = [
     icon: WrenchIcon,
   },
 ];
+
 const userNavigation = [
-  { name: "Your Profile", href: "/settings/profile", icon: UserCircleIcon },
+  {
+    name: "Your Profile",
+    href: "/settings/profile",
+    icon: UserCircleIcon,
+  },
   {
     name: "Sign out",
     href: "",
@@ -101,7 +106,7 @@ export default function TopNavigation() {
   return (
     <>
       <Disclosure as="nav" className="border-b border-gray-200 bg-white">
-        {({ open }) => (
+        {({ open, close }) => (
           <>
             <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
               <div className="flex h-16 justify-between">
@@ -217,6 +222,9 @@ export default function TopNavigation() {
                       "block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
                     )}
                     aria-current={item.current ? "page" : undefined}
+                    onClick={() => {
+                      close();
+                    }}
                   >
                     {item.name}
                   </Link>
@@ -241,7 +249,13 @@ export default function TopNavigation() {
                   {userNavigation.map((item) => (
                     <Link
                       key={item.name}
-                      onClick={item.click}
+                      onClick={
+                        item.href.includes("/settings/profile")
+                          ? () => {
+                              close();
+                            }
+                          : item.click
+                      }
                       href={item.href}
                       className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
                     >