dmitryi698 · dmitryi698 · Mar 31, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.3.5",
     "@ant-design/nextjs-registry": "^1.0.0",
     "antd": "^5.15.4",
     "next": "14.1.4",

diff --git a/page.ts b/page.ts
diff --git a/src/app/clients/[uid]/page.tsx b/src/app/clients/[uid]/page.tsx
diff --git a/src/app/clients/page.tsx b/src/app/clients/page.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import { AntdRegistry } from "@ant-design/nextjs-registry";
+import PageLayout from "@/components/page-layout/PageLayout";
+
+import "../lib/styles/main.css";
 
 const RootLayout = ({ children }: React.PropsWithChildren) => (
   <html lang="en">
     <body>
-      <AntdRegistry>{children}</AntdRegistry>
+      <AntdRegistry>
+        <PageLayout>{children}</PageLayout>
+      </AntdRegistry>
     </body>
   </html>
 );

diff --git a/src/app/offers/[uid]/page.tsx b/src/app/offers/[uid]/page.tsx
diff --git a/src/app/offers/page.tsx b/src/app/offers/page.tsx
diff --git a/src/app/page.module.css b/src/app/page.module.css
@@ -4,7 +4,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 6rem;
-  min-height: 100vh;
+  /* min-height: 100vh; */
 }
 
 .description {
@@ -194,11 +194,7 @@
     inset: auto 0 0;
     padding: 2rem;
     height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
+    background: linear-gradient(to bottom, transparent 0%, rgb(var(--background-end-rgb)) 40%);
     z-index: 1;
   }
 }

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { Menu } from "antd";
+import { UploadOutlined, UserOutlined, VideoCameraOutlined } from "@ant-design/icons";
+import styles from "./Menu.module.css";
+
+const items = [UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(
+  (icon, index) => ({
+    key: String(index + 1),
+    icon: React.createElement(icon),
+    label: `nav ${index + 1}`,
+  }),
+);
+
+const PageMenu = (props) => {
+  return <Menu theme="dark" mode="inline" defaultSelectedKeys={["4"]} items={items} />;
+};
+export default PageMenu;
diff --git a/src/components/menu/menu.data.json b/src/components/menu/menu.data.json
diff --git a/src/components/menu/menu.module.css b/src/components/menu/menu.module.css
diff --git a/src/components/page-layout/PageLayout.tsx b/src/components/page-layout/PageLayout.tsx
@@ -0,0 +1,37 @@
+"use client";
+import React, { useState } from "react";
+import Layout, { Content, Footer, Header } from "antd/es/layout/layout";
+import Sider from "../sider/Sider";
+
+const PageLayout = ({ children }: React.PropsWithChildren) => {
+  return (
+    <Layout
+      style={{
+        height: "100vh",
+      }}>
+      <Sider />
+      <Layout>
+        <Header
+          style={{
+            padding: 0,
+            background: "#f5f5f5",
+            borderBottom: "1px solid #ddd",
+            boxShadow: "1px 5px 15px rgba(0, 0, 0, 0.25)",
+          }}
+        />
+        <Content style={{ margin: "24px 16px 0" }}>
+          <div
+            style={{
+              padding: 24,
+              minHeight: 360,
+            }}>
+            {children}
+          </div>
+        </Content>
+        <Footer style={{ textAlign: "center" }}>Ant Design ©{new Date().getFullYear()}</Footer>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default PageLayout;
diff --git a/src/components/sider/Sider.tsx b/src/components/sider/Sider.tsx
@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+import Sider from "antd/es/layout/Sider";
+import PageMenu from "../menu/Menu";
+
+const PageSider: React.FC = () => {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <Sider breakpoint="lg" collapsedWidth="0" collapsed={collapsed}>
+      <PageMenu />
+    </Sider>
+  );
+};
+
+export default PageSider;
diff --git a/src/lib/styles/main.css b/src/lib/styles/main.css
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}