623 lines
33 KiB
TypeScript
623 lines
33 KiB
TypeScript
"use client";
|
||
import React, { useState, useRef, useEffect } from "react";
|
||
import { Search, ChevronDown, Menu, X, Pill, ShieldCheck, HeartPulse, Sparkles, ShoppingBag, User, PlusCircle, Check, Building2, LogIn, Wallet, LogOut, MapPin, FileHeart, Dog, Cat } from "lucide-react";
|
||
import { motion, AnimatePresence } from "motion/react";
|
||
import Link from "next/link";
|
||
import { useCartStore } from "../lib/store/cartStore";
|
||
import { usePetStore } from "../lib/store/usePetStore";
|
||
import { useUserStore } from "../lib/store/userStore";
|
||
import { useSettingsStore } from "../lib/store/settingsStore";
|
||
import { toast } from "sonner";
|
||
import HeaderButton from "./HeaderButton";
|
||
import AuthModal from "./AuthModal";
|
||
import { cn } from "../lib/utils";
|
||
import { productService } from "../lib/services/productService";
|
||
|
||
const MENU_ICONS: Record<string, React.ReactNode> = {
|
||
joints: <Pill className="w-5 h-5" />,
|
||
immune: <ShieldCheck className="w-5 h-5" />,
|
||
energy: <HeartPulse className="w-5 h-5" />,
|
||
"special-care": <Sparkles className="w-5 h-5" />,
|
||
};
|
||
|
||
export default function Header({
|
||
onNavigate,
|
||
onShopNavigate,
|
||
currentView,
|
||
onCartOpen,
|
||
onSearch,
|
||
onB2BOpen
|
||
}: {
|
||
onNavigate: (v: any) => void,
|
||
onShopNavigate: (c?: string, s?: string) => void,
|
||
currentView: string,
|
||
onCartOpen: () => void,
|
||
onSearch: (q: string) => void,
|
||
onB2BOpen: () => void
|
||
}) {
|
||
const [isMegaMenuOpen, setIsMegaMenuOpen] = useState(false);
|
||
const [isSearchFocused, setIsSearchFocused] = useState(false);
|
||
const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
|
||
const [isPetSwitcherOpen, setIsPetSwitcherOpen] = useState(false);
|
||
const [searchQuery, setSearchQuery] = useState("");
|
||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||
const [isMobileSolutionsOpen, setIsMobileSolutionsOpen] = useState(false);
|
||
const [menuItems, setMenuItems] = useState<{
|
||
id: string;
|
||
title: string;
|
||
icon: React.ReactNode;
|
||
solutions: string[];
|
||
}[]>([
|
||
{
|
||
id: "joints",
|
||
title: "مفاصل و استخوان",
|
||
icon: MENU_ICONS["joints"],
|
||
solutions: ["لنگیدن", "سختی در بلند شدن", "درد مفاصل", "رشد سریع تولهسگ", "پاهای پرانتزی", "ضعف تاندون"]
|
||
},
|
||
{
|
||
id: "immune",
|
||
title: "تقویت سیستم ایمنی و گوارش",
|
||
icon: MENU_ICONS["immune"],
|
||
solutions: ["ضعف بعد از بیماری", "بیاشتهایی", "بعد از زایمان", "اسهال", "مشکلات گوارشی"]
|
||
},
|
||
{
|
||
id: "energy",
|
||
title: "ویتامینها و انرژیبخشها",
|
||
icon: MENU_ICONS["energy"],
|
||
solutions: ["نفسنفس زدن", "خستگی", "سن بالا", "بیحالی"]
|
||
},
|
||
{
|
||
id: "special-care",
|
||
title: "مراقبتهای ویژه (پوست، دندان و چشم)",
|
||
icon: MENU_ICONS["special-care"],
|
||
solutions: ["ریزش مو", "خشکی پوست", "خارش", "جرم دندان", "سوزش چشم"]
|
||
}
|
||
]);
|
||
const petMenuRef = useRef<HTMLDivElement>(null);
|
||
|
||
const { getTotalItems } = useCartStore();
|
||
const { pets, activePetId, setActivePet, getActivePet } = usePetStore();
|
||
const { role, isLoggedIn, logout, profile } = useUserStore();
|
||
const activePet = getActivePet();
|
||
const getText = useSettingsStore(state => state.getText);
|
||
|
||
useEffect(() => {
|
||
const loadNavFilters = async () => {
|
||
try {
|
||
const data = await productService.getNavigationFilters();
|
||
if (data && data.length > 0) {
|
||
const mapped = data.map(item => ({
|
||
id: item.slug,
|
||
title: item.name,
|
||
icon: MENU_ICONS[item.slug] || <Pill className="w-5 h-5" />,
|
||
solutions: item.symptoms || []
|
||
}));
|
||
setMenuItems(mapped);
|
||
}
|
||
} catch (e) {
|
||
console.error("Failed to load navigation filters:", e);
|
||
}
|
||
};
|
||
loadNavFilters();
|
||
}, []);
|
||
|
||
// Click Outside logic
|
||
useEffect(() => {
|
||
function handleClickOutside(event: MouseEvent) {
|
||
if (petMenuRef.current && !petMenuRef.current.contains(event.target as Node)) {
|
||
setIsPetSwitcherOpen(false);
|
||
}
|
||
}
|
||
document.addEventListener("mousedown", handleClickOutside);
|
||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||
}, []);
|
||
|
||
const handleSearch = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (searchQuery.trim()) {
|
||
onSearch(searchQuery);
|
||
setIsSearchFocused(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<AuthModal isOpen={isAuthModalOpen} onClose={() => setIsAuthModalOpen(false)} />
|
||
|
||
<div className="bg-canina-gold text-canina-dark text-xs font-black py-2.5 text-center font-vazir tracking-wider flex items-center justify-center gap-2">
|
||
<span>🚚</span>
|
||
<span>{getText('shipping_notice', "ارسال رایگان برای سفارشهای بالای ۱۵۰ هزار تومان")}</span>
|
||
</div>
|
||
|
||
<header className="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-medical-gray-100 shadow-sm">
|
||
<div className="max-w-7xl mx-auto py-2 min-[470px]:py-0 min-[470px]:h-24 flex flex-col min-[470px]:flex-row min-[470px]:items-center justify-between gap-2 min-[470px]:gap-4 px-3 sm:px-6 lg:px-8" dir="rtl">
|
||
{/* Logo & Mobile Toggle Area */}
|
||
<div className="flex items-center justify-between min-[470px]:justify-start gap-2 w-full min-[470px]:w-auto">
|
||
<div className="flex items-center gap-2">
|
||
{/* Mobile Menu Toggle (visible below 800px) */}
|
||
<button
|
||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||
className="min-[800px]:hidden p-2 rounded-xl text-medical-gray-600 hover:bg-medical-gray-50 transition-all flex-shrink-0"
|
||
aria-label="منو"
|
||
>
|
||
{isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||
</button>
|
||
|
||
{/* Logo Section */}
|
||
<Link
|
||
href="/"
|
||
className="flex items-center gap-2 sm:gap-3 cursor-pointer group"
|
||
onClick={() => setIsMobileMenuOpen(false)}
|
||
>
|
||
<div className="w-9 h-9 sm:w-12 sm:h-12 bg-canina-blue rounded-2xl flex items-center justify-center text-white font-bold text-lg sm:text-2xl group-hover:bg-medical-gray-900 transition-all shadow-xl shadow-canina-blue/20 italic flex-shrink-0">C</div>
|
||
<div className="flex flex-col justify-center gap-0.5 sm:gap-1">
|
||
<span className="text-canina-blue font-black text-base sm:text-2xl tracking-tighter italic font-sans flex items-center gap-1.5 sm:gap-2 leading-none whitespace-nowrap">
|
||
Canina
|
||
<span className="text-xs sm:text-sm not-italic font-medium border-r-2 border-medical-gray-200 pr-1.5 sm:pr-2 font-vazir">
|
||
{getText('brand_name_fa', "ایران")}
|
||
</span>
|
||
</span>
|
||
<span className="text-[8px] sm:text-[9px] text-medical-gray-400 font-bold uppercase tracking-wider font-vazir leading-none whitespace-nowrap">
|
||
{getText('brand_subtitle', "نماینده رسمی Canina Pharma GmbH آلمان")}
|
||
</span>
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Navigation Items: Centered on XL screens (1224px+) */}
|
||
<nav className="hidden xl:flex items-center gap-1 flex-grow justify-center h-full">
|
||
<div
|
||
className="relative h-full flex items-center group"
|
||
onMouseEnter={() => setIsMegaMenuOpen(true)}
|
||
onMouseLeave={() => setIsMegaMenuOpen(false)}
|
||
>
|
||
<button className={`flex items-center justify-center gap-1.5 px-3 xl:px-4 py-3 rounded-xl text-xs xl:text-sm font-black transition-all whitespace-nowrap focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none min-h-[48px] ${isMegaMenuOpen ? 'bg-medical-gray-50 text-canina-blue' : 'text-medical-gray-600 hover:bg-medical-gray-50 hover:text-canina-blue'} font-vazir`}>
|
||
{getText('nav_solutions', "دسته بندی درمانی")}
|
||
<ChevronDown className={`w-4 h-4 transition-transform duration-300 ${isMegaMenuOpen ? 'rotate-180' : ''}`} />
|
||
</button>
|
||
|
||
<AnimatePresence>
|
||
{isMegaMenuOpen && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 15, scale: 0.98 }}
|
||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||
exit={{ opacity: 0, y: 15, scale: 0.98 }}
|
||
className="absolute top-[80%] right-0 w-[680px] bg-white border border-medical-gray-100 shadow-2xl rounded-[2.5rem] p-8 grid grid-cols-2 gap-8 z-50 pointer-events-auto"
|
||
>
|
||
{menuItems.map((item, idx) => (
|
||
<div key={idx} className="group/item">
|
||
<Link
|
||
href={`/shop?category=${item.id}`}
|
||
onClick={() => setIsMegaMenuOpen(false)}
|
||
className="flex items-center gap-3 mb-4 cursor-pointer block"
|
||
>
|
||
<div className="p-2.5 bg-medical-gray-50 rounded-xl text-canina-blue group-hover/item:bg-canina-blue group-hover/item:text-white transition-all shadow-sm">
|
||
{item.icon}
|
||
</div>
|
||
<h4 className="font-black text-medical-gray-900 text-sm font-vazir">{item.title}</h4>
|
||
</Link>
|
||
{item.solutions.length > 0 ? (
|
||
<div className="flex flex-wrap gap-1.5 border-r-2 border-medical-gray-100 pr-3">
|
||
{item.solutions.slice(0, 8).map((sol, sIdx) => (
|
||
<Link
|
||
key={sIdx}
|
||
href={`/shop?category=${item.id}&symptom=${encodeURIComponent(sol)}`}
|
||
className="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold bg-medical-gray-50 border border-medical-gray-200 text-medical-gray-500 hover:bg-canina-blue/5 hover:border-canina-blue/30 hover:text-canina-blue transition-all cursor-pointer font-vazir whitespace-nowrap"
|
||
onClick={() => setIsMegaMenuOpen(false)}
|
||
>
|
||
{sol}
|
||
</Link>
|
||
))}
|
||
{item.solutions.length > 8 && (
|
||
<Link
|
||
href={`/shop?category=${item.id}`}
|
||
className="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold text-canina-blue hover:underline font-vazir whitespace-nowrap"
|
||
onClick={() => setIsMegaMenuOpen(false)}
|
||
>
|
||
+{item.solutions.length - 8} بیشتر
|
||
</Link>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<p className="text-[11px] text-medical-gray-400 border-r-2 border-medical-gray-100 pr-3 font-vazir">مشاهده همه محصولات</p>
|
||
)}
|
||
</div>
|
||
))}
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
|
||
{[
|
||
{ id: 'shop', label: getText('nav_products', 'محصولات تخصصی'), href: '/shop' },
|
||
{ id: 'wiki', label: getText('nav_wiki', 'دانشنامه علمی'), href: '/wiki' },
|
||
{ id: 'blog', label: getText('nav_blog', 'مجله سلامت پت'), href: '/blog' },
|
||
{ id: 'profile', label: getText('nav_pet_profiles', 'شناسنامه پت'), href: '/profile' }
|
||
].map((item) => (
|
||
<Link
|
||
key={item.id}
|
||
href={item.href}
|
||
className={`px-3 xl:px-4 py-3 rounded-xl text-xs xl:text-sm font-black transition-all font-vazir whitespace-nowrap focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none min-h-[48px] flex items-center justify-center ${currentView === item.id ? 'bg-canina-blue/5 text-canina-blue' : 'text-medical-gray-600 hover:bg-medical-gray-50 hover:text-canina-blue'}`}
|
||
>
|
||
{item.label}
|
||
</Link>
|
||
))}
|
||
</nav>
|
||
|
||
{/* Action Area */}
|
||
<div className="flex items-center gap-2 sm:gap-4 flex-shrink-0 justify-end h-auto md:h-16 pl-1 sm:pl-2">
|
||
|
||
{/* Elastic Search */}
|
||
<div className="relative flex items-center justify-end z-20">
|
||
<AnimatePresence>
|
||
{isSearchFocused && (
|
||
<motion.div
|
||
initial={{ width: 0, opacity: 0 }}
|
||
animate={{ width: 260, opacity: 1 }}
|
||
exit={{ width: 0, opacity: 0 }}
|
||
transition={{ type: "spring", damping: 25, stiffness: 220 }}
|
||
className="absolute right-0 top-1/2 -translate-y-1/2 bg-white border border-canina-blue/30 border-l rounded-2xl shadow-xl shadow-canina-blue/5 overflow-hidden h-10 sm:h-12 flex items-center pr-10 pl-3 z-25"
|
||
>
|
||
<form onSubmit={handleSearch} className="w-full flex items-center">
|
||
<input
|
||
autoFocus
|
||
type="text"
|
||
value={searchQuery}
|
||
onChange={e => setSearchQuery(e.target.value)}
|
||
onBlur={() => !searchQuery && setIsSearchFocused(false)}
|
||
placeholder="جستجو…"
|
||
dir="rtl"
|
||
className="w-full bg-transparent py-2 pr-2 text-[12px] font-black outline-none font-vazir text-medical-gray-900 text-right placeholder:text-medical-gray-400 placeholder:text-right"
|
||
/>
|
||
<input type="submit" className="hidden" />
|
||
</form>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<HeaderButton
|
||
variant={isSearchFocused ? "primary" : "secondary"}
|
||
className={cn(
|
||
"w-10 h-10 sm:w-12 sm:h-12 transition-all duration-300",
|
||
isSearchFocused
|
||
? "z-30 bg-canina-blue text-white rounded-r-2xl rounded-l-none border border-canina-blue border-l-0 shadow-none"
|
||
: "rounded-2xl"
|
||
)}
|
||
onClick={() => {
|
||
if (isSearchFocused && searchQuery.trim()) {
|
||
onSearch(searchQuery);
|
||
setIsSearchFocused(false);
|
||
} else {
|
||
setIsSearchFocused(!isSearchFocused);
|
||
}
|
||
}}
|
||
>
|
||
<Search className={cn("w-4 h-4 sm:w-5 sm:h-5", isSearchFocused ? "text-white" : "text-canina-blue")} />
|
||
</HeaderButton>
|
||
</div>
|
||
|
||
<div className="flex gap-1.5 sm:gap-2 items-center h-12">
|
||
{isLoggedIn ? (
|
||
<div className="flex items-center h-full gap-1.5 sm:gap-2 p-1 bg-medical-gray-50/50 border border-medical-gray-100 rounded-3xl">
|
||
{/* User Name (Direct link to dashboard) */}
|
||
<div
|
||
className="flex items-center gap-1.5 sm:gap-2.5 px-2.5 sm:px-4 py-2 hover:bg-white rounded-2xl cursor-pointer transition-all border border-transparent hover:border-medical-gray-200"
|
||
onClick={() => onNavigate("user-dashboard")}
|
||
>
|
||
<User className="w-4 h-4 sm:w-5 sm:h-5 text-canina-blue" />
|
||
<span className="text-[12px] sm:text-[14px] font-black font-vazir text-medical-gray-900 leading-none">
|
||
{profile.firstName}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Separator Line */}
|
||
<div className="w-[1.5px] h-4 sm:h-5 bg-medical-gray-200" />
|
||
|
||
{/* Pet Name & Switcher */}
|
||
<div className="relative h-full flex items-center" ref={petMenuRef}>
|
||
<div
|
||
className={cn(
|
||
"flex items-center gap-1.5 sm:gap-2.5 px-2.5 sm:px-4 py-2 rounded-2xl transition-all cursor-pointer",
|
||
isPetSwitcherOpen ? "bg-canina-blue text-white shadow-lg shadow-canina-blue/20" : "text-canina-blue hover:bg-white"
|
||
)}
|
||
onClick={() => setIsPetSwitcherOpen(!isPetSwitcherOpen)}
|
||
>
|
||
{activePet?.type === "گربه" ? (
|
||
<Cat className={cn("w-4 h-4 sm:w-5 sm:h-5", isPetSwitcherOpen ? "text-white" : "text-canina-blue/60")} />
|
||
) : (
|
||
<Dog className={cn("w-4 h-4 sm:w-5 sm:h-5", isPetSwitcherOpen ? "text-white" : "text-canina-blue/60")} />
|
||
)}
|
||
<span className={cn("text-[12px] sm:text-[14px] font-black font-vazir leading-none", isPetSwitcherOpen ? "text-white" : "text-canina-blue")}>
|
||
{activePet?.name || "بدون پت"}
|
||
</span>
|
||
<ChevronDown className={cn("w-3.5 h-3.5 sm:w-4 sm:h-4 transition-transform", isPetSwitcherOpen ? "rotate-180" : "")} />
|
||
</div>
|
||
|
||
<AnimatePresence>
|
||
{isPetSwitcherOpen && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10, scale: 0.95 }}
|
||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||
exit={{ opacity: 0, y: 10, scale: 0.95 }}
|
||
className="absolute top-[125%] left-0 w-72 bg-white border border-medical-gray-100 shadow-2xl rounded-[1.5rem] p-5 z-50 pointer-events-auto"
|
||
>
|
||
<div className="text-[9px] font-black text-medical-gray-400 uppercase tracking-[0.2em] mb-4 pr-1">{getText('nav_pet_switcher_title', "تغییر پت یا مدیریت حساب")}</div>
|
||
<div className="space-y-1 mb-4">
|
||
{pets.map(pet => (
|
||
<div
|
||
key={pet.id}
|
||
className={cn(
|
||
"w-full flex items-center justify-between p-3 rounded-xl transition-all group/item",
|
||
activePetId === pet.id ? "bg-canina-blue/5 text-canina-blue" : "hover:bg-medical-gray-50 text-medical-gray-600"
|
||
)}
|
||
>
|
||
<div
|
||
className="flex items-center gap-3 flex-1 cursor-pointer"
|
||
onClick={() => {
|
||
setActivePet(pet.id);
|
||
setIsPetSwitcherOpen(false);
|
||
toast.success(`پت فعال به ${pet.name} تغییر یافت`);
|
||
}}
|
||
>
|
||
<div className={cn(
|
||
"w-8 h-8 rounded-lg flex items-center justify-center text-[11px] font-black transition-colors",
|
||
activePetId === pet.id ? "bg-canina-blue text-white" : "bg-medical-gray-100 text-medical-gray-400 group-hover/item:bg-medical-gray-200"
|
||
)}>
|
||
{pet.name[0]}
|
||
</div>
|
||
<span className="text-[13px] font-bold font-vazir">{pet.name}</span>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-1">
|
||
{activePetId === pet.id && <Check className="w-4 h-4 ml-2" />}
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setActivePet(pet.id);
|
||
onNavigate({ view: "profile", subview: "detail" });
|
||
setIsPetSwitcherOpen(false);
|
||
}}
|
||
className="p-1.5 rounded-lg hover:bg-canina-blue hover:text-white transition-all text-medical-gray-300 hover:shadow-lg"
|
||
title="مشاهده شناسنامه سلامت"
|
||
>
|
||
<FileHeart className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="pt-4 border-t border-medical-gray-100 space-y-1">
|
||
<button
|
||
onClick={() => { onNavigate({ view: "profile", subview: "add" }); setIsPetSwitcherOpen(false); }}
|
||
className="w-full flex items-center gap-3 p-3 text-canina-blue hover:bg-canina-blue/5 rounded-xl transition-all text-[12px] font-black font-vazir"
|
||
>
|
||
<PlusCircle className="w-5 h-5" />
|
||
{getText('nav_register_pet', "ثبت همدم (Pet) جدید")}
|
||
</button>
|
||
<button
|
||
onClick={() => { onNavigate({ view: "user-dashboard" }); setIsPetSwitcherOpen(false); }}
|
||
className="w-full flex items-center gap-3 p-3 text-medical-gray-600 hover:bg-medical-gray-50 rounded-xl transition-all text-[12px] font-bold font-vazir"
|
||
>
|
||
<Wallet className="w-5 h-5" />
|
||
{getText('nav_wallet_orders', "کیف پول و سفارشات")}
|
||
</button>
|
||
<button
|
||
onClick={() => { logout(); setIsPetSwitcherOpen(false); }}
|
||
className="w-full flex items-center gap-3 p-3 text-red-500 hover:bg-red-50 rounded-xl transition-all text-[12px] font-bold font-vazir mt-1"
|
||
>
|
||
<LogOut className="w-5 h-5" />
|
||
{getText('nav_logout', "خروج از حساب کانینا")}
|
||
</button>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<HeaderButton
|
||
variant="outline"
|
||
layout="row"
|
||
className="px-3 sm:px-6 h-10 sm:h-12 text-xs sm:text-sm font-black flex items-center justify-center"
|
||
onClick={() => setIsAuthModalOpen(true)}
|
||
icon={<LogIn className="w-4 h-4 sm:w-5 sm:h-5 text-canina-blue" />}
|
||
>
|
||
<span className="hidden xs:inline">{getText('nav_login', "ورود / ثبتنام")}</span>
|
||
<span className="xs:hidden">ورود</span>
|
||
</HeaderButton>
|
||
)}
|
||
|
||
<HeaderButton
|
||
variant="primary"
|
||
className="w-12 sm:w-16 h-10 sm:h-12"
|
||
onClick={onCartOpen}
|
||
badge={getTotalItems()}
|
||
icon={<ShoppingBag className="w-5 h-5 sm:w-6 sm:h-6" />}
|
||
>
|
||
<div className="hidden sm:block text-[8px] font-black tracking-tight whitespace-nowrap mt-0.5">{getText('nav_cart', "سبد خرید")}</div>
|
||
</HeaderButton>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Medium Screen Sub-Navbar (Visible only between 800px and 1224px) */}
|
||
<div className="hidden min-[800px]:flex xl:hidden border-t border-medical-gray-100 bg-medical-gray-50/50 py-2 px-6 justify-center items-center gap-2 font-vazir relative" dir="rtl">
|
||
<div className="relative">
|
||
<button
|
||
onClick={() => setIsMegaMenuOpen(!isMegaMenuOpen)}
|
||
className={`px-3 py-1.5 rounded-lg text-xs font-black transition-all flex items-center gap-1.5 whitespace-nowrap ${isMegaMenuOpen ? 'bg-canina-blue text-white shadow-sm' : 'text-medical-gray-700 hover:bg-white'}`}
|
||
>
|
||
{getText('nav_solutions', "دسته بندی درمانی")}
|
||
<ChevronDown className={`w-3.5 h-3.5 transition-transform ${isMegaMenuOpen ? 'rotate-180 text-white' : 'text-canina-blue'}`} />
|
||
</button>
|
||
|
||
<AnimatePresence>
|
||
{isMegaMenuOpen && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10, scale: 0.98 }}
|
||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||
exit={{ opacity: 0, y: 10, scale: 0.98 }}
|
||
className="absolute top-[120%] right-0 w-[600px] max-w-[90vw] bg-white border border-medical-gray-100 shadow-2xl rounded-[2rem] p-6 grid grid-cols-2 gap-6 z-50 pointer-events-auto"
|
||
>
|
||
{menuItems.map((item, idx) => (
|
||
<div key={idx} className="group/item">
|
||
<Link
|
||
href={`/shop?category=${item.id}`}
|
||
onClick={() => setIsMegaMenuOpen(false)}
|
||
className="flex items-center gap-3 mb-3 cursor-pointer block"
|
||
>
|
||
<div className="p-2 bg-medical-gray-50 rounded-xl text-canina-blue group-hover/item:bg-canina-blue group-hover/item:text-white transition-all shadow-sm">
|
||
{item.icon}
|
||
</div>
|
||
<h4 className="font-black text-medical-gray-900 text-xs font-vazir">{item.title}</h4>
|
||
</Link>
|
||
{item.solutions.length > 0 && (
|
||
<div className="flex flex-wrap gap-1 border-r-2 border-medical-gray-100 pr-2">
|
||
{item.solutions.slice(0, 6).map((sol, sIdx) => (
|
||
<Link
|
||
key={sIdx}
|
||
href={`/shop?category=${item.id}&symptom=${encodeURIComponent(sol)}`}
|
||
className="inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-bold bg-medical-gray-50 border border-medical-gray-200 text-medical-gray-500 hover:bg-canina-blue/5 hover:border-canina-blue/30 hover:text-canina-blue transition-all cursor-pointer font-vazir whitespace-nowrap"
|
||
onClick={() => setIsMegaMenuOpen(false)}
|
||
>
|
||
{sol}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
<div className="w-[1px] h-4 bg-medical-gray-200" />
|
||
{[
|
||
{ id: 'shop', label: getText('nav_products', 'محصولات تخصصی'), href: '/shop' },
|
||
{ id: 'wiki', label: getText('nav_wiki', 'دانشنامه علمی'), href: '/wiki' },
|
||
{ id: 'blog', label: getText('nav_blog', 'مجله سلامت پت'), href: '/blog' },
|
||
{ id: 'profile', label: getText('nav_pet_profiles', 'شناسنامه پت'), href: '/profile' }
|
||
].map((item) => (
|
||
<Link
|
||
key={item.id}
|
||
href={item.href}
|
||
className={`px-3 py-1.5 rounded-lg text-xs font-black transition-all whitespace-nowrap ${currentView === item.id ? 'bg-canina-blue text-white shadow-sm' : 'text-medical-gray-600 hover:bg-white hover:text-canina-blue'}`}
|
||
>
|
||
{item.label}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</header>
|
||
|
||
{/* Mobile Drawer Menu */}
|
||
<AnimatePresence>
|
||
{isMobileMenuOpen && (
|
||
<>
|
||
{/* Backdrop */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 0.5 }}
|
||
exit={{ opacity: 0 }}
|
||
onClick={() => setIsMobileMenuOpen(false)}
|
||
className="fixed inset-0 bg-black z-40 min-[800px]:hidden"
|
||
/>
|
||
{/* Drawer */}
|
||
<motion.div
|
||
initial={{ x: "100%" }}
|
||
animate={{ x: 0 }}
|
||
exit={{ x: "100%" }}
|
||
transition={{ type: "spring", damping: 25, stiffness: 200 }}
|
||
className="fixed top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-white z-50 shadow-2xl p-6 flex flex-col gap-6 overflow-y-auto min-[800px]:hidden"
|
||
dir="rtl"
|
||
>
|
||
<div className="flex items-center justify-between border-b border-medical-gray-100 pb-4">
|
||
<Link href="/" className="flex items-center gap-3" onClick={() => setIsMobileMenuOpen(false)}>
|
||
<div className="w-10 h-10 bg-canina-blue rounded-xl flex items-center justify-center text-white font-bold text-xl italic">C</div>
|
||
<span className="text-canina-blue font-black text-xl italic font-sans">Canina</span>
|
||
</Link>
|
||
<button
|
||
onClick={() => setIsMobileMenuOpen(false)}
|
||
className="p-2 rounded-xl hover:bg-medical-gray-50 text-medical-gray-600 transition-all"
|
||
>
|
||
<X className="w-6 h-6" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Navigation Links */}
|
||
<nav className="flex flex-col gap-2">
|
||
{/* Treatment Solutions accordion */}
|
||
<div className="flex flex-col">
|
||
<button
|
||
onClick={() => setIsMobileSolutionsOpen(!isMobileSolutionsOpen)}
|
||
className="w-full flex items-center justify-between px-4 py-3 rounded-xl text-sm font-black text-medical-gray-600 hover:bg-medical-gray-50 transition-all font-vazir"
|
||
>
|
||
<span>{getText('nav_solutions', "دسته بندی درمانی")}</span>
|
||
<ChevronDown className={`w-4 h-4 transition-transform duration-300 ${isMobileSolutionsOpen ? 'rotate-180' : ''}`} />
|
||
</button>
|
||
<AnimatePresence>
|
||
{isMobileSolutionsOpen && (
|
||
<motion.div
|
||
initial={{ height: 0, opacity: 0 }}
|
||
animate={{ height: "auto", opacity: 1 }}
|
||
exit={{ height: 0, opacity: 0 }}
|
||
className="overflow-hidden mr-4 pr-2 border-r-2 border-medical-gray-100 mt-1 space-y-3"
|
||
>
|
||
{menuItems.map((item, idx) => (
|
||
<div key={idx} className="py-1">
|
||
<Link
|
||
href={`/shop?category=${item.id}`}
|
||
onClick={() => setIsMobileMenuOpen(false)}
|
||
className="text-[13px] font-bold text-medical-gray-800 font-vazir hover:text-canina-blue cursor-pointer flex items-center gap-2 block"
|
||
>
|
||
<span className="text-canina-blue/80">{item.icon}</span>
|
||
<span>{item.title}</span>
|
||
</Link>
|
||
<ul className="mt-1 space-y-1 mr-6">
|
||
{item.solutions.map((sol, sIdx) => (
|
||
<li key={sIdx}>
|
||
<Link
|
||
href={`/shop?category=${item.id}&symptoms=${sol}`}
|
||
className="text-[11px] text-medical-gray-500 hover:text-canina-blue cursor-pointer py-1 font-vazir block"
|
||
onClick={() => setIsMobileMenuOpen(false)}
|
||
>
|
||
{sol}
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
))}
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
|
||
{[
|
||
{ id: 'shop', label: getText('nav_products', 'محصولات تخصصی'), href: '/shop' },
|
||
{ id: 'wiki', label: getText('nav_wiki', 'دانشنامه علمی'), href: '/wiki' },
|
||
{ id: 'blog', label: getText('nav_blog', 'مجله سلامت پت'), href: '/blog' },
|
||
{ id: 'profile', label: getText('nav_pet_profiles', 'شناسنامه پت'), href: '/profile' }
|
||
].map((item) => (
|
||
<Link
|
||
key={item.id}
|
||
href={item.href}
|
||
onClick={() => setIsMobileMenuOpen(false)}
|
||
className={`w-full block text-right px-4 py-3 rounded-xl text-sm font-black transition-all font-vazir ${currentView === item.id
|
||
? 'bg-canina-blue/5 text-canina-blue'
|
||
: 'text-medical-gray-600 hover:bg-medical-gray-50'
|
||
}`}
|
||
>
|
||
{item.label}
|
||
</Link>
|
||
))}
|
||
</nav>
|
||
</motion.div>
|
||
</>
|
||
)}
|
||
</AnimatePresence>
|
||
</>
|
||
);
|
||
}
|