From b4adb4bdd52b4c1929c33c5d95b32f479ffea6cc Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Wed, 8 Mar 2023 20:01:57 +0300
Subject: [PATCH] Working in sideBar

---
 src/components/SideBar/SideBar.js   | 29 ++++++++-----
 src/components/SideBar/sidebar.scss | 63 ++++++++++++++++++++++++-----
 src/images/sideBarArrow.svg         |  3 ++
 3 files changed, 76 insertions(+), 19 deletions(-)
 create mode 100644 src/images/sideBarArrow.svg

diff --git a/src/components/SideBar/SideBar.js b/src/components/SideBar/SideBar.js
index d682118a..ffe45aae 100644
--- a/src/components/SideBar/SideBar.js
+++ b/src/components/SideBar/SideBar.js
@@ -1,20 +1,31 @@
-import React from "react";
+import React, { useState } from "react";
+
+import arrow from "../../images/sideBarArrow.svg";
+
 import "./sidebar.scss";
 
-export const SideBar = ({ active, setActive }) => {
+export const SideBar = () => {
+  const [active, setActive] = useState(false);
+
+  const toggleBar = () => {};
   return (
-    <div className={active ? "auth-menu active" : "auth-menu"}>
+    <div className="auth-menu">
       <div className="auth-title">
         <div className="text">
-          <h3>МЕНЮ</h3>
-          <div className="burger">
-            <span className="burger__line"></span>
-            <span className="burger__line"></span>
-            <span className="burger__line"></span>
+          <div className="burger" onClick={() => setActive(true)}>
+            <div className="burger__line"></div>
+            <div className="burger__line"></div>
+            <div className="burger__line"></div>
           </div>
+
+          <h3>МЕНЮ</h3>
         </div>
-        <p>2023 © Outstaffing</p>
+        <p className="outstaffing">
+          <img src={arrow}></img>
+          2023 © Outstaffing
+        </p>
       </div>
+      <div className={active ? "auth-body active" : "auth-body"}></div>
     </div>
   );
 };
diff --git a/src/components/SideBar/sidebar.scss b/src/components/SideBar/sidebar.scss
index aedb24eb..0688fc05 100644
--- a/src/components/SideBar/sidebar.scss
+++ b/src/components/SideBar/sidebar.scss
@@ -1,4 +1,5 @@
 .auth-menu {
+  z-index: 99;
   position: absolute;
   top: 0;
   left: 0;
@@ -7,20 +8,62 @@
   background: #e1fccf;
 }
 
-.auth-menu.active {
-}
-
 .auth-title {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 80%;
+
   .text {
+    display: flex;
+    flex-direction: column;
+    margin: 40px 0 0 0;
+
+    h3 {
+      transform: rotate(270deg);
+      font-size: 25px;
+      line-height: 32px;
+      text-transform: uppercase;
+      color: #222222;
+    }
+
+    .burger {
+      margin-bottom: 70px;
+
+      &__line {
+        width: 32px;
+        border-radius: 33px;
+        height: 5px;
+        background-color: #333;
+        margin: 5px 0 0 27px;
+        transition: 0.4s;
+      }
+    }
   }
 
-  .burger {
-    &__line {
-      width: 35px;
-      height: 5px;
-      background-color: #333;
-      margin: 6px 0;
-      transition: 0.4s;
+  .outstaffing {
+    rotate: 270deg;
+    font-size: 18px;
+    line-height: 32px;
+    width: 200px;
+
+    img {
+      margin-right: 15px;
     }
   }
 }
+
+.auth-body {
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: #e1fccf;
+  width: 0;
+}
+
+.auth-body.active {
+  width: 565px;
+}
diff --git a/src/images/sideBarArrow.svg b/src/images/sideBarArrow.svg
new file mode 100644
index 00000000..c923cf32
--- /dev/null
+++ b/src/images/sideBarArrow.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 2L19.8415 2.31926L20.5272 0.511953L18.7027 1.15053L19 2ZM12.9294 18L12.107 18.3655L12.9951 20.3639L13.7709 18.3193L12.9294 18ZM9.72941 10.8L10.5518 10.4345C10.4646 10.2381 10.31 10.0795 10.1159 9.98722L9.72941 10.8ZM3 7.6L2.70268 6.75053L0.637736 7.47326L2.6135 8.41278L3 7.6ZM18.1585 1.68074L12.0879 17.6807L13.7709 18.3193L19.8415 2.31926L18.1585 1.68074ZM13.7518 17.6345L10.5518 10.4345L8.90698 11.1655L12.107 18.3655L13.7518 17.6345ZM10.1159 9.98722L3.3865 6.78722L2.6135 8.41278L9.34291 11.6128L10.1159 9.98722ZM3.29732 8.44947L19.2973 2.84947L18.7027 1.15053L2.70268 6.75053L3.29732 8.44947Z" fill="#222222"/>
+</svg>