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