Lenjing-Opensource/koring-space
1
0
Fork 0
mirror of https://github.com/lingke-net/koring-space.git synced 2026-09-12 05:45:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: traeagent <traeagent@users.noreply.github.com>
This commit is contained in:
dream-pep
2026-07-11 05:26:04 +00:00
co-authored by traeagent
parent 4898cf0fcb
commit dff1275587
2 changed files with 35 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/card-nav/CardNav.tsx
+35 -24
View File
@@ -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>