@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/layout/header/components/NavbarActions.tsx

@@ -0,0 +1,125 @@
+import Link from "next/link";
+import { useRef, useEffect } from "react";
+import { UserProfileIcon } from "@/app/utils/svgs/userProfileIcon";
+import { ShoppingCart } from "@/app/utils/svgs/shoppingCart";
+import Search from "../search";
+import SecondaryButton from "../../../reuseableUI/secondaryButton";
+import AccountMenuDropdown from "../accountMenuDropdown";
+import CartDropDown from "../../cartDropDown";
+import { CartBadge } from "./CartBadge";
+import { navbarStyles } from "../styles/navbarStyles";
+import PrimaryButton from "@/app/components/reuseableUI/primaryButton";
+import { useAppConfiguration } from "@/app/components/providers/ServerAppConfigurationProvider";
+
+interface NavbarActionsProps {
+  isLoggedIn: boolean;
+  isAccountOpen: boolean;
+  setIsAccountOpen: (open: boolean) => void;
+  isLoggingOut: boolean;
+  handleLogout: () => Promise<void>;
+  totalItems: number;
+  syncingCart: boolean;
+  toggleAccount: () => void;
+  isActive: (href: string) => boolean;
+}
+
+export const NavbarActions = ({
+  isLoggedIn,
+  isAccountOpen,
+  setIsAccountOpen,
+  isLoggingOut,
+  handleLogout,
+  totalItems,
+  syncingCart,
+  toggleAccount,
+  isActive,
+}: NavbarActionsProps) => {
+  const accountRef = useRef<HTMLDivElement>(null);
+  const { isDealerLocatorEnabled } = useAppConfiguration();
+
+  // Close account menu on outside click
+  useEffect(() => {
+    const handleOutside = (e: PointerEvent) => {
+      if (!isAccountOpen) return;
+      const target = e.target as Node | null;
+      if (
+        accountRef.current &&
+        target &&
+        !accountRef.current.contains(target)
+      ) {
+        setIsAccountOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", handleOutside);
+    return () => {
+      document.removeEventListener("pointerdown", handleOutside);
+    };
+  }, [isAccountOpen, setIsAccountOpen]);
+
+  return (
+    <div className={navbarStyles.actionsContainer}>
+      <div className="flex w-full items-center justify-end">
+        <Search />
+      </div>
+
+      {isLoggedIn ? (
+        <div className="relative" ref={accountRef}>
+          <button
+            onClick={toggleAccount}
+            className={`cursor-pointer py-2.5 ${navbarStyles.iconBtnBase} ${
+              isAccountOpen
+                ? "bg-[var(--color-secondary-900)] text-[var(--color-primary-500)]"
+                : navbarStyles.navLinkInactive
+            }`}
+            aria-label="User Account"
+            aria-expanded={isAccountOpen}
+            aria-haspopup="menu"
+            disabled={isLoggingOut}
+          >
+            {UserProfileIcon}
+          </button>
+
+          <AccountMenuDropdown
+            isAccountOpen={isAccountOpen}
+            isLoggingOut={isLoggingOut}
+            handleLogout={handleLogout}
+          />
+        </div>
+      ) : (
+        <Link href="/account/login" prefetch={false}>
+          {UserProfileIcon}
+        </Link>
+      )}
+      {isDealerLocatorEnabled() && (
+        <Link href="/locator" prefetch={false}>
+          <PrimaryButton className="text-base whitespace-nowrap" content="Find A Dealer" />
+        </Link>
+      )}
+      <div className="group">
+        <Link
+          href="/cart"
+          prefetch={false}
+          className={`flex items-center py-2.5 ${navbarStyles.iconBtnBase} ${
+            isActive("/cart")
+              ? "bg-[var(--color-secondary-900)] text-[var(--color-primary-500)]"
+              : navbarStyles.navLinkInactive
+          } relative`}
+          aria-label={`Cart with ${totalItems} items`}
+        >
+          {ShoppingCart}
+          {syncingCart ? (
+            <div
+              className="absolute -top-1 -right-1 w-3 h-3 border border-[var(--color-primary-600)] rounded-full border-t-transparent animate-spin"
+              aria-label="Syncing cart"
+            />
+          ) : (
+            <CartBadge count={totalItems} />
+          )}
+        </Link>
+        <div className="hidden pointer-events-none group-hover:pointer-events-auto group-hover:block">
+          <CartDropDown />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/app/components/layout/header/components/NavbarBrand.tsx

@@ -0,0 +1,29 @@
+import Image from "next/image";
+import Link from "next/link";
+import { navbarStyles } from "../styles/navbarStyles";
+
+interface NavbarBrandProps {
+  logo: string;
+  brandName: string;
+  width?: number;
+  height?: number;
+}
+
+export const NavbarBrand = ({ logo, brandName, width = 160, height = 48 }: NavbarBrandProps) => {
+  return (
+    <Link 
+      href="/" 
+      prefetch={false} 
+      className={navbarStyles.brandContainer}
+      aria-label={`${brandName} Home`}
+    >
+      <Image
+        src={logo}
+        alt={brandName}
+        width={width}
+        height={height}
+        priority
+      />
+    </Link>
+  );
+};

package/src/app/components/layout/header/components/NavigationLinks.tsx

@@ -0,0 +1,131 @@
+import { ChevronDownIcon } from "@/app/utils/svgs/chevronDownIcon";
+import Link from "next/link";
+import { useMemo } from "react";
+import { useDropdown } from "../hooks/useDropdown";
+import type { CategoryNode, MenuItem } from "../hooks/useNavbarData";
+import MegaMenuDropdown from "../megaMenuDropdown";
+import { navbarStyles } from "../styles/navbarStyles";
+import { MenuItemDropdown } from "./MenuItemDropdown";
+
+interface NavigationLinksProps {
+  categories: CategoryNode[];
+  categoriesLoading: boolean;
+  menuItems: MenuItem[];
+  isActive: (href: string) => boolean;
+}
+
+const NAV_LINKS = [
+  { name: "Products", href: "/products/all" },
+  { name: "About", href: "/about" },
+  { name: "Blog", href: "/blog" },
+  { name: "Contact", href: "/contact" },
+] as const;
+
+export const NavigationLinks = ({
+  categories,
+  categoriesLoading,
+  menuItems,
+  isActive,
+}: NavigationLinksProps) => {
+  const productsDropdown = useDropdown(80);
+
+  const memoizedMenuItems = useMemo(() => {
+    return menuItems.map((item) => ({
+      ...item,
+      hasChildren: item.children && item.children.length > 0,
+    }));
+  }, [menuItems]);
+
+  const getLinkClassName = (href: string) => {
+    return `${navbarStyles.navLinkBase} ${
+      isActive(href) ? navbarStyles.navLinkActive : navbarStyles.navLinkInactive
+    } ${navbarStyles.navLinkWithUnderline}`;
+  };
+
+  const getTargetFromMetadata = (
+    metadata?: Array<{ key: string; value: string }>
+  ) => {
+    const targetMetadata = metadata?.find((meta) => meta.key === "target");
+    return targetMetadata?.value === "_blank" ? "_blank" : "_self";
+  };
+  return (
+    <>
+      {NAV_LINKS.map((link) =>
+        link.name === "Products" ? (
+          <div
+            key={link.href}
+            className="relative"
+            onMouseEnter={productsDropdown.handleMouseEnter}
+            onMouseLeave={productsDropdown.handleMouseLeave}
+          >
+            <Link
+              href={link.href}
+              prefetch={false}
+              className={`${navbarStyles.navLinkBase} ${
+                isActive(link.href)
+                  ? navbarStyles.navLinkActive
+                  : navbarStyles.navLinkInactive
+              }`}
+              aria-expanded={productsDropdown.isOpen}
+              aria-haspopup="menu"
+            >
+              <div className="flex items-center gap-2 transition-all ease-in-out duration-300 uppercase">
+                <span>{link.name}</span>
+                <span
+                  className={`size-4 transition-transform duration-300 ${
+                    productsDropdown.isOpen ? "rotate-180" : ""
+                  }`}
+                  aria-hidden="true"
+                >
+                  {ChevronDownIcon}
+                </span>
+              </div>
+            </Link>
+
+            <MegaMenuDropdown
+              isOpen={productsDropdown.isOpen}
+              categories={categories}
+              categoriesLoading={categoriesLoading}
+              onClose={productsDropdown.close}
+              onMouseEnter={productsDropdown.handleMouseEnter}
+              onMouseLeave={productsDropdown.handleMouseLeave}
+            />
+          </div>
+        ) : memoizedMenuItems && memoizedMenuItems.length > 0 ? null : (
+          <Link
+            key={link.href}
+            href={link.href}
+            prefetch={false}
+            className={getLinkClassName(link.href)}
+          >
+            {link.name}
+          </Link>
+        )
+      )}
+
+      {/* Dynamic menu items */}
+      {memoizedMenuItems.map((item) =>
+        item.hasChildren ? (
+          <MenuItemDropdown key={item.id} item={item} isActive={isActive} />
+        ) : item.url ? (
+          <Link
+            key={item.id}
+            href={item.url}
+            prefetch={false}
+            target={getTargetFromMetadata(item.metadata)}
+            rel={
+              getTargetFromMetadata(item.metadata) === "_blank"
+                ? "noopener noreferrer"
+                : undefined
+            }
+            className={`${getLinkClassName(
+              item.url
+            )} whitespace-nowrap flex flex-col items-center uppercase tracking-tight`}
+          >
+            <p className="mt-auto uppercase">{item.name}</p>
+          </Link>
+        ) : null
+      )}
+    </>
+  );
+};

package/src/app/components/layout/header/hamMenuSlide.tsx

@@ -0,0 +1,318 @@
+import { cn } from "@/app/utils/functions";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { ChevronDownIcon } from "@/app/utils/svgs/chevronDownIcon";
+import PrimaryButton from "@/app/components/reuseableUI/primaryButton";
+import SecondaryButton from "@/app/components/reuseableUI/secondaryButton";
+import { useAppConfiguration } from "@/app/components/providers/ServerAppConfigurationProvider";
+import useGlobalStore from "@/store/useGlobalStore";
+import Link from "next/link";
+import { useNavbarData } from "./hooks/useNavbarData";
+
+type MenuItem = {
+  id: string;
+  name: string;
+  url: string;
+  level: number;
+  metadata?: Array<{
+    key: string;
+    value: string;
+  }>;
+  children?: MenuItem[];
+};
+
+const NAV_LINKS = [
+  { name: "Home", href: "/" },
+  { name: "Shop", href: "/products/all" },
+];
+
+const HamMenuSlide = ({
+  isHamMenuOpen,
+  setIsHamMenuOpen,
+  menuItems = [],
+}: {
+  isHamMenuOpen: boolean;
+  setIsHamMenuOpen: (v: boolean) => void;
+  menuItems?: MenuItem[];
+}) => {
+  const route = useRouter();
+  const { isDealerLocatorEnabled } = useAppConfiguration();
+  const isLoggedIn = useGlobalStore((s) => s.isLoggedIn);
+  const logout = useGlobalStore((s) => s.logout);
+  const { categories } = useNavbarData();
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const pathName = usePathname();
+  const toggleExpanded = (itemId: string) => {
+    setExpandedItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(itemId)) {
+        newSet.delete(itemId);
+      } else {
+        newSet.add(itemId);
+      }
+      return newSet;
+    });
+  };
+
+  const getTargetFromMetadata = (
+    metadata?: Array<{ key: string; value: string }>
+  ) => {
+    const targetMetadata = metadata?.find((meta) => meta.key === "target");
+    return targetMetadata?.value === "_blank" ? "_blank" : "_self";
+  };
+
+  const handleNavigation = (
+    url: string,
+    metadata?: Array<{ key: string; value: string }>
+  ) => {
+    setIsHamMenuOpen(false);
+    const target = getTargetFromMetadata(metadata);
+
+    if (target === "_blank") {
+      window.open(url, "_blank", "noopener,noreferrer");
+    } else {
+      route.push(url);
+    }
+  };
+
+  const handleLogout = async () => {
+    if (isLoggingOut) return;
+    try {
+      setIsLoggingOut(true);
+      setIsHamMenuOpen(false);
+      await logout();
+    } catch {
+      window.location.href = "/";
+    } finally {
+      setIsLoggingOut(false);
+    }
+  };
+
+  useEffect(() => {
+    // Prevent extension interference by validating the state
+    const validatedState = Boolean(isHamMenuOpen);
+
+    if (validatedState) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+
+    // Cleanup function to restore scroll on unmount
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [isHamMenuOpen]);
+  return (
+    <div
+      className={cn(
+        "fixed top-[138px] sm:top-[118px] md:top-[122px] h-[calc(100vh-138px)] sm:h-[calc(100vh-118px)] md:h-[calc(100vh-122px)] left-0 overflow-y-auto pb-4 w-full bg-[#e8e8e8] z-40 transition-all duration-[400ms] ease-in-out",
+        Boolean(isHamMenuOpen) ? "translate-x-0" : "-translate-x-full"
+      )}
+    >
+      <div className="py-6 px-4 md:px-6 flex flex-col">
+        {NAV_LINKS.map((link) => (
+          <div
+            key={link.href}
+            onClick={() => handleNavigation(link.href)}
+            className={`block pb-4 hover:text-[var(--color-primary-500)] transition-all duration-300 ease-in-out cursor-pointer ${
+              link.href === pathName ? "text-[var(--color-primary-500)]" : ""
+            }`}
+          >
+            {link.name}
+          </div>
+        ))}
+        {/* Categories Dropdown */}
+        {categories.length > 0 && (
+          <div>
+            <div
+              className="flex items-center justify-between pb-4 hover:text-[var(--color-primary-500)] transition-all duration-300 ease-in-out cursor-pointer"
+              onClick={() => toggleExpanded("categories-main")}
+            >
+              <span>Categories</span>
+              <span
+                className={`size-4 transition-transform duration-300 ${
+                  expandedItems.has("categories-main") ? "rotate-180" : ""
+                }`}
+              >
+                {ChevronDownIcon}
+              </span>
+            </div>
+            {expandedItems.has("categories-main") && (
+              <div className="ml-4 border-l border-gray-200 mb-2">
+                {categories.map((category) => (
+                  <div key={category.id} className="py-2">
+                    <div className="flex items-center justify-between pl-4">
+                      <Link
+                        href={`/category/${encodeURIComponent(
+                          category.slug || category.id
+                        )}`}
+                        onClick={() => setIsHamMenuOpen(false)}
+                        className="whitespace-nowrap hover:text-[var(--color-primary-500)] transition-all duration-300 ease-in-out cursor-pointer text-sm flex-1"
+                      >
+                        {category.name}
+                      </Link>
+                      {category.children?.length ? (
+                        <div
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            toggleExpanded(category.id);
+                          }}
+                          className="w-full flex items-end justify-end"
+                        >
+                          <span
+                            className={`[&>svg]:size-4 transition-transform duration-300 cursor-pointer mr-2 ${
+                              expandedItems.has(category.id) ? "rotate-180" : ""
+                            }`}
+                          >
+                            {ChevronDownIcon}
+                          </span>
+                        </div>
+                      ) : null}
+                    </div>
+                    {category.children?.length &&
+                    expandedItems.has(category.id) ? (
+                      <ul className="space-y-2 mt-2 ml-4 border-l border-gray-200">
+                        {category.children.map((child) => (
+                          <li
+                            key={child.id}
+                            className="text-sm leading-4 tracking-[-0.03px] pl-4 py-1"
+                          >
+                            <Link
+                              href={`/category/${encodeURIComponent(
+                                child.slug || child.id
+                              )}`}
+                              onClick={() => setIsHamMenuOpen(false)}
+                              className="text-[var(--color-secondary-600)] hover:text-[var(--color-primary-500)] transition-all duration-300 inline-block"
+                            >
+                              {child.name}
+                            </Link>
+                          </li>
+                        ))}
+                      </ul>
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+        {menuItems.map((item) => (
+          <div key={item.id}>
+            {item.children && item.children.length > 0 ? (
+              <>
+                <div
+                  className="flex items-center justify-between pb-4 hover:text-[var(--color-primary-500)] transition-all duration-300 ease-in-out cursor-pointer"
+                  onClick={() => toggleExpanded(item.id)}
+                >
+                  <span>{item.name}</span>
+                  <span
+                    className={`size-4 transition-transform duration-300 ${
+                      expandedItems.has(item.id) ? "rotate-180" : ""
+                    }`}
+                  >
+                    {ChevronDownIcon}
+                  </span>
+                </div>
+                {expandedItems.has(item.id) && (
+                  <div className="ml-4 border-l border-gray-200 mb-6">
+                    {item.children.map((child) => (
+                      <div
+                        key={child.id}
+                        onClick={() =>
+                          handleNavigation(child.url, child.metadata)
+                        }
+                        className="block py-3 pl-4 hover:text-[var(--color-primary-500)] transition-all duration-300 ease-in-out cursor-pointer text-sm"
+                      >
+                        {child.name}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </>
+            ) : (
+              <div
+                onClick={() => handleNavigation(item.url, item.metadata)}
+                className={`block pb-4 hover:text-[var(--color-primary-500)] transition-all duration-300 ease-in-out cursor-pointer ${
+                  (pathName === "/contact" && item.name === "Contact") ||
+                  (pathName === "/frequently-asked-questions" &&
+                    item.name === "FAQ")
+                    ? "text-[var(--color-primary-500)]"
+                    : ""
+                }`}
+              >
+                {item.name}
+              </div>
+            )}
+          </div>
+        ))}
+
+        {/* Account Section */}
+        {isLoggedIn ? (
+          <div className="mt-3 pt-3 border-t border-gray-400">
+            <div
+              onClick={() => handleNavigation("/account")}
+              className="flex items-center gap-2 py-3 hover:bg-gray-100 hover:text-[var(--color-primary-500)] transition-all duration-300 ease-in-out cursor-pointer rounded"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="w-5 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+                />
+              </svg>
+              <span>Account Dashboard</span>
+            </div>
+            <div
+              onClick={handleLogout}
+              className="flex items-center gap-2 py-3 hover:bg-gray-100 hover:text-[var(--color-primary-500)] transition-all duration-300 ease-in-out cursor-pointer rounded"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="w-5 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
+                />
+              </svg>
+              <span>{isLoggingOut ? "Logging out..." : "Logout"}</span>
+            </div>
+          </div>
+        ) : (
+          <div className="mt-6 pt-6 border-t border-gray-200">
+            <Link href="/account/login" onClick={() => setIsHamMenuOpen(false)}>
+              <SecondaryButton className="w-full text-base" content="LOGIN" />
+            </Link>
+          </div>
+        )}
+
+        {/* Find A Dealer Button */}
+        {isDealerLocatorEnabled() && (
+          <div className="mt-6 pt-6 border-t border-gray-200">
+            <PrimaryButton
+              className="w-full text-base"
+              content="FIND A DEALER"
+              onClick={() => handleNavigation("/locator")}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HamMenuSlide;

package/src/app/components/layout/header/header.tsx

@@ -0,0 +1,44 @@
+import { Suspense } from "react";
+import { NavBar } from "./navBar";
+import TopBar from "./topBar";
+import { fetchCategories, fetchMenuData } from "@/hooks/serverNavbarData";
+
+export const Header = async () => {
+  const [categories, menuItems] = await Promise.allSettled([
+    fetchCategories(),
+    fetchMenuData(),
+  ]);
+
+  const categoriesData =
+    categories.status === "fulfilled" ? categories.value : [];
+  const menuItemsData = menuItems.status === "fulfilled" ? menuItems.value : [];
+
+  return (
+    <header className="w-full">
+      <Suspense
+        fallback={
+          <div
+            className="w-full"
+            style={{ backgroundColor: "var(--color-secondary-900)", height: 36 }}
+          />
+        }
+      >
+        {/* Contact + Timings Banner */}
+        <TopBar />
+      </Suspense>
+      <Suspense
+        fallback={
+          <div
+            className="w-full"
+            style={{
+              backgroundColor: "var(--color-secondary-900)",
+              height: 72,
+            }}
+          />
+        }
+      >
+        <NavBar categories={categoriesData} menuItems={menuItemsData} />
+      </Suspense>
+    </header>
+  );
+};

package/src/app/components/layout/header/hooks/useDropdown.ts

@@ -0,0 +1,45 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+
+export const useDropdown = (delay: number = 300) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const clearExistingTimeout = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  const handleMouseEnter = useCallback(() => {
+    clearExistingTimeout();
+    setIsOpen(true);
+  }, [clearExistingTimeout]);
+
+  const handleMouseLeave = useCallback(() => {
+    clearExistingTimeout();
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+    }, delay);
+  }, [clearExistingTimeout, delay]);
+
+  const close = useCallback(() => {
+    clearExistingTimeout();
+    setIsOpen(false);
+  }, [clearExistingTimeout]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      clearExistingTimeout();
+    };
+  }, [clearExistingTimeout]);
+
+  return {
+    isOpen,
+    handleMouseEnter,
+    handleMouseLeave,
+    close,
+    setIsOpen
+  };
+};