Feature/sc 634/add mobile nav js

components/MobileNavbar.jsx

@@ -1,76 +1,125 @@
 import MobileNavigationItem from "./MobileNavigationItem";
+import { signIn, signOut } from "next-auth/react";
+import Link from "next/link";
+
 export default function MobileNavbar({
   entityTitle,
   navigationLinks,
   navigationHrefs,
   cta,
   session,
+  mobileMenuIsClicked,
+  setMobileMenuIsClicked,
 }) {
   return (
-    <div className="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
-      <div className="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25" />
-      <nav className="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
-        <div className="flex items-center mb-12">
-          <a className="mr-auto text-2xl font-semibold leading-none" href="#">
-            <img
-              className="h-8"
-              src="/logos/plain-indigo.svg"
-              alt={`${entityTitle} logo`}
-              width="auto"
-            />
-          </a>
-          <button className="navbar-close">
-            <svg
-              className="h-6 w-6 cursor-pointer hover:text-indigo-500"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
-        <div>
-          <ul>
-            {navigationLinks?.map((navName, index) => {
-              try {
-                const href = navigationHrefs[index];
-                return (
-                  <li className="mb-1" key={navName + `${index}`}>
-                    <MobileNavigationItem href={href}>
-                      {navName}
-                    </MobileNavigationItem>
-                  </li>
-                );
-              } catch {
-                console.error(
-                  `An error occured while loading the mobile navigation component. Please file a bug, thanks!`
-                );
-                return null;
-              }
-            })}
-          </ul>
-        </div>
-        <div className="mt-auto">
-          <div className="pt-6">
-            <a
-              className="block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-              href="#"
-            >
-              {cta}
-            </a>
-          </div>
-          <p className="mt-6 mb-4 text-sm text-center text-gray-500">
-            <span>{`© ${entityTitle} 2022 All rights reserved.`}</span>
-          </p>
-        </div>
-      </nav>
+    <div
+      className={`transition duration-200 lg:hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm ${
+        !mobileMenuIsClicked ? "z-50" : "-z-50"
+      }`}
+    >
+      {" "}
+      {!mobileMenuIsClicked ? (
+        <>
+          <div className="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25" />
+
+          <nav className="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
+            <div className="flex items-center mb-12">
+              <Link href="/">
+                <a
+                  className="mr-auto text-2xl font-semibold leading-none"
+                  onClick={() => setMobileMenuIsClicked(!mobileMenuIsClicked)}
+                >
+                  <img
+                    className="h-8"
+                    src="/logos/plain-indigo.svg"
+                    alt={`${entityTitle} logo`}
+                    width="auto"
+                  />
+                </a>
+              </Link>
+              <button
+                className="navbar-close"
+                onClick={() => setMobileMenuIsClicked(!mobileMenuIsClicked)}
+              >
+                <svg
+                  className="h-6 w-6 cursor-pointer hover:text-indigo-500"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div>
+              <ul>
+                {navigationLinks?.map((navName, index) => {
+                  try {
+                    const href = navigationHrefs[index];
+                    return (
+                      <li className="mb-1" key={navName + `${index}`}>
+                        <MobileNavigationItem
+                          href={href}
+                          setMobileMenuIsClicked={setMobileMenuIsClicked}
+                          mobileMenuIsClicked={mobileMenuIsClicked}
+                        >
+                          {navName}
+                        </MobileNavigationItem>
+                      </li>
+                    );
+                  } catch {
+                    console.error(
+                      `An error occured while loading the mobile navigation component. Please file a bug, thanks!`
+                    );
+                    return null;
+                  }
+                })}
+              </ul>
+            </div>
+            <div className="mt-auto">
+              <div className="pt-6">
+                <a
+                  className="block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+                  href="#"
+                  onClick={() => setMobileMenuIsClicked(!mobileMenuIsClicked)}
+                >
+                  {cta}
+                </a>
+                {!session ? (
+                  <button
+                    className="block w-full lg:hidden mt-1 px-5 py-3 text-sm font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+                    onClick={() =>
+                      signIn() && setMobileMenuIsClicked(!mobileMenuIsClicked)
+                    }
+                  >
+                    Log in
+                  </button>
+                ) : (
+                  <button
+                    className="block w-full lg:hidden mt-1 px-5 py-3 text-sm font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+                    onClick={() =>
+                      signOut() && setMobileMenuIsClicked(!mobileMenuIsClicked)
+                    }
+                  >
+                    Log out
+                  </button>
+                )}
+              </div>
+              <p className="mt-6 mb-4 text-sm text-center text-gray-500">
+                <span>{`© ${entityTitle} 2022 All rights reserved.`}</span>
+              </p>
+            </div>
+          </nav>
+        </>
+      ) : (
+        <div className="transition duration-200" />
+      )}
     </div>
   );
 }

components/MobileNavigationItem.jsx

@@ -1,13 +1,17 @@
 import Link from "next/link";
-export default function MobileNavigationItem({ href, children }) {
+export default function MobileNavigationItem({
+  href,
+  mobileMenuIsClicked,
+  setMobileMenuIsClicked,
+  children,
+}) {
   return (
-    <Link href={href}>
-      <a
-        className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
-        href={href}
-      >
-        {children}
-      </a>
-    </Link>
+    <a
+      className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
+      href={href}
+      onClick={() => setMobileMenuIsClicked(!mobileMenuIsClicked)}
+    >
+      <span>{children}</span>
+    </a>
   );
 }

components/Navbar.jsx

@@ -8,6 +8,8 @@ export default function Navbar({
   cta,
   logoSrc,
   session,
+  mobileMenuIsClicked,
+  setMobileMenuIsClicked,
 }) {
   const [first, last] = [entityTitle?.slice(0, 1), entityTitle?.slice(1)];
 
@@ -32,9 +34,12 @@ export default function Navbar({
         )}
       </a>
       <div className="lg:hidden">
-        <button className="block navbar-burger text-indigo-500 hover:text-indigo-500 focus:outline-none">
+        <button
+          className="block navbar-burger text-indigo-600 hover:text-indigo-800 focus:outline-none"
+          onClick={() => setMobileMenuIsClicked(!mobileMenuIsClicked)}
+        >
           <svg
-            className="h-4 w-4"
+            className="h-8 w-8"
             fill="currentColor "
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"

components/Sections/NavigationHero.jsx

@@ -9,6 +9,8 @@ export default function NavigationHero({
   cta,
   logoSrc,
   session,
+  mobileMenuIsClicked,
+  setMobileMenuIsClicked,
 }) {
   return (
     <section id="navigation-hero">
@@ -20,6 +22,8 @@ export default function NavigationHero({
           cta={cta}
           logoSrc={logoSrc}
           session={session}
+          mobileMenuIsClicked={mobileMenuIsClicked}
+          setMobileMenuIsClicked={setMobileMenuIsClicked}
         />
         <Hero
           heading="We're a different kind of online business."
@@ -30,13 +34,17 @@ export default function NavigationHero({
           session={session}
         />
       </div>
-      <MobileNavbar
-        entityTitle={entityTitle}
-        navigationLinks={navigationLinks}
-        navigationHrefs={navigationHrefs}
-        cta={cta}
-        session={session}
-      />
+      <div className="transition ease-in-out duration-150">
+        <MobileNavbar
+          entityTitle={entityTitle}
+          navigationLinks={navigationLinks}
+          navigationHrefs={navigationHrefs}
+          cta={cta}
+          session={session}
+          mobileMenuIsClicked={mobileMenuIsClicked}
+          setMobileMenuIsClicked={setMobileMenuIsClicked}
+        />
+      </div>
     </section>
   );
 }

pages/index.jsx

@@ -39,7 +39,7 @@ import {
 } from "../cms.data";
 
 export default function Funded() {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [mobileMenuIsClicked, setMobileMenuIsClicked] = useState(true);
   const [state, setState] = useState(null);
   const [decoded, setDecoded] = useState(null);
 
@@ -159,6 +159,8 @@ export default function Funded() {
           cta={cta}
           logoSrc={logoSrc}
           session={session}
+          mobileMenuIsClicked={mobileMenuIsClicked}
+          setMobileMenuIsClicked={setMobileMenuIsClicked}
         />
         <Stats1 data={stats1Data} />
         <WhyInvest {...whyInvestContent} />