Make useIsDesktop Tailwind 4 compatible

src/utility/useIsDesktop.ts

@@ -1,15 +1,18 @@
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export default function useIsDesktop() {
-  const [isDesktop, setIsDesktop] = useState(false);
+  const [isDesktop, setIsDesktop] = useState<boolean>();
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (typeof window !== 'undefined') {
-      const mql = window.matchMedia('(min-width: var(--breakpoint-md))');
+      const breakpointMd = getComputedStyle(document.documentElement)
+        .getPropertyValue('--breakpoint-md');
+      const mql = window.matchMedia(`(min-width: ${breakpointMd})`);
       setIsDesktop(mql.matches);
-      const eventHandler = (event: MediaQueryListEvent) => {
+
+      const eventHandler = (event: MediaQueryListEvent) =>
         setIsDesktop(event.matches);
-      };
+
       mql.addEventListener('change', eventHandler);
       return () => mql.removeEventListener('change', eventHandler);
     }