fix: nav panel and main panel animation on hide menu

frontend/appflowy_tauri/src/appflowy_app/components/layout/HeaderPanel/Breadcrumbs.tsx

@@ -1,7 +1,15 @@
-export const Breadcrumbs = () => {
+import { ShowMenuSvg } from '../../_shared/svg/ShowMenuSvg';
+
+export const Breadcrumbs = ({ menuHidden, onShowMenuClick }: { menuHidden: boolean; onShowMenuClick: () => void }) => {
   return (
     <div className={'flex items-center'}>
       <div className={'mr-4 flex items-center'}>
+        {menuHidden && (
+          <button onClick={() => onShowMenuClick()} className={'mr-2 h-5 w-5'}>
+            <ShowMenuSvg></ShowMenuSvg>
+          </button>
+        )}
+
         <button className={'p-1'} onClick={() => history.back()}>
           <img src={'/images/home/arrow_left.svg'} />
         </button>

frontend/appflowy_tauri/src/appflowy_app/components/layout/HeaderPanel/HeaderPanel.tsx

@@ -1,10 +1,10 @@
 import { Breadcrumbs } from './Breadcrumbs';
 import { PageOptions } from './PageOptions';
 
-export const HeaderPanel = () => {
+export const HeaderPanel = ({ menuHidden, onShowMenuClick }: { menuHidden: boolean; onShowMenuClick: () => void }) => {
   return (
     <div className={'flex h-[60px] items-center justify-between border-b border-shade-6 px-8'}>
-      <Breadcrumbs></Breadcrumbs>
+      <Breadcrumbs menuHidden={menuHidden} onShowMenuClick={onShowMenuClick}></Breadcrumbs>
       <PageOptions></PageOptions>
     </div>
   );

frontend/appflowy_tauri/src/appflowy_app/components/layout/MainPanel.tsx

@@ -1,11 +1,40 @@
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { HeaderPanel } from './HeaderPanel/HeaderPanel';
 import { FooterPanel } from './FooterPanel';
 
-export const MainPanel = ({ children }: { children: ReactNode }) => {
+const ANIMATION_DURATION = 300;
+
+export const MainPanel = ({
+  left,
+  menuHidden,
+  onShowMenuClick,
+  children,
+}: {
+  left: number;
+  menuHidden: boolean;
+  onShowMenuClick: () => void;
+  children: ReactNode;
+}) => {
+  const [animation, setAnimation] = useState(false);
+  useEffect(() => {
+    if (!menuHidden) {
+      setTimeout(() => {
+        setAnimation(false);
+      }, ANIMATION_DURATION);
+    } else {
+      setAnimation(true);
+    }
+  }, [menuHidden]);
+
   return (
-    <div className={'flex h-full flex-1 flex-col'}>
+    <div
-      <HeaderPanel></HeaderPanel>
+      className={`absolute inset-0 flex h-full flex-1 flex-col`}
+      style={{
+        transition: menuHidden || animation ? `left ${ANIMATION_DURATION}ms ease-out` : 'none',
+        left: `${menuHidden ? 0 : left}px`,
+      }}
+    >
+      <HeaderPanel menuHidden={menuHidden} onShowMenuClick={onShowMenuClick}></HeaderPanel>
       <div className={'min-h-0 flex-1 overflow-auto'}>{children}</div>
       <FooterPanel></FooterPanel>
     </div>

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.hooks.ts

@@ -14,6 +14,7 @@ export const useNavigationPanelHooks = function () {
   const width = useAppSelector((state) => state.navigationWidth);
   const [navigationPanelFixed, setNavigationPanelFixed] = useState(true);
   const [slideInFloatingPanel, setSlideInFloatingPanel] = useState(true);
+  const [menuHidden, setMenuHidden] = useState(false);
 
   const navigate = useNavigate();
 
@@ -28,6 +29,14 @@ export const useNavigationPanelHooks = function () {
 
   const [floatingPanelWidth, setFloatingPanelWidth] = useState(0);
 
+  const onHideMenuClick = () => {
+    setMenuHidden(true);
+  };
+
+  const onShowMenuClick = () => {
+    setMenuHidden(false);
+  };
+
   const onPageClick = (page: IPage) => {
     let pageTypeRoute = (() => {
       switch (page.pageType) {
@@ -69,5 +78,8 @@ export const useNavigationPanelHooks = function () {
     onScreenMouseMove,
     slideInFloatingPanel,
     setFloatingPanelWidth,
+    menuHidden,
+    onHideMenuClick,
+    onShowMenuClick,
   };
 };

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx

@@ -9,15 +9,18 @@ import { IFolder } from '../../../stores/reducers/folders/slice';
 import { IPage } from '../../../stores/reducers/pages/slice';
 
 const MINIMUM_WIDTH = 200;
+const ANIMATION_DURATION = 300;
 
 export const NavigationPanel = ({
-  onCollapseNavigationClick,
+  onHideMenuClick,
+  menuHidden,
   width,
   folders,
   pages,
   onPageClick,
 }: {
-  onCollapseNavigationClick: () => void;
+  onHideMenuClick: () => void;
+  menuHidden: boolean;
   width: number;
   folders: IFolder[];
   pages: IPage[];
@@ -25,9 +28,16 @@ export const NavigationPanel = ({
 }) => {
   return (
     <>
-      <div className={'flex flex-col justify-between bg-surface-1 text-sm'} style={{ width: `${width}px` }}>
+      <div
+        className={`absolute inset-0 flex flex-col justify-between bg-surface-1 text-sm`}
+        style={{
+          transition: `left ${ANIMATION_DURATION}ms ease-out`,
+          width: `${width}px`,
+          left: `${menuHidden ? -width : 0}px`,
+        }}
+      >
         <div className={'flex flex-col'}>
-          <AppLogo iconToShow={'hide'} onHideMenuClick={onCollapseNavigationClick}></AppLogo>
+          <AppLogo iconToShow={'hide'} onHideMenuClick={onHideMenuClick}></AppLogo>
 
           <Workspace></Workspace>
 

frontend/appflowy_tauri/src/appflowy_app/components/layout/Screen.tsx

@@ -26,30 +26,25 @@ export const Screen = ({ children }: { children: ReactNode }) => {
     onScreenMouseMove,
     slideInFloatingPanel,
     setFloatingPanelWidth,
+    onHideMenuClick,
+    onShowMenuClick,
+    menuHidden,
   } = useNavigationPanelHooks();
 
   return (
     <div onMouseMove={onScreenMouseMove} className='flex h-screen w-screen bg-white text-black'>
-      {navigationPanelFixed ? (
+      <NavigationPanel
-        <NavigationPanel
+        onHideMenuClick={onHideMenuClick}
-          onCollapseNavigationClick={onCollapseNavigationClick}
+        width={width}
-          width={width}
+        folders={folders}
-          folders={folders}
+        pages={pages}
-          pages={pages}
+        onPageClick={onPageClick}
-          onPageClick={onPageClick}
+        menuHidden={menuHidden}
-        ></NavigationPanel>
+      ></NavigationPanel>
-      ) : (
-        <NavigationFloatingPanel
-          onFixNavigationClick={onFixNavigationClick}
-          slideInFloatingPanel={slideInFloatingPanel}
-          folders={folders}
-          pages={pages}
-          onPageClick={onPageClick}
-          setWidth={setFloatingPanelWidth}
-        ></NavigationFloatingPanel>
-      )}
 
-      <MainPanel>{children}</MainPanel>
+      <MainPanel left={width} menuHidden={menuHidden} onShowMenuClick={onShowMenuClick}>
+        {children}
+      </MainPanel>
     </div>
   );
 };