From 2b64a7c09f9e27271b0803ed2c18a9f0bd100ce3 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Wed, 25 May 2022 13:39:01 +0800
Subject: [PATCH] client: detect window resize

---
 packages/client/src/hooks/use-on-mobile.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/client/src/hooks/use-on-mobile.tsx b/packages/client/src/hooks/use-on-mobile.tsx
index 04d20195..174f6d2a 100644
--- a/packages/client/src/hooks/use-on-mobile.tsx
+++ b/packages/client/src/hooks/use-on-mobile.tsx
@@ -1,8 +1,25 @@
+import { useEffect } from 'react';
+
 import { createGlobalHook } from './create-global-hook';
 import { useToggle } from './use-toggle';
 
+const PC_MOBILE_CRITICAL_WIDTH = 765;
+
 const useOnMobile = (defaultIsMobile) => {
   const [isMobile, toggleIsMobile] = useToggle(defaultIsMobile);
+
+  useEffect(() => {
+    function handleResize() {
+      toggleIsMobile(window.innerWidth <= PC_MOBILE_CRITICAL_WIDTH);
+    }
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [toggleIsMobile]);
+
   return {
     isMobile,
     toggleIsMobile,