107 lines
3.3 KiB
TypeScript
107 lines
3.3 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 HomeOutlined from '@ant-design/icons/HomeOutlined';
|
|
import AppstoreOutlined from '@ant-design/icons/AppstoreOutlined';
|
|
import FolderOutlined from '@ant-design/icons/FolderOutlined';
|
|
import CodeOutlined from '@ant-design/icons/CodeOutlined';
|
|
import SwitcherOutlined from '@ant-design/icons/SwitcherOutlined';
|
|
import SmileOutlined from '@ant-design/icons/SmileOutlined';
|
|
import { X, Settings } from 'lucide-react';
|
|
import { useNewNavigate } from '../navicate';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Map } from 'lucide-react';
|
|
export const useQuickMenu = () => {
|
|
const { t } = useTranslation();
|
|
return [
|
|
{
|
|
title: t('Home'),
|
|
icon: <HomeOutlined />,
|
|
link: '/home',
|
|
},
|
|
{
|
|
title: t('User App'),
|
|
icon: <AppstoreOutlined />,
|
|
link: '/app/edit/list',
|
|
},
|
|
{
|
|
title: t('File App'),
|
|
icon: <FolderOutlined />,
|
|
link: '/file/edit/list',
|
|
},
|
|
];
|
|
};
|
|
export const LayoutMenu = () => {
|
|
const { t } = useTranslation();
|
|
const meun = [
|
|
{
|
|
title: t('Home'),
|
|
icon: <HomeOutlined />,
|
|
link: '/home',
|
|
},
|
|
{
|
|
title: t('User App'),
|
|
icon: <AppstoreOutlined />,
|
|
link: '/app/edit/list',
|
|
},
|
|
{
|
|
title: t('File App'),
|
|
icon: <FolderOutlined />,
|
|
link: '/file/edit/list',
|
|
},
|
|
{
|
|
title: t('Container'),
|
|
icon: <CodeOutlined />,
|
|
link: '/container/edit/list',
|
|
},
|
|
{ title: t('Config'), icon: <Settings size={16} />, link: '/config/edit/list' },
|
|
{ title: t('Map'), icon: <Map size={16} />, link: '/map' },
|
|
{
|
|
title: t('About'),
|
|
icon: <SmileOutlined />,
|
|
},
|
|
];
|
|
const { open, setOpen } = useLayoutStore(useShallow((state) => ({ open: state.open, setOpen: state.setOpen })));
|
|
const navigate = useNewNavigate();
|
|
return (
|
|
<div className={clsx('w-full h-full text-primary 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 '>
|
|
<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 flex items-center justify-center'>{item.icon}</div>
|
|
<div>{item.title}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|