ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-03 16:55:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed useIsMobile hook

Browse Source
This commit is contained in:
corgifist 2025-07-26 01:52:35 +03:00
parent 11013c47e3
commit 2d55a7092c
3 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@ -48,7 +48,7 @@ export default async function RootLayout({
<ThemeProvider>
<SidebarProvider>
<Dashboard/>
<main className="w-full h-full relative">
<main className="w-full h-full">
<PersistenceProvider>
{children}
</PersistenceProvider>

3
src/app/page.tsx
View File

@ -264,9 +264,6 @@ export default function Home(): ReactNode {
return (
<>
<div className="p-5 w-full h-full">
<div aria-hidden className="fixed top-0 left-0 w-full z-10">
<div className="sticky top-0 left-0 w-full h-safe-area-inset-top bg-background" />
</div>
<div className="flex flex-row items-center gap-2">
<SidebarTrigger size="lg" />
<h2 className="font-bold break-keep text-xl sm:text-2xl md:text-3xl lg:text-4xl leading-none">Project Library</h2>

22
src/hooks/use-mobile.ts
View File

@ -3,17 +3,17 @@ import * as React from "react"
const MOBILE_BREAKPOINT = 768
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
}
mql.addEventListener("change", onChange)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
return () => mql.removeEventListener("change", onChange)
}, [])
React.useEffect(() => {
const onResize = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
console.log("resize");
};
window.addEventListener("resize", onResize)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
return () => window.removeEventListener("resize", onResize)
}, []);
return !!isMobile
return !!isMobile
}