feat: 隐藏手机端暗黑模式切换按钮

Co-authored-by: traeagent <traeagent@users.noreply.github.com>

components/card-nav/CardNav.css

@@ -242,10 +242,6 @@
     display: none;
   }
 
-  .theme-toggle {
-    display: none;
-  }
-
   .card-nav-content {
     flex-direction: column;
     align-items: stretch;

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,6 +216,7 @@ const CardNav: React.FC<CardNavProps> = ({
           </div>
 
           <div className="flex items-center gap-2">
+            {!isMobile && (
               <button
                 type="button"
                 className="theme-toggle"
@@ -231,6 +241,7 @@ const CardNav: React.FC<CardNavProps> = ({
                   </svg>
                 )}
               </button>
+            )}
           </div>
         </div>