diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx index 0f273349..f8e15759 100644 --- a/src/components/Drawer.jsx +++ b/src/components/Drawer.jsx @@ -3,9 +3,9 @@ import clsx from "clsx"; import PropTypes from "prop-types"; import React, { Fragment } from "react"; import { CloseIcon } from "../icons"; -import { Button } from "./Buttons/Button"; import { isIosBrowser } from "../helpers/browser"; import { useViewportHeight } from "../hooks/useViewportHeight"; +import { Button } from "./Buttons/Button"; const sizes = { small: "w-72", @@ -33,7 +33,12 @@ export const Drawer = ({ open={isOpen} onClose={onClose} > -
+
{ - if (typeof window === 'undefined' || !window.navigator) return false; - + // eslint-disable-next-line no-undef + if (typeof window === "undefined" || !window.navigator) return false; + + // eslint-disable-next-line no-undef const ua = window.navigator.userAgent; - const iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i); - const webkit = !!ua.match(/WebKit/i); - + const indexOS = !!/ipad/i.test(ua) || !!/iphone/i.test(ua); + const webkit = !!/webkit/i.test(ua); + // Additional check for iPad with iOS 13+ - const iPad = !!ua.match(/Macintosh/i) && navigator.maxTouchPoints > 1; - - return (iOS && webkit) || iPad; - }; - \ No newline at end of file + // eslint-disable-next-line no-undef + const indexPad = !!/macintosh/i.test(ua) && navigator.maxTouchPoints > 1; + + return (indexOS && webkit) || indexPad; +}; diff --git a/src/hooks/useViewportHeight.js b/src/hooks/useViewportHeight.js index c13bad5d..a2c7b74e 100644 --- a/src/hooks/useViewportHeight.js +++ b/src/hooks/useViewportHeight.js @@ -1,24 +1,27 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect } from "react"; export const useViewportHeight = () => { - const [viewportHeight, setViewportHeight] = useState(0); + const [viewportHeight, setViewportHeight] = useState(0); - useEffect(() => { - const detectViewportHeight = () => { - // Use window.innerHeight for a more accurate viewport height - setViewportHeight(window.innerHeight); - }; + useEffect(() => { + const detectViewportHeight = () => { + // Use window.innerHeight for a more accurate viewport height + // eslint-disable-next-line no-undef + setViewportHeight(window.innerHeight); + }; - // Detect height on mount - detectViewportHeight(); + // Detect height on mount + detectViewportHeight(); - // Optional: Re-detect on orientation change for mobile devices - window.addEventListener('orientationchange', detectViewportHeight); + // Optional: Re-detect on orientation change for mobile devices + // eslint-disable-next-line no-undef + window.addEventListener("orientationchange", detectViewportHeight); - return () => { - window.removeEventListener('orientationchange', detectViewportHeight); - }; - }, []); + return () => { + // eslint-disable-next-line no-undef + window.removeEventListener("orientationchange", detectViewportHeight); + }; + }, []); - return viewportHeight; -}; \ No newline at end of file + return viewportHeight; +};