From dff1275587101ccdb35d604d9ba400bdb58a66d2 Mon Sep 17 00:00:00 2001
From: dream-pep <dream-pep@users.noreply.github.com>
Date: Sat, 11 Jul 2026 05:26:04 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9A=90=E8=97=8F=E6=89=8B=E6=9C=BA?=
 =?UTF-8?q?=E7=AB=AF=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: traeagent <traeagent@users.noreply.github.com>
---
 components/card-nav/CardNav.css |  4 ---
 components/card-nav/CardNav.tsx | 59 +++++++++++++++++++--------------
 2 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/components/card-nav/CardNav.css b/components/card-nav/CardNav.css
index a36dd30..61bf961 100644
--- a/components/card-nav/CardNav.css
+++ b/components/card-nav/CardNav.css
@@ -242,10 +242,6 @@
     display: none;
   }
 
-  .theme-toggle {
-    display: none;
-  }
-
   .card-nav-content {
     flex-direction: column;
     align-items: stretch;
diff --git a/components/card-nav/CardNav.tsx b/components/card-nav/CardNav.tsx
index 9572ca6..77dcdea 100644
--- a/components/card-nav/CardNav.tsx
+++ b/components/card-nav/CardNav.tsx
@@ -44,6 +44,7 @@ const CardNav: React.FC<CardNavProps> = ({
 }) => {
   const [isHamburgerOpen, setIsHamburgerOpen] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
   const navRef = useRef<HTMLElement>(null);
   const cardsRef = useRef<HTMLDivElement[]>([]);
   const tlRef = useRef<gsap.core.Timeline | null>(null);
@@ -147,6 +148,14 @@ const CardNav: React.FC<CardNavProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isExpanded]);
 
+  useLayoutEffect(() => {
+    const mql = window.matchMedia("(max-width: 768px)");
+    const update = () => setIsMobile(mql.matches);
+    update();
+    mql.addEventListener("change", update);
+    return () => mql.removeEventListener("change", update);
+  }, []);
+
   const toggleMenu = () => {
     const tl = tlRef.current;
     if (!tl) return;
@@ -207,30 +216,32 @@ const CardNav: React.FC<CardNavProps> = ({
           </div>
 
           <div className="flex items-center gap-2">
-            <button
-              type="button"
-              className="theme-toggle"
-              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-              aria-label="Toggle dark mode"
-            >
-              {theme === "dark" ? (
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-                </svg>
-              ) : (
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <circle cx="12" cy="12" r="4" />
-                  <path d="M12 2v2" />
-                  <path d="M12 20v2" />
-                  <path d="m4.93 4.93 1.41 1.41" />
-                  <path d="m17.66 17.66 1.41 1.41" />
-                  <path d="M2 12h2" />
-                  <path d="M20 12h2" />
-                  <path d="m6.34 17.66-1.41 1.41" />
-                  <path d="m19.07 4.93-1.41 1.41" />
-                </svg>
-              )}
-            </button>
+            {!isMobile && (
+              <button
+                type="button"
+                className="theme-toggle"
+                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+                aria-label="Toggle dark mode"
+              >
+                {theme === "dark" ? (
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+                  </svg>
+                ) : (
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <circle cx="12" cy="12" r="4" />
+                    <path d="M12 2v2" />
+                    <path d="M12 20v2" />
+                    <path d="m4.93 4.93 1.41 1.41" />
+                    <path d="m17.66 17.66 1.41 1.41" />
+                    <path d="M2 12h2" />
+                    <path d="M20 12h2" />
+                    <path d="m6.34 17.66-1.41 1.41" />
+                    <path d="m19.07 4.93-1.41 1.41" />
+                  </svg>
+                )}
+              </button>
+            )}
           </div>
         </div>