94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
import { useShallow } from 'zustand/react/shallow';
|
|
import { useLayoutStore } from './store';
|
|
import clsx from 'clsx';
|
|
import { Button } from '@mui/material';
|
|
import { message } from '@/modules/message';
|
|
import {
|
|
AppstoreOutlined,
|
|
CloseOutlined,
|
|
CodeOutlined,
|
|
DashboardOutlined,
|
|
FolderOutlined,
|
|
HomeOutlined,
|
|
MessageOutlined,
|
|
ReadOutlined,
|
|
RocketOutlined,
|
|
SmileOutlined,
|
|
SwitcherOutlined,
|
|
} from '@ant-design/icons';
|
|
import { X } from 'lucide-react';
|
|
import { useNewNavigate } from '../navicate';
|
|
const meun = [
|
|
{
|
|
title: 'Home',
|
|
icon: <HomeOutlined />,
|
|
link: '/map',
|
|
},
|
|
{
|
|
title: 'User App',
|
|
icon: <AppstoreOutlined />,
|
|
link: '/app/edit/list',
|
|
},
|
|
{
|
|
title: 'File App',
|
|
icon: <FolderOutlined />,
|
|
link: '/file/edit/list',
|
|
},
|
|
{
|
|
title: 'Container',
|
|
icon: <CodeOutlined />,
|
|
link: '/container/edit/list',
|
|
},
|
|
{
|
|
title: 'Org',
|
|
icon: <SwitcherOutlined />,
|
|
link: '/org/edit/list',
|
|
},
|
|
{
|
|
title: 'About',
|
|
icon: <SmileOutlined />,
|
|
},
|
|
];
|
|
export const LayoutMenu = () => {
|
|
const { open, setOpen } = useLayoutStore(useShallow((state) => ({ open: state.open, setOpen: state.setOpen })));
|
|
const navigate = useNewNavigate();
|
|
return (
|
|
<div className={clsx('w-full h-full absolute z-20 no-drag', !open && 'hidden')}>
|
|
<div
|
|
className='bg-white w-full absolute h-full opacity-60 z-0'
|
|
onClick={() => {
|
|
setOpen(false);
|
|
}}></div>
|
|
<div className='w-[300px] h-full absolute top-0 left-0 bg-amber-900 text-primary'>
|
|
<div className='flex justify-between p-6 mt-4 font-bold items-center'>
|
|
Envision Center
|
|
<div>
|
|
<Button onClick={() => setOpen(false)}>
|
|
<X />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className='mt-3 font-medium'>
|
|
{meun.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
className='flex items-center p-4 gap-3 cursor-pointer hover:bg-secondary hover:text-white rounded-md'
|
|
onClick={() => {
|
|
if (item.link) navigate(`${item.link}`);
|
|
else {
|
|
message.info('About Envision Center');
|
|
}
|
|
setOpen(false);
|
|
}}>
|
|
<div className='w-6 h-6'>{item.icon}</div>
|
|
<div>{item.title}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|