fix(header-footer): re-structure mobile header into 2 rows and clean footer back-to-top button
- Place logo & brand title on row 1 and action buttons (search, login, cart) on row 2 for 100% width mobile clearance - Remove duplicate inline back-to-top text link in footer and adjust floating button z-index & bottom offset - Add whitespace-nowrap to footer links (درباره ما، تماس با ما، حریم خصوصی) to prevent line breaks
This commit is contained in:
parsa aghaei
parent
88b2fdbb14
commit
6618a81f33
@ -34,7 +34,7 @@ export default function Footer({ onNavigate, onShopNavigate, onB2BOpen }: {
|
||||
{showScroll && (
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="fixed bottom-8 left-8 z-40 bg-canina-blue text-white p-3.5 rounded-full shadow-2xl hover:bg-canina-dark hover:scale-110 transition-all border border-white/20 group flex items-center gap-2 font-vazir text-xs font-black"
|
||||
className="fixed bottom-24 left-6 sm:bottom-8 sm:left-8 z-40 bg-canina-blue text-white p-3 rounded-full shadow-2xl hover:bg-canina-dark hover:scale-110 transition-all border border-white/20 group flex items-center gap-2 font-vazir text-xs font-black"
|
||||
title="بازگشت به بالای صفحه"
|
||||
>
|
||||
<ArrowUp className="w-5 h-5 group-hover:-translate-y-1 transition-transform" />
|
||||
@ -155,14 +155,10 @@ export default function Footer({ onNavigate, onShopNavigate, onB2BOpen }: {
|
||||
|
||||
<div className="pt-12 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-6 text-[10px] font-bold uppercase tracking-[0.3em] font-shabnam">
|
||||
<div className="text-slate-400 font-shabnam">{getText('footer_copyright', "© ۲۰۲۶ کانینا ایران. تمامی حقوق محفوظ است.")}</div>
|
||||
<div className="flex gap-8 font-shabnam text-slate-400 items-center">
|
||||
<button onClick={scrollToTop} className="hover:text-white transition-colors flex items-center gap-1 font-bold text-canina-gold">
|
||||
<ArrowUp className="w-3.5 h-3.5" />
|
||||
بازگشت به بالای صفحه
|
||||
</button>
|
||||
<Link href="/about" className="font-extrabold hover:text-white transition-colors">{getText('footer_about', "درباره ما")}</Link>
|
||||
<Link href="/contact" className="font-extrabold hover:text-white transition-colors">{getText('footer_contact', "تماس با ما")}</Link>
|
||||
<Link href="/privacy" className="font-extrabold hover:text-white transition-colors">{getText('footer_privacy', "حریم خصوصی")}</Link>
|
||||
<div className="flex gap-4 sm:gap-8 font-shabnam text-slate-400 items-center">
|
||||
<Link href="/about" className="font-extrabold hover:text-white transition-colors whitespace-nowrap">{getText('footer_about', "درباره ما")}</Link>
|
||||
<Link href="/contact" className="font-extrabold hover:text-white transition-colors whitespace-nowrap">{getText('footer_contact', "تماس با ما")}</Link>
|
||||
<Link href="/privacy" className="font-extrabold hover:text-white transition-colors whitespace-nowrap">{getText('footer_privacy', "حریم خصوصی")}</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -104,36 +104,39 @@ export default function Header({
|
||||
</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 h-20 md:h-24 flex items-center justify-between gap-2 sm:gap-4 px-3 sm:px-6 lg:px-8" dir="rtl">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
{/* Mobile Menu Toggle */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="lg: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>
|
||||
<div className="max-w-7xl mx-auto py-2 md:py-0 md:h-24 flex flex-col md:flex-row md:items-center justify-between gap-2 md:gap-4 px-3 sm:px-6 lg:px-8" dir="rtl">
|
||||
{/* Row 1 on Mobile: Toggle + Logo */}
|
||||
<div className="flex items-center justify-between md:justify-start gap-2 w-full md:w-auto">
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Mobile Menu Toggle */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="lg: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-shrink flex items-center gap-2 sm:gap-3 cursor-pointer group min-w-0"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<div className="w-10 h-10 sm:w-12 sm:h-12 bg-canina-blue rounded-2xl flex items-center justify-center text-white font-bold text-xl 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 min-w-0">
|
||||
<span className="text-canina-blue font-black text-lg sm:text-2xl tracking-tighter italic font-sans flex items-center gap-1 sm:gap-2 leading-none">
|
||||
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', "ایران")}
|
||||
{/* 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>
|
||||
<span className="text-[8px] sm:text-[9px] text-medical-gray-400 font-bold uppercase tracking-wider font-vazir leading-none truncate max-w-[140px] sm:max-w-none">
|
||||
{getText('brand_subtitle', "نماینده رسمی Canina Pharma GmbH آلمان")}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
<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 */}
|
||||
@ -217,7 +220,7 @@ export default function Header({
|
||||
</nav>
|
||||
|
||||
{/* Action Area */}
|
||||
<div className="flex items-center gap-1.5 sm:gap-4 flex-shrink-0 justify-end h-16 pl-1 sm:pl-2">
|
||||
<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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user