style: standardize breadcrumbs and integrated back button across all pages (Archive, Product, Blog, Blog detail, Wiki)
This commit is contained in:
parsa aghaei
parent
3683a768a8
commit
51b661542a
@ -365,45 +365,36 @@ export default function ArchivePage({
|
||||
<div className="min-h-screen bg-medical-gray-50 pb-20 px-4 pt-10 font-vazir" dir="rtl">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
|
||||
{/* Mobile Header & Filter Trigger */}
|
||||
<div className="lg:hidden mb-6 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Standard Breadcrumb Navigation & Integrated Back Button */}
|
||||
<div className="flex items-center justify-between mb-8 pb-4 border-b border-medical-gray-200/60 font-vazir">
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-medical-gray-400 overflow-x-auto whitespace-nowrap">
|
||||
<span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => router.push('/')}>خانه</span>
|
||||
<ChevronLeft className="w-3 h-3 text-medical-gray-300" />
|
||||
<span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => { setSelectedCategory("all"); }}>کاتالوگ</span>
|
||||
{selectedCategory !== "all" && (
|
||||
<>
|
||||
<ChevronLeft className="w-3 h-3 text-medical-gray-300" />
|
||||
<span className="text-canina-blue font-black">{CATEGORY_LABELS[selectedCategory] || selectedCategory}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="flex items-center gap-1 text-sm font-bold text-medical-gray-600"
|
||||
onClick={() => setIsMobileFilterOpen(!isMobileFilterOpen)}
|
||||
className="lg:hidden flex items-center gap-1.5 bg-canina-blue text-white px-3 py-1.5 rounded-lg text-xs font-bold shadow-xs"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4 font-vazir" />
|
||||
<Filter className="w-3.5 h-3.5" />
|
||||
<span>فیلترها {activeSymptoms.length > 0 || selectedPet !== "all" || selectedCategory !== "all" ? "•" : ""}</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push('/')}
|
||||
className="px-3.5 py-1.5 bg-white border border-medical-gray-200 rounded-lg text-medical-gray-600 shadow-xs flex items-center gap-1.5 font-bold text-xs hover:border-canina-blue hover:text-canina-blue transition-all whitespace-nowrap"
|
||||
>
|
||||
<ChevronRight className="w-3.5 h-3.5" />
|
||||
<span>بازگشت</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setIsMobileFilterOpen(!isMobileFilterOpen)}
|
||||
className="flex items-center gap-2 bg-canina-blue text-white px-4 py-2 rounded-xl text-xs font-black shadow-md shadow-canina-blue/20"
|
||||
>
|
||||
<Filter className="w-4 h-4" />
|
||||
<span>فیلترها {activeSymptoms.length > 0 || selectedPet !== "all" || selectedCategory !== "all" ? "•" : ""}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest overflow-x-auto whitespace-nowrap pb-1">
|
||||
<span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>کانینا</span>
|
||||
<ChevronLeft className="w-2.5 h-2.5" />
|
||||
<span className="text-canina-blue">فروشگاه تخصصی ({meta.total || filteredProducts.length} محصول)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Breadcrumbs */}
|
||||
<div className="hidden lg:flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-10">
|
||||
<span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>خانه</span>
|
||||
<ChevronLeft className="w-2.5 h-2.5" />
|
||||
<span className="cursor-pointer hover:text-canina-blue" onClick={() => { setSelectedCategory("all"); }}>کاتالوگ</span>
|
||||
{selectedCategory !== "all" && (
|
||||
<>
|
||||
<ChevronLeft className="w-2.5 h-2.5" />
|
||||
<span className="text-canina-blue">{CATEGORY_LABELS[selectedCategory] || selectedCategory}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
|
||||
@ -32,13 +32,23 @@ export default function BlogPage({ blogs = [] }: { blogs: BlogPost[] }) {
|
||||
return (
|
||||
<div className="min-h-screen bg-medical-gray-50 pt-8 pb-20 px-4 font-vazir" dir="rtl">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Breadcrumbs */}
|
||||
<div className="flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-10">
|
||||
<span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>خانه</span>
|
||||
<ChevronRight className="w-2.5 h-2.5" />
|
||||
<span className="cursor-pointer hover:text-canina-blue" onClick={() => setSelectedPost(null)}>مجله سلامت</span>
|
||||
<ChevronRight className="w-2.5 h-2.5" />
|
||||
<span className="text-canina-blue">{selectedPost.title}</span>
|
||||
{/* Standard Breadcrumb Navigation & Integrated Back Button */}
|
||||
<div className="flex items-center justify-between mb-8 pb-4 border-b border-medical-gray-200/60 font-vazir" dir="rtl">
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-medical-gray-400 overflow-x-auto whitespace-nowrap">
|
||||
<span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => router.push('/')}>خانه</span>
|
||||
<ChevronRight className="w-3 h-3 text-medical-gray-300" />
|
||||
<span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => setSelectedPost(null)}>مجله سلامت</span>
|
||||
<ChevronRight className="w-3 h-3 text-medical-gray-300" />
|
||||
<span className="text-canina-blue font-black">{selectedPost.title}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setSelectedPost(null)}
|
||||
className="px-3.5 py-1.5 bg-white border border-medical-gray-200 rounded-lg text-medical-gray-600 shadow-xs flex items-center gap-1.5 font-bold text-xs hover:border-canina-blue hover:text-canina-blue transition-all whitespace-nowrap"
|
||||
>
|
||||
<ChevronRight className="w-3.5 h-3.5" />
|
||||
<span>بازگشت</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-12 gap-12">
|
||||
|
||||
@ -77,28 +77,21 @@ export default function IngredientWiki() {
|
||||
<div className="bg-white py-12 px-4 overflow-hidden font-vazir" dir="rtl">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
|
||||
{/* Mobile Navigation & Breadcrumbs */}
|
||||
<div className="lg:hidden mb-12 space-y-4">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="flex items-center gap-2 text-medical-gray-500 font-bold hover:text-canina-blue transition-colors"
|
||||
{/* Standard Breadcrumb Navigation & Integrated Back Button */}
|
||||
<div className="flex items-center justify-between mb-8 pb-4 border-b border-medical-gray-200/60 font-vazir" dir="rtl">
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-medical-gray-400 overflow-x-auto whitespace-nowrap">
|
||||
<span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => router.push('/')}>خانه</span>
|
||||
<ChevronLeft className="w-3 h-3 text-medical-gray-300" />
|
||||
<span className="text-canina-blue font-black">دانشنامه مواد نایاب و ارگانیک</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => router.push('/')}
|
||||
className="px-3.5 py-1.5 bg-white border border-medical-gray-200 rounded-lg text-medical-gray-600 shadow-xs flex items-center gap-1.5 font-bold text-xs hover:border-canina-blue hover:text-canina-blue transition-all whitespace-nowrap"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
<ChevronRight className="w-3.5 h-3.5" />
|
||||
<span>بازگشت</span>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest overflow-x-auto whitespace-nowrap pb-2">
|
||||
<span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>کانینا</span>
|
||||
<ChevronLeft className="w-2.5 h-2.5" />
|
||||
<span className="text-canina-blue">دانشنامه علمی</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Breadcrumbs */}
|
||||
<div className="hidden lg:flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-12">
|
||||
<span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>خانه</span>
|
||||
<ChevronLeft className="w-2.5 h-2.5" />
|
||||
<span className="text-canina-blue">دانشنامه مواد نایاب و ارگانیک</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center mb-20">
|
||||
|
||||
@ -181,24 +181,24 @@ export default function ProductPage({ productSlug }: { productSlug: string }) {
|
||||
return (
|
||||
<div className="min-h-screen bg-medical-gray-50 pt-2 pb-36 sm:pb-20 px-4 sm:px-6 lg:px-8 font-vazir" dir="rtl">
|
||||
<div className="max-w-7xl mx-auto w-full">
|
||||
{/* Breadcrumbs for Mobile and Desktop */}
|
||||
<nav className="flex items-center gap-2 text-xs md:text-sm font-semibold text-medical-gray-600 mb-6 md:mb-10 overflow-x-auto whitespace-nowrap py-3 border-b border-medical-gray-100 font-vazir scrollbar-thin scrollbar-thumb-medical-gray-200 scrollbar-track-transparent pr-1" dir="rtl">
|
||||
{/* Standard Breadcrumb Navigation & Integrated Back Button */}
|
||||
<div className="flex items-center justify-between mb-8 pb-4 border-b border-medical-gray-200/60 font-vazir" dir="rtl">
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-medical-gray-400 overflow-x-auto whitespace-nowrap">
|
||||
<span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => router.push('/')}>خانه</span>
|
||||
<ChevronLeft className="w-3 h-3 text-medical-gray-300" />
|
||||
<span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => router.push('/shop')}>فروشگاه</span>
|
||||
<ChevronLeft className="w-3 h-3 text-medical-gray-300" />
|
||||
<span className="text-canina-blue font-black">{product.nameFa || product.name}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => router.push('/')}
|
||||
className="hover:text-canina-blue transition-colors font-vazir cursor-pointer"
|
||||
onClick={() => router.back()}
|
||||
className="px-3.5 py-1.5 bg-white border border-medical-gray-200 rounded-lg text-medical-gray-600 shadow-xs flex items-center gap-1.5 font-bold text-xs hover:border-canina-blue hover:text-canina-blue transition-all whitespace-nowrap"
|
||||
>
|
||||
خانه
|
||||
<ChevronRight className="w-3.5 h-3.5" />
|
||||
<span>بازگشت</span>
|
||||
</button>
|
||||
<ChevronLeft className="w-3.5 h-3.5 flex-shrink-0 text-medical-gray-300" />
|
||||
<button
|
||||
onClick={() => router.push(`/shop?category=${product.categorySlug}`)}
|
||||
className="hover:text-canina-blue cursor-pointer font-vazir"
|
||||
>
|
||||
{product.category}
|
||||
</button>
|
||||
<ChevronLeft className="w-3.5 h-3.5 flex-shrink-0 text-medical-gray-300" />
|
||||
<span className="text-canina-blue font-vazir whitespace-nowrap font-bold">{product.nameFa || product.name}</span>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Global Single Grid Layout - Aligns Sticky Buy Box at the Top */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start w-full">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user