feat(core): hide all sidebars when resizing to a small screen (#11105)

packages/frontend/core/src/modules/app-sidebar/views/index.css.ts

@@ -1,7 +1,6 @@
 import { cssVar } from '@toeverything/theme';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
-export const floatingMaxWidth = 768;
 export const navWrapperStyle = style({
   '@media': {
     print: {

packages/frontend/core/src/modules/app-sidebar/views/index.tsx

@@ -11,9 +11,8 @@ import {
   useServiceOptional,
 } from '@toeverything/infra';
 import clsx from 'clsx';
-import { debounce } from 'lodash-es';
 import type { PropsWithChildren, ReactElement } from 'react';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo } from 'react';
 
 import { WorkbenchService } from '../../workbench';
 import { allowedSplitViewEntityTypes } from '../../workbench/view/split-view/types';
@@ -21,7 +20,6 @@ import { WorkspaceService } from '../../workspace';
 import { AppSidebarService } from '../services/app-sidebar';
 import * as styles from './fallback.css';
 import {
-  floatingMaxWidth,
   hoverNavWrapperStyle,
   navBodyStyle,
   navHeaderStyle,
@@ -54,21 +52,6 @@ export function AppSidebar({ children }: PropsWithChildren) {
   const smallScreenMode = useLiveData(appSidebarService.smallScreenMode$);
   const hovering = useLiveData(appSidebarService.hovering$) && open !== true;
   const resizing = useLiveData(appSidebarService.resizing$);
-  const [initialized, setInitialized] = useState(false);
-
-  useEffect(() => {
-    if (BUILD_CONFIG.isElectron) {
-      setInitialized(true);
-      return;
-    }
-    const shouldFloating = window.matchMedia(
-      `(max-width: ${floatingMaxWidth}px)`
-    ).matches;
-
-    appSidebarService.setSmallScreenMode(shouldFloating);
-    setInitialized(true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
   const sidebarState = smallScreenMode
     ? open
@@ -80,27 +63,6 @@ export function AppSidebar({ children }: PropsWithChildren) {
         ? 'floating'
         : 'close';
 
-  useEffect(() => {
-    // do not float app sidebar on desktop
-    if (BUILD_CONFIG.isElectron) {
-      return;
-    }
-
-    function onResize() {
-      const isFloatingMaxWidth = window.matchMedia(
-        `(max-width: ${floatingMaxWidth}px)`
-      ).matches;
-      const isFloating = isFloatingMaxWidth;
-      appSidebarService.setSmallScreenMode(isFloating);
-    }
-
-    const dOnResize = debounce(onResize, 50);
-    window.addEventListener('resize', dOnResize);
-    return () => {
-      window.removeEventListener('resize', dOnResize);
-    };
-  }, [appSidebarService]);
-
   const hasRightBorder = !BUILD_CONFIG.isElectron && !clientBorder;
 
   const handleOpenChange = useCallback(
@@ -176,10 +138,6 @@ export function AppSidebar({ children }: PropsWithChildren) {
     });
   }, [workbenchService.views$.value]);
 
-  if (!initialized) {
-    return null;
-  }
-
   return (
     <>
       <ResizePanel