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

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