Initial commit for new panel

src/hooks/use-mobile.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+export const MOBILE_BREAKPOINT = 850;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState<boolean>();
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}