From e7fbd53dfe88842ea04c669ac603bb073c9c73e4 Mon Sep 17 00:00:00 2001
From: Vladislav <vlad.dev@heado.ru>
Date: Mon, 21 Apr 2025 13:19:30 +0500
Subject: [PATCH] feat: add content drawer and change header img to avatar

---
 client/public/icons/drawer/arrow_back.svg |   3 +
 client/public/icons/drawer/delete.svg     |   3 +
 client/src/components/ContentDrawer.tsx   | 101 ++++++++++++++++++++++
 client/src/components/Header.tsx          |  11 +--
 4 files changed, 111 insertions(+), 7 deletions(-)
 create mode 100644 client/public/icons/drawer/arrow_back.svg
 create mode 100644 client/public/icons/drawer/delete.svg
 create mode 100644 client/src/components/ContentDrawer.tsx

diff --git a/client/public/icons/drawer/arrow_back.svg b/client/public/icons/drawer/arrow_back.svg
new file mode 100644
index 0000000..8f4a6dc
--- /dev/null
+++ b/client/public/icons/drawer/arrow_back.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.825 9L9.425 14.6L8 16L0 8L8 0L9.425 1.4L3.825 7H16V9H3.825Z" fill="#606060"/>
+</svg>
diff --git a/client/public/icons/drawer/delete.svg b/client/public/icons/drawer/delete.svg
new file mode 100644
index 0000000..e2c48d6
--- /dev/null
+++ b/client/public/icons/drawer/delete.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 18C2.45 18 1.97917 17.8042 1.5875 17.4125C1.19583 17.0208 1 16.55 1 16V3H0V1H5V0H11V1H16V3H15V16C15 16.55 14.8042 17.0208 14.4125 17.4125C14.0208 17.8042 13.55 18 13 18H3ZM13 3H3V16H13V3ZM5 14H7V5H5V14ZM9 14H11V5H9V14Z" fill="#FF0000"/>
+</svg>
diff --git a/client/src/components/ContentDrawer.tsx b/client/src/components/ContentDrawer.tsx
new file mode 100644
index 0000000..5c83586
--- /dev/null
+++ b/client/src/components/ContentDrawer.tsx
@@ -0,0 +1,101 @@
+import { Drawer } from 'antd';
+import { useEffect, useState } from 'react';
+import { Avatar, Typography } from 'antd';
+
+interface ContentDrawerProps {
+  open: boolean;
+  closeDrawer: () => void;
+  children: React.ReactNode;
+}
+
+export default function ContentDrawer({
+  open,
+  closeDrawer,
+  children,
+}: ContentDrawerProps) {
+  const [width, setWidth] = useState<number | string>('30%');
+
+  const calculateWidths = () => {
+    const windowWidth = window.innerWidth;
+    const expanded = Math.max(windowWidth * 0.3, 300);
+    setWidth(expanded);
+  };
+
+  useEffect(() => {
+    calculateWidths();
+    window.addEventListener('resize', calculateWidths);
+    return () => window.removeEventListener('resize', calculateWidths);
+  }, []);
+
+  const drawerTitle = (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+      }}
+    >
+      <div
+        onClick={closeDrawer}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          height: '24px',
+          width: '24px',
+          cursor: 'pointer',
+        }}
+      >
+        <img
+          src="./icons/drawer/arrow_back.svg"
+          alt="close_drawer"
+          style={{ height: '16px', width: '16px' }}
+        />
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1 }}>
+        <Avatar
+          src="https://cdn-icons-png.flaticon.com/512/219/219986.png"
+          size={40}
+          style={{ flexShrink: 0 }}
+        />
+        <div>
+          <Typography.Text strong style={{ display: 'block' }}>
+            Александр Александров
+          </Typography.Text>
+          <Typography.Text type="secondary" style={{ fontSize: 14 }}>
+            alexandralex@vorkout.ru
+          </Typography.Text>
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          height: '24px',
+          width: '24px',
+        }}
+      >
+        <img
+          src="./icons/drawer/delete.svg"
+          alt="delete"
+          style={{ height: '18px', width: '16px' }}
+        />
+      </div>
+    </div>
+  );
+
+  return (
+    <Drawer
+      title={drawerTitle}
+      placement="right"
+      open={open}
+      width={width}
+      destroyOnClose={true}
+      closable={false}
+    >
+      {children}
+    </Drawer>
+  );
+}
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 18a3b7b..1dd99bf 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -1,3 +1,4 @@
+import { Avatar } from 'antd';
 import Title from 'antd/es/typography/Title';
 
 interface HeaderProps {
@@ -41,13 +42,9 @@ export default function Header({ title }: HeaderProps) {
             justifyContent: 'center',
           }}
         >
-          <img
-            src="https://cdn-icons-png.flaticon.com/512/219/219986.png"
-            alt="user"
-            style={{
-              height: '25.771240234375px',
-              width: '25.771240234375px',
-            }}
+          <Avatar
+            size={25.77}
+            src={`https://cdn-icons-png.flaticon.com/512/219/219986.png`}
           />
         </div>
       </div>