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

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