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:
parent
4a7bf51572
commit
030a883327
@ -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>
|
||||
|
||||
@ -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 */}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user