import { useState, useEffect } from "react"; import { Link } from "@tanstack/react-router"; import { Menu, X, Phone, Mail, Heart, ChevronDown, Search } from "lucide-react"; import { categoryLinkProps, liveCategories } from "@/lib/catalog"; import { getCatalogTaxonomy } from "@/lib/catalog.functions"; import { listSettings } from "@/lib/admin.functions"; import { FaFacebook, FaInstagram, FaTwitter, FaLinkedin, FaWhatsapp } from "react-icons/fa"; import { FaThreads } from "react-icons/fa6"; import { useQuery } from "@tanstack/react-query"; import { useServerFn } from "@tanstack/react-start"; import { getSiteBlocks } from "@/lib/site-blocks.functions"; import { useNavigate } from "@tanstack/react-router"; import { cn } from "@/lib/utils"; import { useTheme } from "@/components/ThemeProvider"; import { ThemeToggle } from "@/components/ThemeToggle"; import { Button } from "@/components/ui/button"; export function Navbar() { const { branding } = useTheme(); const [isScrolled, setIsScrolled] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [openGroup, setOpenGroup] = useState(null); const [query, setQuery] = useState(""); const navigate = useNavigate(); const submitSearch = (e: React.FormEvent) => { e.preventDefault(); const term = query.trim(); if (!term) return; setIsMobileMenuOpen(false); void navigate({ to: "/search", search: { q: term } }); }; useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50); }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); const [siteMode, setSiteMode] = useState<"business" | "store">("business"); useEffect(() => { // Check site mode from settings if possible, otherwise default // In a real app we'd query this or get it from ThemeContext const fetchMode = async () => { const settings = await listSettings(); if (settings["site_mode"] === "store") setSiteMode("store"); else setSiteMode("business"); }; fetchMode(); }, []); const loadBlocks = useServerFn(getSiteBlocks); const { data: blocks } = useQuery({ queryKey: ["site-blocks"], queryFn: () => loadBlocks() }); const social = blocks?.social; const navLinks = [ { name: "Customization", href: "/customization" }, { name: "About Us", href: "/about" }, { name: "Contact Us", href: "/contact" }, ...(siteMode === "store" ? [{ name: "Track Order", href: "/track" }] : []), ]; const loadCatalog = useServerFn(getCatalogTaxonomy); const { data: catalog } = useQuery({ queryKey: ["catalog-taxonomy"], queryFn: () => loadCatalog() }); const categoryMenus = liveCategories(catalog).map((cat) => ({ key: cat.slug, label: cat.name, linkProps: categoryLinkProps(cat.slug) as any, subLink: (sub: string) => categoryLinkProps(cat.slug, sub) as any, subs: cat.subcategories.filter((s) => s.enabled), })); return ( <> {/* Notification Bar */} {branding.showNotificationBar && (
{branding.notificationText}
)} {/* Top Info Bar */} {branding.showTopInfoBar && (
{branding.phone} {branding.email}
{branding.showSocialIcons && (
{social?.whatsapp && } {social?.facebook && } {social?.instagram && } {social?.twitter && } {social?.linkedin && } {social?.threads && }
)}
)} ); }