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