добавлено открытие тулбара

package-lock.json

@@ -15,9 +15,11 @@
         "@types/node": "^16.11.46",
         "@types/react": "^18.0.15",
         "@types/react-dom": "^18.0.6",
+        "@types/react-transition-group": "^4.4.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
+        "react-transition-group": "^4.4.2",
         "typescript": "^4.7.4",
         "web-vitals": "^2.1.4"
       }
@@ -3785,6 +3787,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -6283,6 +6293,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -13846,6 +13865,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -19167,6 +19201,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -20999,6 +21041,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -26280,6 +26331,17 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -10,9 +10,11 @@
     "@types/node": "^16.11.46",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "@types/react-transition-group": "^4.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "react-transition-group": "^4.4.2",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },

src/components/mainScreen/mainScreen.css

@@ -5,6 +5,8 @@
 }
 
 .main-screen-model {
+    position: absolute;
+    z-index: -2;
     width: 100%;
     height: 100%;
     background: url('backgroundImagePng.png') 50% 50% no-repeat;

src/components/mainScreen/mainScreen.tsx

@@ -1,8 +1,26 @@
-import React from "react";
+import React, { useState } from "react";
+import { CSSTransition } from "react-transition-group";
 import './mainScreen.css';
+import { Toolbar } from "./toolbar/toolbar";
 
 export const MainScreen:React.FC = React.memo(() => {
+    const [showToolbar, setShowToolbar] = useState<boolean>(false);
+
+    function onClickToolbar() {
+        setShowToolbar(!showToolbar);
+    }
+
     return <div className="main-screen-container">
         <div className="main-screen-model"></div>
+        <CSSTransition
+            in={showToolbar}
+            timeout={300}
+            classNames='show-toolbar'
+        >
+            <Toolbar
+                onClickOpenButton={onClickToolbar}
+                isOpen={showToolbar}
+            />
+        </CSSTransition>
     </div>
 })

src/components/mainScreen/toolbar/closeToolbarIcon.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 17L11 12L16 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 22L7 12L7 2" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/mainScreen/toolbar/openToolbarIcon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="128" viewBox="0 0 24 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H3.69231L22.4433 29.547C23.4601 31.1492 24 33.0076 24 34.9053V93.0947C24 94.9924 23.4601 96.8508 22.4433 98.453L3.69231 128H0V0Z" fill="#333333"/>
+</svg>

src/components/mainScreen/toolbar/pointerIcon.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 17L17 12L12 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 22L7 12L7 2" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/mainScreen/toolbar/toolbar.css

@@ -0,0 +1,70 @@
+.toolbar-container {
+    display: flex;
+    position: relative;
+    height: 100%;
+    width: 94px;
+
+    transform: translateX(-70px);
+}
+
+/* .toolbar-container.closed {
+    transform: translateX(-70px);
+} */
+
+/* .toolbar-container.opened {    
+    transform: translateX(0px);
+} */
+
+.toolbar-field {
+    width: 70px;
+    background: #333333;
+}
+
+.toolbar-open-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: auto;
+    width: 24px;
+    height: 128px;
+    border: none;
+    background: url('openToolbarIcon.svg') 50% 50% no-repeat;
+    background-size: 100% 100%;
+}
+
+.toolbar-open-button-icon {
+    width: 100%;
+    height: 100%;
+    background: url('pointerIcon.svg') 50% 50% no-repeat;
+    background-size: 24px 24px;
+}
+
+.toolbar-container.opened .toolbar-open-button-icon {
+    background: url('closeToolbarIcon.svg') 50% 50% no-repeat;
+}
+
+
+.show-toolbar-enter {
+    transform: translateX(-70px);
+}
+
+.show-toolbar-enter-done {
+    transform: translateX(0px);
+}
+
+.show-toolbar-enter-active {
+    transform: translateX(0);
+    transition: .3s;
+}
+
+.show-toolbar-exit {
+    transform: translateX(0);
+}
+
+.show-toolbar-exit-active {
+    transform: translateX(-70px);
+    transition: .3s;
+}

src/components/mainScreen/toolbar/toolbar.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import './toolbar.css';
+
+type TProps = {
+    onClickOpenButton: () => void
+    isOpen: boolean
+}
+
+export const Toolbar:React.FC<TProps> = React.memo((props) => {
+    return <div className={`toolbar-container ${props.isOpen ? 'opened' : 'closed'}`}>
+        <div className="toolbar-field">
+
+        </div>
+        <button className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
+            <span className="toolbar-open-button-icon"></span>
+        </button>
+    </div>
+})