refactor(frontend): improve navbar animations

Author: alcercu

frontend/package.json

@@ -15,6 +15,7 @@
     "clsx": "^2.1.1",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.0",
+    "motion": "^12.0.11",
     "next": "^15.1.4",
     "overlayscrollbars": "^2.10.1",
     "overlayscrollbars-react": "^0.5.6",

frontend/src/app/home/components/TrustedBy.tsx

@@ -60,8 +60,8 @@ const PartnersCarousel: React.FC<IPartnersCarousel> = ({ partners }) => (
           <div
             key={name}
             className={clsx(
-              "relative mx-2 inline-block h-16 w-16 rounded-full bg-white lg:mx-10",
-              "hover:cursor-pointer",
+              "relative mx-2 inline-block h-16 w-16 rounded-full bg-white",
+              "hover:cursor-pointer lg:mx-10",
             )}
           >
             <Image

frontend/src/components/Footer.tsx

@@ -21,11 +21,16 @@ const Footer: React.FC = async () => {
   }));
   return (
     <div>
-      <div className={"bg-primary-purple py-16"}>
-        <div className="flex flex-col gap-12 px-6">
+      <div className={"bg-background-dark py-16 md:px-16 xl:px-32"}>
+        <div
+          className={clsx(
+            "grid grid-flow-col grid-cols-2 grid-rows-2 gap-12 px-6",
+            "lg:grid-cols-4 lg:grid-rows-1",
+          )}
+        >
           {sections.map(({ title, links }) => (
             <div key={title} className="flex flex-col gap-4">
-              <h2 className="text-background-2">{title}</h2>
+              <h2 className="text-primary-purple">{title}</h2>
               {links.map(({ name, url }) => (
                 <CustomLink
                   className={clsx(hoverScaleUp, "w-max")}
@@ -38,7 +43,7 @@ const Footer: React.FC = async () => {
             </div>
           ))}
         </div>
-        <hr className="mx-6 mb-6 mt-16 h-0.5 border-t-0 bg-secondary-purple" />
+        <hr className="mx-6 mb-6 mt-16 h-0.5 border-t-0 bg-primary-purple" />
         <div className="flex items-center justify-center gap-8">
           {socials.map(({ name, icon_white: icon, url }) => (
             <CustomLink className={hoverScaleUp} key={name} href={url}>

frontend/src/components/Navbar/AppsDropdownContent/Card.tsx

@@ -7,10 +7,11 @@ import { Solution } from "@/queries/navbar";
 interface ICard {
   solution: Solution;
   variant: "large" | "medium" | "small";
+  onClick?: () => void;
   className?: string;
 }
 
-const Card: React.FC<ICard> = ({ solution, variant, className }) => {
+const Card: React.FC<ICard> = ({ solution, variant, onClick, className }) => {
   return (
     <CustomLink
       href={solution?.url}
@@ -24,6 +25,7 @@ const Card: React.FC<ICard> = ({ solution, variant, className }) => {
           "lg:flex-row": variant === "medium" || variant === "small",
         },
       )}
+      {...{ onClick }}
     >
       <Image
         src={solution?.logo_svg?.url}

frontend/src/components/Navbar/AppsDropdownContent/index.tsx

@@ -7,10 +7,12 @@ import Card from "./Card";
 
 interface AppsDropdownContentProps {
   appsSection: AppsSection;
+  closeFn?: () => void;
 }
 
 const AppsDropdownContent: React.FC<AppsDropdownContentProps> = ({
   appsSection,
+  closeFn,
 }) => (
   <div className="mx-auto py-6 lg:max-w-[1172px] lg:py-12">
     <div
@@ -25,6 +27,7 @@ const AppsDropdownContent: React.FC<AppsDropdownContentProps> = ({
           key={solution.solution_name}
           {...{ solution }}
           variant={getVariant(i)}
+          onClick={closeFn}
         />
       ))}
     </div>

frontend/src/components/Navbar/DesktopNavigation.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 
 import clsx from "clsx";
+import { motion, AnimatePresence } from "motion/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useLockBodyScroll } from "react-use";
@@ -77,28 +78,40 @@ const DesktopNavigation: React.FC<DesktopNavigationProps> = ({
                 />
               </button>
 
-              {openDropdownIndex === index && navLink.is_dropdown ? (
-                <div
-                  className="fixed inset-0 z-40 h-dvh bg-black bg-opacity-50"
-                  onClick={() => setOpenDropdownIndex(null)}
-                >
-                  <div
-                    className={
-                      "animate-slideInFromTop relative mt-20 bg-background-2"
-                    }
-                    onClick={(e) => e.stopPropagation()}
+              <AnimatePresence>
+                {openDropdownIndex === index && navLink.is_dropdown ? (
+                  <motion.div
+                    className={clsx(
+                      "fixed inset-0 top-20 z-40 h-dvh bg-black/50",
+                    )}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    onClick={() => setOpenDropdownIndex(null)}
                   >
-                    {navLink?.title === "Apps" ? (
-                      <AppsDropdownContent {...{ appsSection }} />
-                    ) : null}
-                    {navLink?.title === "Resources" ? (
-                      <ResourcesDropdownContent
-                        {...{ resourceSections, socials }}
-                      />
-                    ) : null}
-                  </div>
-                </div>
-              ) : null}
+                    <motion.div
+                      className="absolute top-0 w-full bg-background-2"
+                      initial={{ translateY: "-5%" }}
+                      animate={{ translateY: 0 }}
+                      exit={{ translateY: "-5%" }}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {navLink?.title === "Apps" ? (
+                        <AppsDropdownContent
+                          {...{ appsSection }}
+                          closeFn={() => setOpenDropdownIndex(null)}
+                        />
+                      ) : null}
+                      {navLink?.title === "Resources" ? (
+                        <ResourcesDropdownContent
+                          {...{ resourceSections, socials }}
+                          closeFn={() => setOpenDropdownIndex(null)}
+                        />
+                      ) : null}
+                    </motion.div>
+                  </motion.div>
+                ) : null}
+              </AnimatePresence>
             </>
           )}
         </div>

frontend/src/components/Navbar/HamburgerButton.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import React from "react";
+
+import clsx from "clsx";
+import { motion, Variants } from "motion/react";
+
+interface IHamburgerButton {
+  className?: string;
+  isOpen: boolean;
+}
+
+const variants: Variants = {
+  topClose: {
+    top: [null, "50%", "50%"],
+    translateY: [null, "-50%", "-50%"],
+    rotate: [null, 0, "45deg"],
+    transition: { duration: 0.3 },
+  },
+  botClose: {
+    bottom: [null, "50%", "50%"],
+    translateY: [null, "50%", "50%"],
+    rotate: [null, 0, "-45deg"],
+    transition: { duration: 0.3 },
+  },
+  topOpen: {
+    top: ["50%", "50%", 0],
+    translateY: ["-50%", 0, 0],
+    rotate: ["45deg", "0deg", "0deg"],
+    transition: { duration: 0.3 },
+  },
+  midOpen: {
+    bottom: ["50%", "50%", "50%"],
+    translateY: ["50%", "50%", "50%"],
+    rotate: ["-45deg", "0deg", "0deg"],
+    transition: { duration: 0.3 },
+  },
+  botOpen: {
+    bottom: ["50%", "50%", 0],
+    translateY: ["50%", 0, 0],
+    rotate: ["-45deg", "0deg", "0deg"],
+    transition: { duration: 0.3 },
+  },
+};
+
+const HamburgerButton: React.FC<IHamburgerButton> = ({ className, isOpen }) => {
+  return (
+    <div className={clsx("relative", className)}>
+      <motion.div
+        {...{ variants }}
+        animate={isOpen ? "topClose" : "topOpen"}
+        initial={false}
+        className={clsx("absolute h-1 w-full bg-white transition")}
+      />
+      <motion.div
+        {...{ variants }}
+        animate={isOpen ? "botClose" : "midOpen"}
+        initial={false}
+        className={clsx("absolute h-1 w-full bg-white transition")}
+      />
+      <motion.div
+        {...{ variants }}
+        animate={isOpen ? "botClose" : "botOpen"}
+        initial={false}
+        className={clsx("absolute h-1 w-full bg-white transition")}
+      />
+    </div>
+  );
+};
+
+export default HamburgerButton;

frontend/src/components/Navbar/MobileMenu.tsx

@@ -26,6 +26,7 @@ interface IMobileMenu {
   resourceSections: ResourceSection[];
   socials: Social[];
   navbarButton: NavbarButton;
+  closeFn: () => void;
   className?: string;
 }
 
@@ -36,6 +37,7 @@ const MobileMenu: React.FC<IMobileMenu> = ({
   resourceSections,
   socials,
   navbarButton,
+  closeFn,
   className,
 }) => {
   const [openDropdownIndex, setOpenDropdownIndex] = useState<number | null>(
@@ -50,7 +52,7 @@ const MobileMenu: React.FC<IMobileMenu> = ({
     <div
       className={clsx(
         className,
-        "fixed right-0 top-20 z-50 w-screen overflow-y-auto rounded-b-lg",
+        "z-50 w-screen overflow-y-auto rounded-b-lg",
         "bg-background-2 p-6 shadow-lg",
       )}
     >
@@ -92,10 +94,10 @@ const MobileMenu: React.FC<IMobileMenu> = ({
                   )}
                 >
                   {navLink?.title === "Apps" ? (
-                    <AppsDropdownContent {...{ appsSection }} />
+                    <AppsDropdownContent {...{ appsSection, closeFn }} />
                   ) : navLink?.title === "Resources" ? (
                     <ResourcesDropdownContent
-                      {...{ resourceSections, socials }}
+                      {...{ resourceSections, socials, closeFn }}
                     />
                   ) : null}
                 </div>

frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx

@@ -7,11 +7,13 @@ import { ResourceSection, Social } from "@/queries/navbar";
 interface ResourcesDropdownContentProps {
   resourceSections: ResourceSection[];
   socials: Social[];
+  closeFn: () => void;
 }
 
 const ResourcesDropdownContent: React.FC<ResourcesDropdownContentProps> = ({
   resourceSections,
   socials,
+  closeFn,
 }) => {
   return (
     <div className="flex flex-col items-center bg-background-2">
@@ -40,7 +42,9 @@ const ResourcesDropdownContent: React.FC<ResourcesDropdownContentProps> = ({
                     "w-max transform transition duration-75 hover:scale-[1.01]"
                   }
                 >
-                  <CustomLink href={link.url}>{link.name}</CustomLink>
+                  <CustomLink href={link.url} onClick={closeFn}>
+                    {link.name}
+                  </CustomLink>
                 </li>
               ))}
             </ul>
@@ -58,6 +62,7 @@ const ResourcesDropdownContent: React.FC<ResourcesDropdownContentProps> = ({
             key={social.name}
             href={social.url}
             className={"transform transition duration-75 hover:scale-[1.10]"}
+            onClick={closeFn}
           >
             <Image
               src={social.icon.url}