mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

implement isMobile into extension banner

Browse source
This commit is contained in:
Cooper Ransom 2024-03-26 13:31:49 -04:00
parent cfd43c789d
commit 1ba72fe768
1 changed files with 2 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/setup/Layout.tsx
View file

@ -2,6 +2,7 @@ import { ReactNode, useEffect, useState } from "react";
import { isAllowedExtensionVersion } from "@/backend/extension/compatibility"; import { isAllowedExtensionVersion } from "@/backend/extension/compatibility";
import { extensionInfo } from "@/backend/extension/messaging"; import { extensionInfo } from "@/backend/extension/messaging";
import { useIsMobile } from "@/hooks/useIsMobile";
import { useBannerSize, useBannerStore } from "@/stores/banner"; import { useBannerSize, useBannerStore } from "@/stores/banner";
import { ExtensionBanner } from "@/stores/banner/BannerLocation"; import { ExtensionBanner } from "@/stores/banner/BannerLocation";
@ -28,7 +29,7 @@ export function Layout(props: { children: ReactNode }) {
const location = useBannerStore((s) => s.location); const location = useBannerStore((s) => s.location);
const [extensionState, setExtensionState] = const [extensionState, setExtensionState] =
useState<ExtensionStatus>("unknown"); useState<ExtensionStatus>("unknown");
const [isMobile, setIsMobile] = useState(false); const { isMobile } = useIsMobile();
useEffect(() => { useEffect(() => {
let isMounted = true; let isMounted = true;
@ -39,19 +40,8 @@ export function Layout(props: { children: ReactNode }) {
} }
}); });
// Instead use isMobile like this `const { isMobile } = useIsMobile();`
const mediaQuery = window.matchMedia("(max-width: 768px)"); // Adjust the max-width as per your needs
setIsMobile(mediaQuery.matches);
const handleResize = () => {
setIsMobile(mediaQuery.matches);
};
mediaQuery.addListener(handleResize);
return () => { return () => {
isMounted = false; isMounted = false;
mediaQuery.removeListener(handleResize);
}; };
}, []); }, []);