fix:bug navbar re-render (#4)

Co-authored-by: andrianfaa <andrianfadhilla@gmail.com>
devixid · Aug 17, 2024 · 7f7b622 · 7f7b622
1 parent 623d098
commit 7f7b622
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 77 deletions.
diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx
@@ -19,9 +19,9 @@ export const metadata: Metadata = {
   keywords: ["devix", "devixid", "devix_id", "home"],
 };
 
-export default function Page() {
-  let headingAnimationDelay = 0;
+let headingAnimationDelay = 0;
 
+export default function Page() {
   return (
     <section
       className={cn("mx-auto mt-44 flex flex-col items-center justify-center")}
@@ -55,7 +55,7 @@ export default function Page() {
                   delay: headingAnimationDelay,
                 }}
                 key={loopKey}
-                className={cn("min-w-unit-5 md:inline-block")}
+                className={cn("min-w-unit-5")}
               >
                 {letter}
               </Text.span>
@@ -85,7 +85,7 @@ export default function Page() {
                   delay: headingAnimationDelay,
                 }}
                 key={loopKey}
-                className={cn("min-w-unit-5 md:inline-block")}
+                className={cn("min-w-unit-5")}
               >
                 {letter}
               </Text.span>
@@ -128,6 +128,7 @@ export default function Page() {
           );
         })}
       </div>
+
       <div className={cn("mb-36 mt-10")}>
         <Text.span
           resetStyle

diff --git a/apps/frontend/src/components/atoms/svg/ScrollDown.tsx b/apps/frontend/src/components/atoms/svg/ScrollDown.tsx
@@ -2,10 +2,13 @@
 
 import { type SVGMotionProps, motion } from "framer-motion";
 
-interface AnimatedSVGProps extends SVGMotionProps<SVGSVGElement> {}
+interface AnimatedSVGProps extends SVGMotionProps<SVGSVGElement> {
+  lineFill: string;
+}
 
 export default function ScrollDownSVG({
   fill = "none",
+  lineFill = "none",
   height = "286",
   width = "55",
   ...props
@@ -21,7 +24,7 @@ export default function ScrollDownSVG({
     >
       <motion.path
         d="M47.8636 149.5L47.1649 148.785L47.1649 148.785L47.8636 149.5ZM46.3636 286L52.9851 276.54L41.4819 275.536L46.3636 286ZM25.4157 0.818449C32.5733 22.125 42.2343 55.1298 47.9566 84.8888C50.8185 99.7727 52.6872 113.805 52.7761 125.139C52.8206 130.807 52.4194 135.764 51.4914 139.8C50.5604 143.849 49.1211 146.874 47.1649 148.785L48.5623 150.215C50.9061 147.926 52.4678 144.478 53.4405 140.248C54.4161 136.005 54.8212 130.878 54.7761 125.123C54.6858 113.612 52.792 99.444 49.9206 84.5112C44.1762 54.6369 34.4872 21.5416 27.3115 0.181551L25.4157 0.818449ZM47.1649 148.785C36.8764 158.834 22.6823 156.647 12.8249 150.586C7.90131 147.558 4.22659 143.654 2.73281 140.047C1.99066 138.255 1.8106 136.599 2.20048 135.168C2.58523 133.756 3.55896 132.438 5.37413 131.36L4.35306 129.64C2.16823 130.937 0.813835 132.65 0.270851 134.642C-0.267 136.616 0.0255916 138.737 0.885004 140.812C2.59435 144.94 6.63838 149.129 11.7773 152.289C22.0449 158.603 37.3508 161.166 48.5623 150.215L47.1649 148.785ZM5.37413 131.36C8.88925 129.273 13.1252 129.931 17.7315 133.393C22.3452 136.861 27.1355 143.028 31.4745 151.458C40.1419 168.297 46.8636 193.886 46.8636 224H48.8636C48.8636 193.614 42.0853 167.703 33.2527 150.542C28.8417 141.972 23.8819 135.514 18.9332 131.794C13.977 128.069 8.83794 126.977 4.35306 129.64L5.37413 131.36ZM46.8636 224C46.8636 252.083 46.5268 268.265 46.1474 276.991L48.1455 277.078C48.5268 268.309 48.8636 252.092 48.8636 224H46.8636Z"
-        fill="#000"
+        fill={lineFill}
         initial={{ pathLength: 0 }}
         whileInView={{ pathLength: 1 }}
         transition={{ duration: 1 }}

diff --git a/apps/frontend/src/components/molecules/Header.tsx b/apps/frontend/src/components/molecules/Header.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { motion } from "framer-motion";
-import { memo, useState } from "react";
 import { Heading, Text } from "@/components/atoms";
-import { cn } from "@/utils";
 import { useWindow } from "@/hooks";
+import { cn } from "@/utils";
+import { motion } from "framer-motion";
+import { memo, useState } from "react";
 import Navbar from "./Navbar";
 
 function Header() {
@@ -26,6 +26,7 @@ function Header() {
         isNavbarOpen={isNavbarOpen}
         setIsNavbarOpen={setIsNavbarOpen}
       />
+
       <Heading.h4
         className={cn(
           `${

diff --git a/apps/frontend/src/components/molecules/Navbar.tsx b/apps/frontend/src/components/molecules/Navbar.tsx
@@ -1,33 +1,29 @@
 "use client";
 
+import { Text } from "@/components/atoms";
+import { NavMenu } from "@/constants";
+import { useWindow } from "@/hooks";
 import { NavbarProps } from "@/interface";
 import { cn } from "@/utils";
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
 import { memo } from "react";
-import { Text } from "@/components/atoms";
 import { HiBars2 } from "react-icons/hi2";
-import { NavMenu } from "@/constants";
-import Image from "next/image";
-import { useWindow } from "@/hooks";
 
 function Navbar({ isNavbarOpen, setIsNavbarOpen, ...props }: NavbarProps) {
   const { scrollPosition } = useWindow();
-  let navbarDelayAnimation: number = 0;
-  let navbarXPosition: number = 0;
 
   return (
     <motion.nav
       {...props}
       className={cn(
-        `${
-          scrollPosition.y >= 917 && scrollPosition.y <= 1620
-            ? "bg-white"
-            : "bg-black-1"
-        }`,
-        "flex w-full flex-col items-center justify-between px-5 py-2 md:w-1/4 md:rounded-br-[25px]",
+        scrollPosition.y >= 917 && scrollPosition.y <= 1620
+          ? "bg-white"
+          : "bg-black-1",
+        "flex w-full flex-col overflow-hidden px-5 py-2 md:w-[450px] md:rounded-br-[25px]",
       )}
       initial={{ height: "64px" }}
-      animate={{ height: isNavbarOpen ? "50%" : "64px" }}
+      animate={{ height: isNavbarOpen ? "339px" : "64px" }}
       transition={{ duration: 0.3 }}
     >
       <div className="flex w-full items-center justify-between">
@@ -42,6 +38,7 @@ function Navbar({ isNavbarOpen, setIsNavbarOpen, ...props }: NavbarProps) {
           width={40}
           quality={100}
         />
+
         <button
           type="button"
           aria-label="menu-button"
@@ -63,42 +60,56 @@ function Navbar({ isNavbarOpen, setIsNavbarOpen, ...props }: NavbarProps) {
           <Text.span className="sr-only">Navbar menu</Text.span>
         </button>
       </div>
+
       <motion.ul
         className={cn(
-          ` ${
-            isNavbarOpen
-              ? "opacity-1 top-16 rounded-br-lg"
-              : "-top-60 rounded-none opacity-0"
-          } flex h-[40vh] w-full flex-col items-center justify-evenly transition-all duration-1000`,
+          isNavbarOpen ? "opacity-1 rounded-br-lg" : "rounded-none opacity-0",
+          "flex min-h-[250px] w-full flex-col items-center justify-center gap-8 transition-all duration-1000",
         )}
       >
         {NavMenu.map((menu, index) => {
-          if (index > 0) {
-            navbarDelayAnimation += 0.1;
-            navbarXPosition += -10;
-          }
+          const key = `${index}`;
+          const navbarXPosition = Number.parseInt(`${(index + 1) * -10}`, 10);
+          const navbarDelayAnimation =
+            Number.parseFloat(`0.${index + 1}`) - 0.05;
 
           return (
-            <motion.li
-              key={Math.floor(Math.random() * 230498234)}
-              className={cn(
-                `${scrollPosition.y >= 917 ? "text-black" : "text-white"}`,
+            <AnimatePresence key={key}>
+              {isNavbarOpen && (
+                <motion.li
+                  className={cn(
+                    scrollPosition.y >= 917 && scrollPosition.y <= 1620
+                      ? "text-black"
+                      : "text-white",
+                  )}
+                  initial={{
+                    x: navbarXPosition,
+                    opacity: 0,
+                  }}
+                  exit={{
+                    x: navbarXPosition,
+                    opacity: 0,
+                  }}
+                  transition={{
+                    duration: 0.2,
+                    delay: navbarDelayAnimation,
+                    type: "spring",
+                    stiffness: 150,
+                    velocity: 90,
+                  }}
+                  animate={{ x: 0, opacity: 1 }}
+                >
+                  <a
+                    href={menu.id}
+                    onClick={() => {
+                      setIsNavbarOpen(false);
+                    }}
+                  >
+                    {menu.title}
+                  </a>
+                </motion.li>
               )}
-              initial={{
-                x: navbarXPosition,
-                opacity: 0,
-              }}
-              transition={{
-                duration: 0.5,
-                delay: navbarDelayAnimation,
-                type: "spring",
-                stiffness: 100,
-                velocity: 90,
-              }}
-              animate={{ x: 0, opacity: 1 }}
-            >
-              <a href={menu.id}>{menu.title}</a>
-            </motion.li>
+            </AnimatePresence>
           );
         })}
       </motion.ul>

diff --git a/apps/frontend/src/components/molecules/OurTeams.tsx b/apps/frontend/src/components/molecules/OurTeams.tsx
@@ -4,7 +4,10 @@ import { TeamCard } from "./card";
 
 export default function OurTeams() {
   return (
-    <div className="flex w-full max-w-5xl flex-col items-center justify-around">
+    <div
+      className="flex w-full max-w-5xl flex-col items-center justify-around"
+      id="team"
+    >
       <div className="my-10 flex w-full max-w-5xl flex-col items-start justify-between px-10 md:flex-row md:px-0">
         <Heading.h2 className="font-light leading-[52.8px]">
           Meet our team.

diff --git a/apps/frontend/src/components/molecules/button/ScrollDownButton.tsx b/apps/frontend/src/components/molecules/button/ScrollDownButton.tsx
@@ -22,13 +22,36 @@ export default function ScrollDownButton() {
       <Text.span className={cn("text-[14px] font-light text-black")}>
         SCROLL DOWN
       </Text.span>
-      <ScrollDown
-        initial={{ pathLength: 0 }}
-        whileInView={{ pathLength: 1 }}
-        transition={{ duration: 1 }}
-        viewport={{ amount: 1, once: true }}
-        className="absolute top-10 backdrop-invert"
-      />
+
+      <div
+        className={cn("relative", "flex flex-col", "absolute top-[39.40px]")}
+      >
+        <div
+          className={cn(
+            "h-[calc(286px/2)] overflow-hidden",
+            "flex items-start",
+          )}
+        >
+          <ScrollDown
+            initial={{ pathLength: 0 }}
+            whileInView={{ pathLength: 1 }}
+            transition={{ duration: 1 }}
+            viewport={{ amount: 1, once: true }}
+            lineFill="#000000"
+          />
+        </div>
+        <div
+          className={cn("h-[calc(286px/2)] overflow-hidden", "flex items-end")}
+        >
+          <ScrollDown
+            initial={{ pathLength: 0 }}
+            whileInView={{ pathLength: 1 }}
+            transition={{ duration: 1 }}
+            viewport={{ amount: 1, once: true }}
+            lineFill="#ffffff"
+          />
+        </div>
+      </div>
     </button>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml