ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-05 18:15: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> <ThemeProvider>
<SidebarProvider> <SidebarProvider>
<Dashboard/> <Dashboard/>
<main className="w-full h-full relative"> <main className="w-full h-full">
<PersistenceProvider> <PersistenceProvider>
{children} {children}
</PersistenceProvider> </PersistenceProvider>

3
src/app/page.tsx
View File

@ -264,9 +264,6 @@ export default function Home(): ReactNode {
return ( return (
<> <>
<div className="p-5 w-full h-full"> <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"> <div className="flex flex-row items-center gap-2">
<SidebarTrigger size="lg" /> <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> <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 const MOBILE_BREAKPOINT = 768
export function useIsMobile() { export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined) const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
React.useEffect(() => { React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) const onResize = () => {
const onChange = () => { setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) console.log("resize");
} };
mql.addEventListener("change", onChange) window.addEventListener("resize", onResize)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
return () => mql.removeEventListener("change", onChange) return () => window.removeEventListener("resize", onResize)
}, []) }, []);
return !!isMobile return !!isMobile
} }