From 030a8833271d6944e198e4a380d5da7cd4448a41 Mon Sep 17 00:00:00 2001
From: Arda Samadi <arda.samadi2010@gmail.com>
Date: Tue, 16 Jun 2026 13:59:34 +0330
Subject: [PATCH] Desktop header: login/profile state + theme toggle; hide
 about/faq header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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)
---
 app/components/desktop/DesktopHeader.tsx | 81 ++++++++++++++----------
 app/routes/profile.about.tsx             | 14 ++--
 app/routes/profile.faq.tsx               | 12 ++--
 3 files changed, 63 insertions(+), 44 deletions(-)

diff --git a/app/components/desktop/DesktopHeader.tsx b/app/components/desktop/DesktopHeader.tsx
index c59a48d..3045309 100644
--- a/app/components/desktop/DesktopHeader.tsx
+++ b/app/components/desktop/DesktopHeader.tsx
@@ -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>
diff --git a/app/routes/profile.about.tsx b/app/routes/profile.about.tsx
index 135dcd1..a00838b 100644
--- a/app/routes/profile.about.tsx
+++ b/app/routes/profile.about.tsx
@@ -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 */}
diff --git a/app/routes/profile.faq.tsx b/app/routes/profile.faq.tsx
index d4fab93..8af14d1 100644
--- a/app/routes/profile.faq.tsx
+++ b/app/routes/profile.faq.tsx
@@ -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>