105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
import { useShallow } from 'zustand/react/shallow';
|
|
import { useLayoutStore } from './store';
|
|
import clsx from 'clsx';
|
|
import { Button, Dropdown, message } from 'antd';
|
|
import {
|
|
CloseOutlined,
|
|
CodeOutlined,
|
|
DashboardOutlined,
|
|
HomeOutlined,
|
|
MessageOutlined,
|
|
ReadOutlined,
|
|
RocketOutlined,
|
|
SmileOutlined,
|
|
SwapOutlined,
|
|
SwitcherOutlined,
|
|
} from '@ant-design/icons';
|
|
import { useNavigate } from 'react-router';
|
|
import { useMemo } from 'react';
|
|
const meun = [
|
|
{
|
|
title: 'Your profile',
|
|
icon: <HomeOutlined />,
|
|
link: '/map',
|
|
},
|
|
{
|
|
title: 'Your orgs',
|
|
icon: <DashboardOutlined />,
|
|
link: '/org/edit/list',
|
|
},
|
|
{
|
|
title: 'Site Map',
|
|
icon: <HomeOutlined />,
|
|
link: '/map',
|
|
},
|
|
];
|
|
export const LayoutUser = () => {
|
|
const { open, setOpen, ...store } = useLayoutStore(
|
|
useShallow((state) => ({
|
|
open: state.openUser, //
|
|
setOpen: state.setOpenUser,
|
|
me: state.me,
|
|
switchOrg: state.switchOrg,
|
|
})),
|
|
);
|
|
const navigate = useNavigate();
|
|
const items = useMemo(() => {
|
|
const orgs = store.me?.orgs || [];
|
|
return orgs.map((item) => {
|
|
return {
|
|
label: item,
|
|
key: item,
|
|
icon: <SmileOutlined />,
|
|
};
|
|
});
|
|
}, [store.me]);
|
|
return (
|
|
<div className={clsx('w-full h-full absolute z-20', !open && 'hidden')}>
|
|
<div
|
|
className='bg-white w-full absolute h-full opacity-60 z-0'
|
|
onClick={() => {
|
|
setOpen(false);
|
|
}}></div>
|
|
<div className='w-[400px] h-full absolute top-0 right-0 bg-white rounded-l-lg'>
|
|
<div className='flex justify-between p-6 font-bold items-center border-b'>
|
|
User: {store.me?.username}
|
|
<div className='flex gap-4'>
|
|
{items.length > 0 && (
|
|
<Dropdown
|
|
placement='bottomRight'
|
|
menu={{
|
|
items: items,
|
|
onClick: (item) => {
|
|
store.switchOrg(item.key, 'org');
|
|
},
|
|
}}>
|
|
<Button icon={<SwapOutlined />} onClick={() => {}}></Button>
|
|
</Dropdown>
|
|
)}
|
|
<Button icon={<CloseOutlined />} onClick={() => setOpen(false)}></Button>
|
|
</div>
|
|
</div>
|
|
<div className='mt-3 font-medium'>
|
|
{meun.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
className='flex items-center p-4 hover:bg-gray-100 cursor-pointer'
|
|
onClick={() => {
|
|
if (item.link) {
|
|
navigate(item.link);
|
|
} else {
|
|
message.info('Coming soon');
|
|
}
|
|
}}>
|
|
<div className='mr-4'>{item.icon}</div>
|
|
<div>{item.title}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|