Working in sideBar

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

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

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>