feat: add github login

src/modules/layout/Menu.tsx

@@ -0,0 +1,78 @@
+import { useShallow } from 'zustand/react/shallow';
+import { useMenuStore } from './store';
+import clsx from 'clsx';
+import { Button, message } from 'antd';
+import { CloseOutlined, CodeOutlined, DashboardOutlined, HomeOutlined, MessageOutlined, ReadOutlined, RocketOutlined, SmileOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router';
+const meun = [
+  {
+    title: 'Home',
+    icon: <HomeOutlined />,
+    link: '/map',
+  },
+  {
+    title: 'Panel',
+    icon: <DashboardOutlined />,
+    link: '/panel/edit/list',
+  },
+  {
+    title: 'Prompt',
+    icon: <MessageOutlined />,
+    link: '/prompt',
+  },
+  {
+    title: 'Container',
+    icon: <CodeOutlined />,
+    link: '/container/edit/list',
+  },
+  {
+    title: 'Agent',
+    icon: <RocketOutlined />,
+    link: '/agent/edit/list',
+  },
+  {
+    title: 'Chat Prompt',
+    icon: <ReadOutlined />,
+    link: '/chat/chat-prompt/list',
+  },
+  {
+    title: 'About',
+    icon: <SmileOutlined />,
+  },
+];
+export const LayoutMenu = () => {
+  const { open, setOpen } = useMenuStore(useShallow((state) => ({ open: state.open, setOpen: state.setOpen })));
+  const navigate = useNavigate();
+  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'></div>
+      <div className='w-[300px] h-full absolute top-0 left-0 bg-white'>
+        <div className='flex justify-between p-6 font-bold items-center'>
+          Envision
+          <div>
+            <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 gap-3 cursor-pointer hover:bg-slate-200 rounded-md'
+                onClick={() => {
+                  if (item.link) navigate(`${item.link}`);
+                  else {
+                    message.info('About Envision');
+                  }
+                  setOpen(false);
+                }}>
+                <div className='w-6 h-6'>{item.icon}</div>
+                <div>{item.title}</div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};

src/modules/layout/index.tsx

@@ -1,14 +1,33 @@
 import { AiMoudle } from '@/pages/ai-chat';
+import { MenuOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
 import { Outlet } from 'react-router-dom';
+import { LayoutMenu } from './Menu';
+import { useMenuStore } from './store';
+import { useShallow } from 'zustand/react/shallow';
 
 type LayoutMainProps = {
   title?: React.ReactNode;
   children?: React.ReactNode;
 };
 export const LayoutMain = (props: LayoutMainProps) => {
+  const menuStore = useMenuStore(
+    useShallow((state) => {
+      return { open: state.open, setOpen: state.setOpen };
+    }),
+  );
   return (
-    <div className='flex w-full h-full flex-col'>
-      <div className='layout-menu'>{props.title}</div>
+    <div className='flex w-full h-full flex-col relative'>
+      <LayoutMenu />
+      <div className='layout-menu items-center'>
+        <Button
+          className='mr-4'
+          onClick={() => {
+            menuStore.setOpen(true);
+          }}
+          icon={<MenuOutlined />}></Button>
+        <div className='flex flex-grow justify-between'>{props.title}</div>
+      </div>
       <div
         className='flex'
         style={{

src/modules/layout/store/index.ts

@@ -0,0 +1,10 @@
+import { create } from 'zustand';
+
+export type MenuStore = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+};
+export const useMenuStore = create<MenuStore>((set) => ({
+  open: false,
+  setOpen: (open) => set({ open }),
+}));