Desktop header: login/profile state + theme toggle; hide about/faq header

- header shows "ورود / ثبت نام" when logged out (no profile/cart/bookmark icons,
  so the profile tab isn't reachable) and the avatar + cart + bookmarks when
  logged in
- add the light/dark SunMoonToggle to the desktop header
- about/faq: hide their mobile HeaderWithSupport at lg (content already
  width-constrained)
This commit is contained in:
Arda Samadi 2026-06-16 13:59:34 +03:30
parent 4a7bf51572
commit 030a883327
3 changed files with 63 additions and 44 deletions

View File

@ -3,6 +3,7 @@ import { useState, type FormEvent } from "react";
import { Search, Heart, ShoppingBag, User } from "lucide-react";
import { useRootData } from "~/hooks/use-root-data";
import { useCartCount } from "~/requestHandler/use-cart-hooks";
import { SunMoonToggle } from "~/components/SunMoonToggle";
import logo from "~/assets/logo/SVG-07.svg";
const NAV = [
@ -19,9 +20,10 @@ const NAV = [
const DesktopHeader = () => {
const location = useLocation();
const navigate = useNavigate();
const { user } = useRootData();
const { user, theme } = useRootData();
const cartCount = useCartCount();
const [q, setQ] = useState("");
const isLoggedIn = !!user?.access_token;
const isActive = (to: string) =>
to === "/" ? location.pathname === "/" : location.pathname.startsWith(to);
@ -74,38 +76,51 @@ const DesktopHeader = () => {
/>
</form>
<div className="flex items-center gap-1.5 shrink-0">
<Link
to="/profile/bookmarks"
aria-label="نشان‌شده‌ها"
prefetch="intent"
className="w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
>
<Heart size={21} />
</Link>
<Link
to="/cart"
aria-label="سبد خرید"
prefetch="intent"
className="relative w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
>
{cartCount > 0 && user?.access_token ? (
<span className="absolute top-1 left-1 min-w-[17px] h-[17px] bg-RED text-white rounded-full text-[10.5px] font-bold grid place-items-center px-1 border-2 border-WHITE">
{cartCount}
</span>
) : null}
<ShoppingBag size={21} />
</Link>
<Link
to="/profile"
aria-label="پروفایل"
prefetch="intent"
className="w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
>
<span className="w-9 h-9 rounded-full bg-WHITE3 grid place-items-center text-GRAY overflow-hidden">
<User size={20} />
</span>
</Link>
<div className="flex items-center gap-2.5 shrink-0">
<SunMoonToggle theme={theme} />
{isLoggedIn ? (
<>
<Link
to="/profile/bookmarks"
aria-label="نشان‌شده‌ها"
prefetch="intent"
className="w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
>
<Heart size={21} />
</Link>
<Link
to="/cart"
aria-label="سبد خرید"
prefetch="intent"
className="relative w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
>
{cartCount > 0 ? (
<span className="absolute top-1 left-1 min-w-[17px] h-[17px] bg-RED text-white rounded-full text-[10.5px] font-bold grid place-items-center px-1 border-2 border-WHITE">
{cartCount}
</span>
) : null}
<ShoppingBag size={21} />
</Link>
<Link
to="/profile"
aria-label="پروفایل"
prefetch="intent"
className="w-[42px] h-[42px] rounded-xl grid place-items-center text-BLACK hover:bg-WHITE3 transition-colors"
>
<span className="w-9 h-9 rounded-full bg-WHITE3 grid place-items-center text-GRAY overflow-hidden">
<User size={20} />
</span>
</Link>
</>
) : (
<Link
to="/login"
prefetch="intent"
className="inline-flex items-center h-10 px-4 rounded-xl bg-VITROWN_BLUE text-white text-[14px] font-bold hover:bg-[#012f6b] transition-colors whitespace-nowrap"
>
ورود / ثبت نام
</Link>
)}
</div>
</div>
</header>

View File

@ -47,12 +47,14 @@ export default function AboutPage() {
return (
<div className="flex flex-col pb-20">
{/* Header */}
<HeaderWithSupport
hideSupportButton={true}
title="درباره ویترون"
onBack={() => safeGoBack(navigate)}
/>
{/* Header (mobile) */}
<div className="lg:hidden">
<HeaderWithSupport
hideSupportButton={true}
title="درباره ویترون"
onBack={() => safeGoBack(navigate)}
/>
</div>
{/* Content */}
<div className="flex flex-col gap-8 p-4 max-w-2xl mx-auto w-full">
{/* Logo Section */}

View File

@ -135,11 +135,13 @@ export default function FAQ() {
return (
<div>
<HeaderWithSupport
hideSupportButton={true}
title="سوالات متداول"
onBack={() => safeGoBack(navigate)}
/>
<div className="lg:hidden">
<HeaderWithSupport
hideSupportButton={true}
title="سوالات متداول"
onBack={() => safeGoBack(navigate)}
/>
</div>
<div className="max-w-4xl mx-auto px-4 py-12">
<div className="text-center mb-12">
<h1 className="text-3xl font-bold mb-4">سوالات متداول</h1>