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: min width for nav panel

Browse Source
This commit is contained in:
ascarbek 2023-03-05 22:28:33 +06:00
parent 3afca2b482
commit 84f41cec76
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,8 @@ import { NavigationResizer } from './NavigationResizer';
import { IFolder } from '../../../stores/reducers/folders/slice';
import { IPage } from '../../../stores/reducers/pages/slice';
const MINIMUM_WIDTH = 200;
export const NavigationPanel = ({
onCollapseNavigationClick,
width,
@ -29,7 +31,7 @@ export const NavigationPanel = ({
<Workspace></Workspace>
<div className={'flex flex-col px-2 overflow-auto'} style={{height: 'calc(100vh - 280px)'}}>
<div className={'flex flex-col overflow-auto px-2'} style={{ height: 'calc(100vh - 280px)' }}>
{folders.map((folder, index) => (
<FolderItem
key={index}
@ -50,7 +52,7 @@ export const NavigationPanel = ({
<NewFolderButton></NewFolderButton>
</div>
</div>
<NavigationResizer></NavigationResizer>
<NavigationResizer minWidth={MINIMUM_WIDTH}></NavigationResizer>
</>
);
};

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

@ -3,13 +3,17 @@ import { useAppDispatch, useAppSelector } from '../../../stores/store';
import { useEffect } from 'react';
import { navigationWidthActions } from '../../../stores/reducers/navigation-width/slice';
export const NavigationResizer = () => {
export const NavigationResizer = ({ minWidth }: { minWidth: number }) => {
const width = useAppSelector((state) => state.navigationWidth);
const appDispatch = useAppDispatch();
const { onMouseDown, movementX } = useResizer();
useEffect(() => {
appDispatch(navigationWidthActions.changeWidth(width + movementX));
if (width + movementX < minWidth) {
appDispatch(navigationWidthActions.changeWidth(minWidth));
} else {
appDispatch(navigationWidthActions.changeWidth(width + movementX));
}
}, [movementX]);
return (