Merge branch 'dev' of https://giteadev3.link/rankrunners-dev/next-cochise into dev

2025-03-11 21:18:17 +07:00 · 2025-03-11 21:18:17 +07:00 · 9714c5ca1b
commit 9714c5ca1b
parent bb5269043f 78e38e48d6
5 changed files with 193 additions and 130 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -18,10 +18,12 @@
        "animejs": "^3.2.2",
        "bootstrap": "^5.1.3",
        "dayjs": "^1.11.13",
+        "framer-motion": "^12.4.13",
        "graphql": "^16.10.0",
        "imagesloaded": "^5.0.0",
        "isotope-layout": "^3.0.6",
        "jarallax": "^2.2.1",
+        "motion": "^12.4.13",
        "next": "15.2.0-canary.30",
        "payload": "^3.20.0",
        "photoswipe": "^5.4.4",
@ -8092,6 +8094,33 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "12.4.13",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.13.tgz",
+      "integrity": "sha512-JHSXIdL7WOTCSEb2UUurHURV85pWTn6UIg+iWLBhH5SFndbjni8CEQcxwsBwOs3RHZ83TkE4xoxb9cHsFPY9yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.4.11",
+        "motion-utils": "^12.4.10",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@ -10289,6 +10318,47 @@
      "license": "MIT",
      "peer": true
    },
+    "node_modules/motion": {
+      "version": "12.4.13",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.4.13.tgz",
+      "integrity": "sha512-8ehpE6Sd8ack6jLLzweW6RwCBQoASf+yVu8aUPFNKHsJIVejJaBPGsMiswcpfzHeCusZ/ztNIKbgoEn7ruJaOw==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.4.13",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.4.11",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.11.tgz",
+      "integrity": "sha512-wstlyV3pktgFjqsjbXMo1NX9hQD9XTVqxQNvfc+FREAgxr3GVzgWIEKvbyyNlki3J1jmmh+et9X3aCKeqFPcxA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.4.10"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.4.10",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.4.10.tgz",
+      "integrity": "sha512-NPwZd94V013SwRf++jMrk2+HEBgPkeIE2RiOzhAuuQlqxMJPkKt/LXVh6Upl+iN8oarSGD2dlY5/bqgsYXDABA==",
+      "license": "MIT"
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
--- a/package.json
+++ b/package.json
@ -25,10 +25,12 @@
    "animejs": "^3.2.2",
    "bootstrap": "^5.1.3",
    "dayjs": "^1.11.13",
+    "framer-motion": "^12.4.13",
    "graphql": "^16.10.0",
    "imagesloaded": "^5.0.0",
    "isotope-layout": "^3.0.6",
    "jarallax": "^2.2.1",
+    "motion": "^12.4.13",
    "next": "15.2.0-canary.30",
    "payload": "^3.20.0",
    "photoswipe": "^5.4.4",
--- a/public/assets/css/demo-slick/demo-slick.css
+++ b/public/assets/css/demo-slick/demo-slick.css
@ -206,6 +206,7 @@
 }
 .theme-slick .inner-nav ul li a {
  position: relative;
+  color: #fff;
 }
 .theme-slick .inner-nav > ul > li > a:not(.no-hover):before {
  content: "";
--- a/src/components/HeaderNav.tsx
+++ b/src/components/HeaderNav.tsx
@ -7,18 +7,12 @@ import { scrollToElement } from "@/utils/scrollToElement";
 import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
 import Link from "next/link";
 import { Fragment, useEffect, useRef, useState } from "react";
+import { motion } from "framer-motion";

 export default function HeaderNav({ links, animateY = false }: { links: typeof navMenuData; animateY?: boolean }) {
-  const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
+  const [isDropdownOpen, setIsDropdownOpen] = useState<string[]>([]);
  const dropdownRef = useRef(null);

-  const toggleDropdown = (section: string[]) => {
-    if (section == isDropdownOpen) {
-      setIsDropdownOpen([""]);
-    }
-    setIsDropdownOpen(section);
-  };
-
  useEffect(() => {
    setTimeout(() => {
      scrollToElement();
@ -38,9 +32,14 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
    <>
      {links.map((link, index) => (
        <Fragment key={index}>
-          <li>
+          <motion.li
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3, delay: index * 0.1 }}
+          >
            {!Array.isArray(link?.child) && (
              <Link href={link.href}>
+                <span className="text-white">
                  {animateY ? (
                    <span className="btn-animate-y">
                      <span className="btn-animate-y-1">{link.text}</span>
@ -51,53 +50,83 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
                  ) : (
                    link.text
                  )}
+                </span>
              </Link>
            )}

            {Array.isArray(link?.child) && (
              <>
-                <Link href={link?.href ?? "#"} className="mn-has-sub flex justify-between">
-                  {link.text} <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text])} />
+                <motion.div
+                  className="mn-has-sub flex justify-between text-white"
+                  whileHover={{ scale: 1.05 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <Link href={link?.href ?? "#"}>
+                    {link.text} <i className="mi-chevron-down" />
                  </Link>
+                </motion.div>

-                <ul
-                  className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"} !bg-extColorPrimary8`}
+                <motion.ul
+                  className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"} !bg-extColorPrimary8 text-white`}
                  ref={dropdownRef}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.3 }}
+                  whileHover={{ opacity: 1 }}
                >
                  {link.child.map((subLink: any, subLinkIdx: number) => (
-                    <li key={subLinkIdx}>
+                    <motion.li
+                      key={subLinkIdx}
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{ duration: 0.3, delay: subLinkIdx * 0.1 }}
+                    >
                      {!Array.isArray(subLink?.child) && (
                        <Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
-                          {subLink?.text}
+                          <span className="text-white">{subLink?.text}</span>
                        </Link>
                      )}
                      {Array.isArray(subLink?.child) && (
                        <>
-                          <Link href={subLink?.href ?? "#"} className="mn-has-sub !flex !justify-between">
+                          <motion.div
+                            className="mn-has-sub !flex !justify-between"
+                            whileHover={{ scale: 1.05 }}
+                            transition={{ duration: 0.3 }}
+                          >
+                            <Link href={subLink?.href ?? "#"}>
                              <span>{subLink.text}</span>
-                            <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text, subLink.text])} />
+                              <i className="mi-chevron-down" />
                            </Link>
+                          </motion.div>

-                          <ul
+                          <motion.ul
                            className={`mn-sub to-right ${isDropdownOpen.includes(subLink.text) && "open"} !bg-extColorPrimary8`}
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            transition={{ duration: 0.3 }}
                          >
                            {subLink.child.map((subLink2: any, subLinkIdx2: number) => (
-                              <li key={subLinkIdx2}>
+                              <motion.li
+                                key={subLinkIdx2}
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                transition={{ duration: 0.3, delay: subLinkIdx2 * 0.1 }}
+                              >
                                <Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
-                                  {subLink2?.text}
+                                  <span className="text-white">{subLink2?.text}</span>
                                </Link>
-                              </li>
+                              </motion.li>
                            ))}
-                          </ul>
+                          </motion.ul>
                        </>
                      )}
-                    </li>
+                    </motion.li>
                  ))}
-                </ul>
+                </motion.ul>
              </>
            )}
-          </li>
-          {index != links.length - 1 && (
+          </motion.li>
+          {index !== links.length - 1 && (
            <div
              className="text-white bg-white h-[1px] md:h-[25px] mx-2 opacity-[0.3]"
              style={{ border: "1px solid white" }}
--- a/yarn.lock
+++ b/yarn.lock
@ -10388,108 +10388,69 @@ __metadata:
  linkType: hard

 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version: 7.0.0
-  resolution: "wrap-ansi@npm:7.0.0"
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
  dependencies:
-    ansi-styles: "npm:^4.0.0"
-    string-width: "npm:^4.1.0"
-    strip-ansi: "npm:^6.0.0"
-  checksum: 10c0/d15fc12c11e4cbc4044a552129ebc75ee3f57aa9c1958373a4db0292d72282f54373b536103987a4a7594db1ef6a4f10acf92978f79b98c49306a4b58c77d4da
-  languageName: node
-  linkType: hard
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"

-"wrap-ansi@npm:^8.1.0":
-  version: 8.1.0
-  resolution: "wrap-ansi@npm:8.1.0"
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
  dependencies:
-    ansi-styles: "npm:^6.1.0"
-    string-width: "npm:^5.0.1"
-    strip-ansi: "npm:^7.0.1"
-  checksum: 10c0/138ff58a41d2f877eae87e3282c0630fc2789012fc1af4d6bd626eeb9a2f9a65ca92005e6e69a75c7b85a68479fe7443c7dbe1eb8fbaa681a4491364b7c55c60
-  languageName: node
-  linkType: hard
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"

-"wrappy@npm:1":
-  version: 1.0.2
-  resolution: "wrappy@npm:1.0.2"
-  checksum: 10c0/56fece1a4018c6a6c8e28fbc88c87e0fbf4ea8fd64fc6c63b18f4acc4bd13e0ad2515189786dd2c30d3eec9663d70f4ecf699330002f8ccb547e4a18231fc9f0
-  languageName: node
-  linkType: hard
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==

-"ws@npm:^8.16.0":
-  version: 8.18.0
-  resolution: "ws@npm:8.18.0"
-  peerDependencies:
-    bufferutil: ^4.0.1
-    utf-8-validate: ">=5.0.2"
-  peerDependenciesMeta:
-    bufferutil:
-      optional: true
-    utf-8-validate:
-      optional: true
-  checksum: 10c0/25eb33aff17edcb90721ed6b0eb250976328533ad3cd1a28a274bd263682e7296a6591ff1436d6cbc50fa67463158b062f9d1122013b361cec99a05f84680e06
-  languageName: node
-  linkType: hard
+ws@^8.16.0:
+  version "8.18.0"
+  resolved "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz"
+  integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==

-"xss@npm:^1.0.6":
-  version: 1.0.15
-  resolution: "xss@npm:1.0.15"
+xss@^1.0.6:
+  version "1.0.15"
+  resolved "https://registry.npmjs.org/xss/-/xss-1.0.15.tgz"
+  integrity sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==
  dependencies:
-    commander: "npm:^2.20.3"
-    cssfilter: "npm:0.0.10"
-  bin:
-    xss: bin/xss
-  checksum: 10c0/9b31bee62a208f78e2b7bc8154e3ee87d980f4661dc4ab850ce6f4de7bc50eb152f0bdc13fa759ff8ab6d9bfdf8c0d79cf9f6f86249872b92181912309bccd08
-  languageName: node
-  linkType: hard
+    commander "^2.20.3"
+    cssfilter "0.0.10"

-"xtend@npm:^4.0.0":
-  version: 4.0.2
-  resolution: "xtend@npm:4.0.2"
-  checksum: 10c0/366ae4783eec6100f8a02dff02ac907bf29f9a00b82ac0264b4d8b832ead18306797e283cf19de776538babfdcb2101375ec5646b59f08c52128ac4ab812ed0e
-  languageName: node
-  linkType: hard
+xtend@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==

-"yallist@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "yallist@npm:4.0.0"
-  checksum: 10c0/2286b5e8dbfe22204ab66e2ef5cc9bbb1e55dfc873bbe0d568aa943eb255d131890dfd5bf243637273d31119b870f49c18fcde2c6ffbb7a7a092b870dc90625a
-  languageName: node
-  linkType: hard
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==

-"yallist@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "yallist@npm:5.0.0"
-  checksum: 10c0/a499c81ce6d4a1d260d4ea0f6d49ab4da09681e32c3f0472dee16667ed69d01dae63a3b81745a24bd78476ec4fcf856114cb4896ace738e01da34b2c42235416
-  languageName: node
-  linkType: hard
+yaml@^2.3.4:
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz"
+  integrity sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==

-"yaml@npm:^1.10.0":
-  version: 1.10.2
-  resolution: "yaml@npm:1.10.2"
-  checksum: 10c0/5c28b9eb7adc46544f28d9a8d20c5b3cb1215a886609a2fd41f51628d8aaa5878ccd628b755dbcd29f6bb4921bd04ffbc6dcc370689bb96e594e2f9813d2605f
-  languageName: node
-  linkType: hard
+yjs@>=13.5.22:
+  version "13.6.23"
+  resolved "https://registry.npmjs.org/yjs/-/yjs-13.6.23.tgz"
+  integrity sha512-ExtnT5WIOVpkL56bhLeisG/N5c4fmzKn4k0ROVfJa5TY2QHbH7F0Wu2T5ZhR7ErsFWQEFafyrnSI8TPKVF9Few==
+  dependencies:
+    lib0 "^0.2.99"

-"yaml@npm:^2.3.4":
-  version: 2.7.0
-  resolution: "yaml@npm:2.7.0"
-  bin:
-    yaml: bin.mjs
-  checksum: 10c0/886a7d2abbd70704b79f1d2d05fe9fb0aa63aefb86e1cb9991837dced65193d300f5554747a872b4b10ae9a12bc5d5327e4d04205f70336e863e35e89d8f4ea9
-  languageName: node
-  linkType: hard
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==

-"yocto-queue@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "yocto-queue@npm:0.1.0"
-  checksum: 10c0/dceb44c28578b31641e13695d200d34ec4ab3966a5729814d5445b194933c096b7ced71494ce53a0e8820685d1d010df8b2422e5bf2cdea7e469d97ffbea306f
-  languageName: node
-  linkType: hard
-
-"zwitch@npm:^2.0.0":
-  version: 2.0.4
-  resolution: "zwitch@npm:2.0.4"
-  checksum: 10c0/3c7830cdd3378667e058ffdb4cf2bb78ac5711214e2725900873accb23f3dfe5f9e7e5a06dcdc5f29605da976fc45c26d9a13ca334d6eea2245a15e77b8fc06e
-  languageName: node
-  linkType: hard
+zwitch@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz"
+  integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==