refactor(frontend): improve accordion transition and mobile view

Author: alcercu

frontend/src/components/IntegrateSection/index.tsx

@@ -23,12 +23,15 @@ const IntegrateSection: React.FC = async () => {
       <p className="text-base text-secondary-text lg:mb-4 lg:text-lg">
         {integrateData.description}
       </p>
-      <AppsDropdownContent appsSection={integrateData.appsSection} />
+      <AppsDropdownContent
+        appsSection={integrateData.appsSection}
+        className="pt-8 lg:pt-16"
+      />
       <LearnMore
         background={integrateData.getInTouchSection.background}
         title={integrateData.header}
         button={integrateData.arrowLink}
-        className="!mt-16 lg:!mt-4"
+        className="!mt-12 lg:!mt-16"
       />
       <ExternalLink
         className="mt-12 flex-wrap justify-center text-center lg:mt-16"

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

@@ -8,13 +8,15 @@ import Card from "./Card";
 interface AppsDropdownContentProps {
   appsSection: AppsSection;
   closeFn?: () => void;
+  className?: string;
 }
 
 const AppsDropdownContent: React.FC<AppsDropdownContentProps> = ({
   appsSection,
   closeFn,
+  className,
 }) => (
-  <div className="mx-auto py-6 lg:max-w-[1172px] lg:py-12">
+  <div className={clsx(className, "mx-auto lg:max-w-[1172px]")}>
     <div
       className={clsx(
         "grid w-full grid-cols-1 gap-3 bg-background-2 lg:grid-flow-col",

frontend/src/components/Navbar/DesktopNavigation.tsx

@@ -83,22 +83,27 @@ const DesktopNavigation: React.FC<DesktopNavigationProps> = ({
                 {openDropdownIndex === index && navLink.is_dropdown ? (
                   <motion.div
                     className={clsx(
-                      "fixed inset-0 top-20 z-40 h-dvh bg-black/50",
+                      "fixed inset-0 top-20 z-40 h-[calc(100dvh-5rem)]",
+                      "bg-black/50",
                     )}
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
                     onClick={() => setOpenDropdownIndex(null)}
                   >
                     <motion.div
-                      className="absolute top-0 w-full bg-background-2"
+                      className={clsx(
+                        "absolute top-0 max-h-full w-full overflow-y-auto",
+                        "bg-background-2",
+                      )}
                       initial={{ translateY: "-5%" }}
                       animate={{ translateY: 0 }}
                       exit={{ translateY: "-5%" }}
                       onClick={(e) => e.stopPropagation()}
                     >
                       {navLink?.title === "Apps" ? (
                         <AppsDropdownContent
+                          className="px-6 py-12"
                           {...{ appsSection }}
                           closeFn={() => setOpenDropdownIndex(null)}
                         />

frontend/src/components/Navbar/MobileMenu.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 DownArrowIcon from "@/assets/svgs/icons/down-arrow.svg";
@@ -66,6 +67,7 @@ const MobileMenu: React.FC<IMobileMenu> = ({
                   "block text-white",
                   pathname === `/${navLink.path_name}` && "font-bold",
                 )}
+                onClick={closeFn}
               >
                 {navLink.title}
               </CustomLink>
@@ -86,21 +88,27 @@ const MobileMenu: React.FC<IMobileMenu> = ({
                     height={12}
                   />
                 </button>
-                <div
-                  className={clsx(
-                    "transition-accordionHeight h-auto overflow-y-auto",
-                    "pl-2 pr-4",
-                    openDropdownIndex === index && "accordionOpen",
-                  )}
-                >
-                  {navLink?.title === "Apps" ? (
-                    <AppsDropdownContent {...{ appsSection, closeFn }} />
-                  ) : navLink?.title === "Resources" ? (
-                    <ResourcesDropdownContent
-                      {...{ resourceSections, socials, closeFn }}
-                    />
+                <AnimatePresence>
+                  {openDropdownIndex === index ? (
+                    <motion.div
+                      initial={{ height: 0 }}
+                      animate={{ height: "auto" }}
+                      exit={{ height: 0 }}
+                      className="mt-2 max-h-[30dvh] overflow-y-scroll pl-2 pr-4"
+                    >
+                      {navLink?.title === "Apps" ? (
+                        <AppsDropdownContent
+                          {...{ appsSection, closeFn }}
+                          className="mt-2"
+                        />
+                      ) : navLink?.title === "Resources" ? (
+                        <ResourcesDropdownContent
+                          {...{ resourceSections, socials, closeFn }}
+                        />
+                      ) : null}
+                    </motion.div>
                   ) : null}
-                </div>
+                </AnimatePresence>
               </>
             )}
           </div>

frontend/src/components/Navbar/index.tsx

@@ -77,14 +77,16 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {
       <AnimatePresence>
         {menuOpen ? (
           <motion.div
-            className={clsx("fixed inset-0 top-20 z-40 h-dvh bg-black/50")}
+            className={clsx(
+              "fixed inset-0 top-20 z-40 h-[calc(100dvh-5rem)] bg-black/50",
+            )}
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             onClick={() => toggleMenuOpen(false)}
           >
             <motion.div
-              className="absolute top-0"
+              className="absolute bottom-0 top-0"
               initial={{ right: "-100%" }}
               animate={{ right: 0 }}
               exit={{ right: "-100%" }}
@@ -99,6 +101,7 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {
                   socials,
                   navbarButton,
                 }}
+                className="h-full overflow-y-auto md:h-auto"
                 closeFn={() => toggleMenuOpen(false)}
               />
             </motion.div>

frontend/src/styles/globals.css

@@ -60,19 +60,6 @@ body {
   }
 }
 
-.transition-accordionHeight {
-  max-height: 0;
-  transition:
-    max-height 0.3s ease-out,
-    opacity 0.3s ease-out;
-  opacity: 0;
-}
-
-.accordionOpen {
-  max-height: 332px;
-  opacity: 1;
-}
-
 .border-gradient-purple-blue {
   position: relative;
   border-radius: 9999px;