From 19ce4a1d563d2f462ffd2eb9f53d96035880c94e Mon Sep 17 00:00:00 2001
From: alt0 <wxlxinglong@outlook.com>
Date: Tue, 11 Oct 2022 10:23:12 +0800
Subject: [PATCH] fix: hide the mode switcher in small screen

---
 .../layout/src/header/LayoutHeader.tsx        | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx
index 4c313afec2..509df650ed 100644
--- a/libs/components/layout/src/header/LayoutHeader.tsx
+++ b/libs/components/layout/src/header/LayoutHeader.tsx
@@ -11,7 +11,7 @@ import {
     useLocalTrigger,
     useShowSettingsSidebar,
 } from '@toeverything/datasource/state';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { EditorBoardSwitcher } from './EditorBoardSwitcher';
 import { fsApiSupported } from './FileSystem';
 import { Logo } from './Logo';
@@ -23,6 +23,22 @@ export const LayoutHeader = () => {
         useShowSettingsSidebar();
     const { t } = useTranslation();
 
+    // because of header not compatible with small screen, hide the mode switcher in that case, this will be optimize in future.
+    const [hideSwitcher, setHideSwither] = useState(false);
+    const [rootEle, setRootEle] = useState<HTMLDivElement>();
+    useEffect(() => {
+        if (rootEle) {
+            const observer = new ResizeObserver(entries => {
+                setHideSwither(entries[0].contentRect.width < 970);
+            });
+            observer.observe(rootEle);
+
+            return () => {
+                observer.disconnect();
+            };
+        }
+    }, [rootEle]);
+
     const warningTips = useMemo(() => {
         if (!fsApiSupported()) {
             return t('WarningTips.IsNotfsApiSupported');
@@ -42,7 +58,7 @@ export const LayoutHeader = () => {
     }, [currentEditors]);
 
     return (
-        <StyledContainerForHeaderRoot>
+        <StyledContainerForHeaderRoot ref={setRootEle}>
             <StyledHeaderRoot>
                 <FlexContainer>
                     <Logo />
@@ -85,9 +101,11 @@ export const LayoutHeader = () => {
                         </IconButton>
                     </StyledHelper>
                 </FlexContainer>
-                <StyledContainerForEditorBoardSwitcher>
-                    <EditorBoardSwitcher />
-                </StyledContainerForEditorBoardSwitcher>
+                {hideSwitcher ? null : (
+                    <StyledContainerForEditorBoardSwitcher>
+                        <EditorBoardSwitcher />
+                    </StyledContainerForEditorBoardSwitcher>
+                )}
             </StyledHeaderRoot>
         </StyledContainerForHeaderRoot>
     );