@alphasquad/saleor-template-advance 0.1.0

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

@@ -0,0 +1,138 @@
+import { useState, useEffect, useMemo } from "react";
+import { shopApi, type GraphQLCategory } from "@/lib/api/shop";
+import { fetchMenuBySlug } from "@/graphql/queries/getMenuBySlug";
+import { normalizeInternalUrl } from "@/lib/urls/normalizeInternalUrl";
+
+export type CategoryNode = {
+  id: string;
+  name: string;
+  slug?: string;
+  children?: CategoryNode[];
+};
+
+export type MenuItem = {
+  id: string;
+  name: string;
+  url: string;
+  level: number;
+  metadata?: Array<{
+    key: string;
+    value: string;
+  }>;
+  children?: MenuItem[];
+};
+
+export const useNavbarData = () => {
+  const [categories, setCategories] = useState<Array<CategoryNode>>([]);
+  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      setError(null);
+      
+      try {
+        // Fetch categories and menu data in parallel
+        const [categoriesResult, menuResult] = await Promise.allSettled([
+          fetchCategories(),
+          fetchMenuData()
+        ]);
+
+        // Handle categories result
+        if (categoriesResult.status === 'fulfilled') {
+          setCategories(categoriesResult.value);
+        } else {
+          console.warn('Categories fetch failed:', categoriesResult.reason);
+          setCategories([]);
+        }
+
+        // Handle menu result
+        if (menuResult.status === 'fulfilled') {
+          setMenuItems(menuResult.value);
+        } else {
+          console.warn('Menu fetch failed:', menuResult.reason);
+          setMenuItems([]);
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Unknown error';
+        console.warn('Data fetch failed:', message);
+        setError(message);
+        setCategories([]);
+        setMenuItems([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const transformedCategories = useMemo(() => {
+    return categories.map(category => ({
+      ...category,
+      children: category.children || []
+    }));
+  }, [categories]);
+
+  return {
+    categories: transformedCategories,
+    menuItems,
+    loading,
+    error,
+    hasData: categories.length > 0 || menuItems.length > 0
+  };
+};
+
+const fetchCategories = async (): Promise<CategoryNode[]> => {
+  try {
+    // Fetch categories from GraphQL API (same as shop page)
+    const channel =
+      process.env.NEXT_PUBLIC_SALEOR_CHANNEL?.trim() || "default-channel";
+    const categoriesResponse = await shopApi.getGraphQLCategories({ channel });
+    
+    // Transform GraphQL categories to match expected format
+    const buildHierarchy = (categories: GraphQLCategory[], parentId: string | null = null): CategoryNode[] => {
+      return categories
+        .filter(cat => {
+          if (parentId === null) {
+            return !cat.parent; // Root categories
+          }
+          return cat.parent?.id === parentId;
+        })
+        .map(category => ({
+          id: category.id,
+          name: category.name,
+          slug: category.slug, // Use Saleor's slug field
+          children: buildHierarchy(categories, category.id)
+        }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+    };
+
+    const categoryNodes = categoriesResponse.categories.edges.map(edge => edge.node);
+    return buildHierarchy(categoryNodes);
+  } catch (error) {
+    console.error('Failed to fetch categories from GraphQL API:', error);
+    return [];
+  }
+};
+
+const fetchMenuData = async (): Promise<MenuItem[]> => {
+  const menuData = await fetchMenuBySlug("navbar");
+  if (
+    menuData &&
+    typeof menuData === "object" &&
+    "items" in menuData &&
+    Array.isArray(menuData.items)
+  ) {
+    const normalize = (items: MenuItem[]): MenuItem[] =>
+      items.map((i) => ({
+        ...i,
+        url: i.url ? normalizeInternalUrl(i.url) : i.url,
+        children: i.children ? normalize(i.children) : i.children,
+      }));
+    return normalize(menuData.items as MenuItem[]);
+  }
+  return [];
+};

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

@@ -0,0 +1,66 @@
+import { useState, useEffect, useCallback } from "react";
+import { usePathname } from "next/navigation";
+
+export const useNavbarState = () => {
+  const [isAccountOpen, setIsAccountOpen] = useState(false);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const [isHamMenuOpen, setIsHamMenuOpen] = useState(() => false);
+  const [isEnableSearch, setIsEnableSearch] = useState(() => false);
+  const pathName = usePathname();
+
+  // Close account menu on route change
+  useEffect(() => {
+    setIsAccountOpen(false);
+  }, [pathName]);
+
+  // Close account menu on Esc key
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsAccountOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+
+  const isActive = useCallback((href: string) => 
+    pathName === href || pathName.startsWith(`${href}/`),
+    [pathName]
+  );
+
+  const toggleAccount = useCallback(() => {
+    setIsAccountOpen((v) => !v);
+  }, []);
+
+  const toggleHamMenu = useCallback(() => {
+    // Add protection against rapid toggling from extensions
+    setIsHamMenuOpen((prev) => {
+      // Ensure we always get a clean boolean value
+      const currentState = Boolean(prev);
+      return !currentState;
+    });
+  }, []);
+
+  const toggleSearch = useCallback(() => {
+    setIsEnableSearch((prev) => {
+      // Ensure we always get a clean boolean value  
+      const currentState = Boolean(prev);
+      return !currentState;
+    });
+  }, []);
+
+  return {
+    isAccountOpen,
+    setIsAccountOpen,
+    isLoggingOut,
+    setIsLoggingOut,
+    isHamMenuOpen,
+    setIsHamMenuOpen,
+    isEnableSearch,
+    setIsEnableSearch,
+    pathName,
+    isActive,
+    toggleAccount,
+    toggleHamMenu,
+    toggleSearch
+  };
+};

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

@@ -0,0 +1,116 @@
+"use client";
+
+import Link from "next/link";
+import { NoProductFoundIcon } from "@/app/utils/svgs/noProductFoundIcon";
+import PrimaryButton from "../../reuseableUI/primaryButton";
+type CategoryNode = {
+  id: string;
+  name: string;
+  slug?: string;
+  children?: CategoryNode[];
+};
+
+interface MegaMenuDropdownProps {
+  isOpen: boolean;
+  categories: CategoryNode[];
+  categoriesLoading: boolean;
+  onClose: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+}
+
+export default function MegaMenuDropdown({
+  isOpen,
+  categories,
+  categoriesLoading,
+  onClose,
+  onMouseEnter,
+  onMouseLeave,
+}: MegaMenuDropdownProps) {
+  // Show all 100 categories directly in navigation
+
+  return (
+    <div
+      style={{ backgroundColor: "white" }}
+      className={`absolute top-full max-h-[400px] overflow-y-auto left-0 shadow-[0_10px_20px_0_rgba(0,0,0,0.10)] p-6 z-50 mt-1 transition-opacity duration-300 ${
+        isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+      }`}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <div className="min-w-[664px] mx-auto">
+        {categoriesLoading ? (
+          <div className="flex flex-col items-center justify-center py-8">
+            <div className="animate-pulse">
+              <div className="rounded-full bg-[var(--color-secondary-200)] p-6">
+                <div className="w-8 h-8 bg-[var(--color-secondary-300)] rounded-full"></div>
+              </div>
+            </div>
+            <p className="text-sm text-[var(--color-secondary-600)] mt-4 font-secondary">
+              Loading categories...
+            </p>
+          </div>
+        ) : categories.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-8">
+            <div className="rounded-full bg-[var(--color-secondary-200)] p-6">
+              <span>{NoProductFoundIcon}</span>
+            </div>
+            <h3 className="text-sm font-semibold uppercase text-[var(--color-secondary-800)] mt-4 -tracking-[0.05px] font-secondary">
+              No Categories Found
+            </h3>
+            <p className="text-xs text-[var(--color-secondary-600)] mt-1 -tracking-[0.035px] font-secondary">
+              Categories will appear here when available.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <div className="grid grid-cols-3 gap-12">
+              {categories.map((category) => (
+                <div key={category.id} className="group/category">
+                  <Link
+                    href={`/category/${encodeURIComponent(
+                      category.slug || category.id
+                    )}`}
+                    onClick={onClose}
+                    className="text-sm font-semibold uppercase leading-4 tracking-[-0.03px] inline-block hover:text-[var(--color-primary-500)]  transition-all duration-300 relative group"
+                  >
+                    <span className="relative">{category.name}</span>
+                  </Link>
+                  {category.children?.length ? (
+                    <ul className="space-y-2 mt-3">
+                      {category.children.map((child) => (
+                        <li
+                          key={child.id}
+                          className="text-sm leading-4 tracking-[-0.03px]"
+                        >
+                          <Link
+                            href={`/category/${encodeURIComponent(
+                              child.slug || child.id
+                            )}`}
+                            onClick={onClose}
+                            className="text-[var(--color-secondary-600)] hover:text-[var(--color-primary-500)]  transition-all duration-300 inline-block  relative group"
+                          >
+                            <span className="relative">{child.name}</span>
+                          </Link>
+                        </li>
+                      ))}
+                    </ul>
+                  ) : null}
+                </div>
+              ))}
+            </div>
+
+            {/* All categories are shown directly */}
+
+            {/* View All Products Link */}
+            <div className="flex justify-center pt-2">
+              <Link href="/products/all" onClick={onClose}>
+                <PrimaryButton content="View All Products" className="text-sm capitalize" />
+              </Link>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,121 @@
+"use client";
+
+import type { CategoryNode, MenuItem } from "@/hooks/serverNavbarData";
+import { useCartSync } from "@/hooks/useCartSync";
+import useGlobalStore from "@/store/useGlobalStore";
+import { useCallback, useMemo } from "react";
+import { MobileNavbar } from "./components/MobileNavbar";
+import { NavbarActions } from "./components/NavbarActions";
+import { NavbarBrand } from "./components/NavbarBrand";
+import { NavigationLinks } from "./components/NavigationLinks";
+import HamMenuSlide from "./hamMenuSlide";
+import { useNavbarState } from "./hooks/useNavbarState";
+import { navbarStyles } from "./styles/navbarStyles";
+
+interface NavBarProps {
+  categories: CategoryNode[];
+  menuItems: MenuItem[];
+}
+
+export const NavBar = ({ categories, menuItems }: NavBarProps) => {
+  const {
+    isAccountOpen,
+    setIsAccountOpen,
+    isLoggingOut,
+    setIsLoggingOut,
+    isHamMenuOpen,
+    setIsHamMenuOpen,
+    isEnableSearch,
+    isActive,
+    toggleAccount,
+    toggleHamMenu,
+    toggleSearch,
+  } = useNavbarState();
+
+  // Global state
+  const logout = useGlobalStore((s) => s.logout);
+  const isLoggedIn = useGlobalStore((s) => s.isLoggedIn);
+  const totalItems = useGlobalStore((s) => s.totalItems);
+  const { syncingCart } = useCartSync();
+
+  // Memoized brand configuration
+  const brandConfig = useMemo(() => {
+    const TENANT_NAME = process.env.NEXT_PUBLIC_TENANT_NAME || "default";
+    const brandName = TENANT_NAME || "Next.js Theme System";
+    const logo =
+      process.env.NEXT_PUBLIC_LOGO_URL ||
+      "https://webshopmanager.com/files/images/logo.png";
+    return { brandName, logo };
+  }, []);
+
+  // Memoized logout handler
+  const handleLogout = useCallback(async () => {
+    if (isLoggingOut) return;
+    try {
+      setIsLoggingOut(true);
+      setIsAccountOpen(false);
+      await logout();
+    } catch {
+      // Hard redirect fallback
+      window.location.href = "/";
+    } finally {
+      setIsLoggingOut(false);
+    }
+  }, [isLoggingOut, logout, setIsAccountOpen, setIsLoggingOut]);
+
+  return (
+    <>
+      <MobileNavbar
+        {...brandConfig}
+        isEnableSearch={isEnableSearch}
+        toggleSearch={toggleSearch}
+        isHamMenuOpen={isHamMenuOpen}
+        toggleHamMenu={toggleHamMenu}
+        isLoggedIn={isLoggedIn}
+        totalItems={totalItems}
+        syncingCart={syncingCart}
+        isActive={isActive}
+      />
+
+      {/* Desktop Menu */}
+      <nav className={navbarStyles.desktopContainer}>
+        <div className={navbarStyles.linksContainer}>
+          <NavbarBrand {...brandConfig} />
+        </div>
+
+        <NavbarActions
+          isLoggedIn={isLoggedIn}
+          isAccountOpen={isAccountOpen}
+          setIsAccountOpen={setIsAccountOpen}
+          isLoggingOut={isLoggingOut}
+          handleLogout={handleLogout}
+          totalItems={totalItems}
+          syncingCart={syncingCart}
+          toggleAccount={toggleAccount}
+          isActive={isActive}
+        />
+      </nav>
+      <div
+        style={{
+          background: "linear-gradient(to bottom, #c1272d 0%, #7c0e19 100%)",
+        }}
+        className="hidden xl:block"
+      >
+        <nav className="hidden xl:flex w-full items-center justify-center container gap-7 py-4 px-5 2xl:px-20 text-sm font-semibold mx-auto">
+          <NavigationLinks
+            categories={categories}
+            categoriesLoading={false}
+            menuItems={menuItems}
+            isActive={isActive}
+          />
+        </nav>
+      </div>
+
+      <HamMenuSlide
+        isHamMenuOpen={isHamMenuOpen}
+        setIsHamMenuOpen={setIsHamMenuOpen}
+        menuItems={menuItems}
+      />
+    </>
+  );
+};