feat: add content drawer and change header img to avatar

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>
+  );
+}

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>