fix: header nav styling

Merge branch 'dev' of https://giteadev3.link/rankrunners-dev/next-cochise into dev
feat: gtm installation
2025-03-12 01:43:05 +07:00 · 2025-03-11 21:18:17 +07:00 · 2025-03-11 21:14:56 +07:00
9 changed files with 10721 additions and 7435 deletions
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
    "tsc": "tsc"
  },
  "dependencies": {
+    "@next/third-parties": "^15.2.2",
    "@payloadcms/db-postgres": "^3.20.0",
    "@payloadcms/next": "^3.20.0",
    "@payloadcms/payload-cloud": "^3.20.0",
--- a/public/assets/css/custom.css
+++ b/public/assets/css/custom.css
@ -87,7 +87,7 @@ a {
 }

 .mn-sub {
-  transition: max-height 0.3s ease-in-out;
+  transition: max-height;
 }

 .mn-sub.open {
--- a/public/assets/css/demo-slick/demo-slick.css
+++ b/public/assets/css/demo-slick/demo-slick.css
@ -66,9 +66,11 @@
  --gradient-gray-light-1: linear-gradient(0deg, #f7f9fc 0%, #fff 100%);
  --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f7f9fc 100%);
  --border-radius-default: 10px;
-  --box-shadow: 0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03),
+  --box-shadow:
+    0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03),
    0px 3px 5px 0px rgba(30, 36, 50, 0.03);
-  --box-shadow-strong: 0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06),
+  --box-shadow-strong:
+    0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06),
    0px 3px 5px 0px rgba(30, 36, 50, 0.06);
  --box-shadow-block: 0px 10px 30px 0px rgba(30, 36, 50, 0.07), 0px 0px 1px 0px rgba(30, 36, 50, 0.1);
  --box-shadow-block-strong: 0px 15px 50px 0px rgba(30, 36, 50, 0.14), 0px 0px 1px 0px rgba(30, 36, 50, 0.15);
@ -201,12 +203,8 @@
 .theme-slick .inner-nav ul li {
  margin: 0 18px;
 }
-.theme-slick .inner-nav > ul > li > a {
-  opacity: 0.7;
-}
 .theme-slick .inner-nav ul li a {
  position: relative;
-  color: #fff;
 }
 .theme-slick .inner-nav > ul > li > a:not(.no-hover):before {
  content: "";
@ -234,11 +232,7 @@
 .theme-slick .mobile-on .desktop-nav ul {
  background: rgba(30, 36, 50, 0.99);
 }
-.theme-slick .mobile-on .desktop-nav ul li a,
-.theme-slick .inner-nav ul li .mn-sub li a,
-.theme-slick .mn-group-title {
-  color: rgba(255, 255, 255, 0.9) !important;
-}
+
 .theme-slick .form label {
  margin-bottom: 15px;
  font-size: 18px;
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@ -238,10 +238,10 @@ Primary use: Multipurpose Template
  --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
  --border-radius-default: 4px;
  --border-radius-large: 30px;
-  --box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03),
-    0px 3px 5px 0px rgba(0, 0, 0, 0.03);
-  --box-shadow-strong: 0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06),
-    0px 3px 5px 0px rgba(0, 0, 0, 0.06);
+  --box-shadow:
+    0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 5px 0px rgba(0, 0, 0, 0.03);
+  --box-shadow-strong:
+    0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 3px 5px 0px rgba(0, 0, 0, 0.06);
  --box-shadow-block: 0px 3px 50px 0px rgba(0, 0, 0, 0.05);
  --box-shadow-block-strong: 0px 3px 50px 0px rgba(0, 0, 0, 0.15);
  --transition-default: all 0.27s cubic-bezier(0, 0, 0.58, 1);
@ -3880,7 +3880,6 @@ a.logo:hover {
  display: table-cell;
  vertical-align: middle;
  height: var(--menu-bar-height);
-  opacity: 0.65;
 }
 .main-nav:not(.mobile-on).small-height .inner-nav > ul > li > a {
  height: var(--menu-bar-height-scrolled) !important;
@ -3979,7 +3978,6 @@ a.logo:hover {
  border-left: none;
  border-right: none;
  letter-spacing: 0;
-  color: var(--color-gray-light-5) !important;
  outline-offset: -2px !important;
  transition: var(--transition-default);
 }
@ -3990,7 +3988,6 @@ a.logo:hover {
 .inner-nav ul li .mn-sub li a:hover,
 .mn-sub li a.active {
  background: rgba(255, 255, 255, 0.09);
-  color: var(--color-gray-light-1) !important;
 }
 .mn-sub:not(.mn-has-multi) li ul {
  left: 100%;
@ -4324,22 +4321,11 @@ a.logo:hover {
  backdrop-filter: blur(10px);
 }
 .main-nav.dark .inner-nav ul > li > a {
-  font-size: 18px;
  font-weight: 500;
  line-height: 1.2em;
-  color: #fff;
-  opacity: 0.78;
  padding: 10px;
 }
-.main-nav.dark .inner-nav ul > li > a:hover,
-.main-nav.dark .inner-nav ul > li > a.active {
-  color: #fff;
-  opacity: 1 !important;
-}

-.main-nav.dark .inner-nav ul li .mn-sub li a {
-  opacity: 1;
-}
 .main-nav.dark .main-nav-icon-cart {
  opacity: 1;
 }
@ -4363,13 +4349,13 @@ a.logo:hover {
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
-  color: rgba(255, 255, 255, 0.9);
+  /* color: rgba(255, 255, 255, 0.9); */
 }
-.main-nav.dark .mn-sub {
+/* .main-nav.dark .mn-sub {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
-}
+} */
 .main-nav.dark .mi-chevron-down,
 .main-nav.dark.body-scrolled .inner-nav ul > li > a:hover .mi-chevron-down,
 .main-nav.dark.body-scrolled .inner-nav ul > li > a.active .mi-chevron-down {
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -12,7 +12,7 @@ const shareIcons: Record<string, any> = {
    link: "tel:+15208036644",
    dom: (
      <span className="social-nav flex gap-1 text-2xl lg:text-white">
-        <Image src="/assets/icons/phone.png" alt="Image Description" width={25} height={22} />
+        <Image src="/assets/icons/phone.png" alt="Phone" width={32} height={22} />
        <b className="text-[17px]">(520) 803-6644</b>
      </span>
    ),
@ -41,23 +41,20 @@ export default function Header({ links }: { links: typeof navMenuData }) {
  return (
    <nav className="main-nav dark stick-fixed wow-menubar wch-unset relative">
      <div className="main-nav-sub full-wrapper">
-        {/* Logo  (* Add your text or image to the link tag. Use SVG or PNG image format. 
-              If you use a PNG logo image, the image resolution must be equal 200% of the visible logo
-              image size for support of retina screens. See details in the template documentation. *) */}
        <div className="nav-logo-wrap local-scroll">
          <Link href={`/`} className="logo">
            <Image
              src="/assets/images/demo-slick/logo-dark.webp"
              alt="Your Company Logo"
-              width={105}
-              height={34}
+              width={500}
+              height={195}
              className="light-mode-logo"
            />
            <Image
              src="/assets/images/demo-slick/logo-dark.webp"
              alt="Your Company Logo"
-              width={405}
-              height={34}
+              width={500}
+              height={195}
              className="dark-mode-logo"
            />
          </Link>
@ -70,11 +67,10 @@ export default function Header({ links }: { links: typeof navMenuData }) {
        {/* Main Menu */}
        <div className="inner-nav desktop-nav">
          <ul className="clearlist local-scroll">
-            {/* Item With Sub */}
            <HeaderNav links={links} />
-            {/* End Item With Sub */}
          </ul>
-          <ul className="items-end clearlist flex flex-col justify-center h-full">
+
+          <ul className="items-end flex flex-col justify-center h-full">
            <div className="flex flex-col items-center h-full w-full content-center justify-center gap-2">
              <a
                href="/contact"
--- a/src/components/HeaderNav.tsx
+++ b/src/components/HeaderNav.tsx
@ -7,12 +7,19 @@ 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";
+import { FaCaretDown, FaCaretRight } from "react-icons/fa";

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

+  const toggleDropdown = (section: string[]) => {
+    if (section == isDropdownOpen) {
+      setIsDropdownOpen([""]);
+    }
+    setIsDropdownOpen(section);
+  };
+
  useEffect(() => {
    setTimeout(() => {
      scrollToElement();
@ -32,101 +39,84 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
    <>
      {links.map((link, index) => (
        <Fragment key={index}>
-          <motion.li
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.3, delay: index * 0.1 }}
-          >
+          <li>
            {!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>
-                      <span className="btn-animate-y-2" aria-hidden="true">
-                        {link.text}
-                      </span>
+              <Link
+                href={link.href}
+                className="!text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
+              >
+                {animateY ? (
+                  <span className="btn-animate-y">
+                    <span className="btn-animate-y-1">{link.text}</span>
+                    <span className="btn-animate-y-2" aria-hidden="true">
+                      {link.text}
                    </span>
-                  ) : (
-                    link.text
-                  )}
-                </span>
+                  </span>
+                ) : (
+                  link.text
+                )}
              </Link>
            )}

            {Array.isArray(link?.child) && (
              <>
-                <motion.div
-                  className="mn-has-sub flex justify-between text-white"
-                  whileHover={{ scale: 1.05 }}
-                  transition={{ duration: 0.3 }}
+                <Link
+                  href={link?.href ?? "#"}
+                  className="mn-has-sub !flex justify-between items-center !text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
+                  onClick={() => toggleDropdown([link.text])}
                >
-                  <Link href={link?.href ?? "#"}>
-                    {link.text} <i className="mi-chevron-down" />
-                  </Link>
-                </motion.div>
+                  {link.text} <FaCaretDown className="ml-2" />
+                </Link>

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

-                          <motion.ul
+                          <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) => (
-                              <motion.li
-                                key={subLinkIdx2}
-                                initial={{ opacity: 0 }}
-                                animate={{ opacity: 1 }}
-                                transition={{ duration: 0.3, delay: subLinkIdx2 * 0.1 }}
-                              >
-                                <Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
-                                  <span className="text-white">{subLink2?.text}</span>
+                              <li key={subLinkIdx2}>
+                                <Link
+                                  href={subLink2?.href}
+                                  className="!text-[14px] !items-center !text-white hover:!text-extColorPrimary3 transition-all duration-500"
+                                  onClick={() => toggleMobileMenu()}
+                                >
+                                  {subLink2?.text}
                                </Link>
-                              </motion.li>
+                              </li>
                            ))}
-                          </motion.ul>
+                          </ul>
                        </>
                      )}
-                    </motion.li>
+                    </li>
                  ))}
-                </motion.ul>
+                </ul>
              </>
            )}
-          </motion.li>
-          {index !== links.length - 1 && (
+          </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/src/components/InitialScript.tsx
+++ b/src/components/InitialScript.tsx
@ -5,6 +5,7 @@ import { init_wow } from "@/utils/initWow";
 import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
+import { GoogleTagManager } from "@next/third-parties/google";

 export default function InitialScript() {
  const path = usePathname();
@ -36,5 +37,9 @@ export default function InitialScript() {
    }
  }, []);

-  return <></>;
+  return (
+    <>
+      <GoogleTagManager gtmId="GTM-XYZ" />
+    </>
+  );
 }
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@ -6,10 +6,65 @@
 * and re-run `payload generate:types` to regenerate this file.
 */

+/**
+ * Supported timezones in IANA format.
+ *
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "supportedTimezones".
+ */
+export type SupportedTimezones =
+  | 'Pacific/Midway'
+  | 'Pacific/Niue'
+  | 'Pacific/Honolulu'
+  | 'Pacific/Rarotonga'
+  | 'America/Anchorage'
+  | 'Pacific/Gambier'
+  | 'America/Los_Angeles'
+  | 'America/Tijuana'
+  | 'America/Denver'
+  | 'America/Phoenix'
+  | 'America/Chicago'
+  | 'America/Guatemala'
+  | 'America/New_York'
+  | 'America/Bogota'
+  | 'America/Caracas'
+  | 'America/Santiago'
+  | 'America/Buenos_Aires'
+  | 'America/Sao_Paulo'
+  | 'Atlantic/South_Georgia'
+  | 'Atlantic/Azores'
+  | 'Atlantic/Cape_Verde'
+  | 'Europe/London'
+  | 'Europe/Berlin'
+  | 'Africa/Lagos'
+  | 'Europe/Athens'
+  | 'Africa/Cairo'
+  | 'Europe/Moscow'
+  | 'Asia/Riyadh'
+  | 'Asia/Dubai'
+  | 'Asia/Baku'
+  | 'Asia/Karachi'
+  | 'Asia/Tashkent'
+  | 'Asia/Calcutta'
+  | 'Asia/Dhaka'
+  | 'Asia/Almaty'
+  | 'Asia/Jakarta'
+  | 'Asia/Bangkok'
+  | 'Asia/Shanghai'
+  | 'Asia/Singapore'
+  | 'Asia/Tokyo'
+  | 'Asia/Seoul'
+  | 'Australia/Sydney'
+  | 'Pacific/Guam'
+  | 'Pacific/Noumea'
+  | 'Pacific/Auckland'
+  | 'Pacific/Fiji';
+
 export interface Config {
  auth: {
    users: UserAuthOperations;
  };
+  blocks: {};
  collections: {
    users: User;
    media: Media;
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
RizqiSyahrendra	5cf5794bb4	fix: header nav styling	2025-03-12 01:43:05 +07:00
RizqiSyahrendra	9714c5ca1b	Merge branch 'dev' of https://giteadev3.link/rankrunners-dev/next-cochise into dev	2025-03-11 21:18:17 +07:00
RizqiSyahrendra	bb5269043f	feat: gtm installation	2025-03-11 21:14:56 +07:00