feat: add MainLayout with sidebar

client/src/pages/MainLayout.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Layout } from 'antd';
+import Sider from 'antd/es/layout/Sider';
+import SiderMenu from '../components/SiderMenu';
+
+export default function MainLayout() {
+  const [collapsed, setCollapsed] = useState(false);
+  const [selectedKey, setSelectedKey] = useState('1');
+
+  function hangleMenuClick(e: any) {
+    if (e.key === '0') {
+      setCollapsed((prev) => !prev);
+      return;
+    }
+
+    setSelectedKey(e.key);
+  }
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sider
+        collapsible
+        collapsed={collapsed}
+        onCollapse={(value) => setCollapsed(value)}
+        theme="light"
+        width={'15%'}
+        collapsedWidth={'3.8%'}
+        trigger={null}
+      >
+        <SiderMenu
+          selectedKey={selectedKey}
+          hangleMenuClick={hangleMenuClick}
+        />
+      </Sider>
+      <Layout>
+        <div>Main layout</div>
+      </Layout>
+    </Layout>
+  );
+}