Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: post merge fixes

Browse Source
This commit is contained in:
ascarbek 2023-03-05 23:43:59 +06:00
parent fb8a81eca5
commit d1c29ec3e7
1 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx
View File

@ -9,13 +9,20 @@ import { IPage } from '../../../stores/reducers/pages/slice';
import { useNavigate } from 'react-router-dom';
import React from 'react';
const MINIMUM_WIDTH = 200;
const ANIMATION_DURATION = 300;
export const NavigationPanel = ({
onHideMenuClick,
menuHidden,
onCollapseNavigationClick,
width,
folders,
pages,
onPageClick,
}: {
onHideMenuClick: () => void;
menuHidden: boolean;
onCollapseNavigationClick: () => void;
width: number;
folders: IFolder[];
@ -24,9 +31,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>
<WorkspaceUser></WorkspaceUser>
<WorkspaceApps folders={folders} pages={pages} onPageClick={onPageClick} />
</div>
@ -46,7 +60,7 @@ export const NavigationPanel = ({
<NewFolderButton></NewFolderButton>
</div>
</div>
<NavigationResizer></NavigationResizer>
<NavigationResizer minWidth={MINIMUM_WIDTH}></NavigationResizer>
</>
);
};
@ -58,7 +72,7 @@ type AppsContext = {
};
const WorkspaceApps: React.FC<AppsContext> = ({ folders, pages, onPageClick }) => (
<div className={'flex flex-col px-2'}>
<div className={'flex flex-col overflow-auto px-2'} style={{ height: 'calc(100vh - 300px)' }}>
{folders.map((folder, index) => (
<FolderItem
key={index}