feat: add layout and org

src/modules/layout/LayoutUser.tsx

@@ -0,0 +1,99 @@
+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: '/panel/edit/list',
+  },
+];
+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>
+  );
+};