Fixed conflicts

src/components/SideBar/SideBar.jsx

@@ -1,11 +1,10 @@
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
 
 import arrow from "../../images/sideBarArrow.svg";
 import LogoITguild from "../../images/LogoITguild.svg";
 
 import "./sidebar.scss";
-import { Link } from "react-router-dom";
-import { FREQUENTLY_ASKED_QUESTIONS_ROUTE } from "../../constants/router-path";
 
 export const SideBar = () => {
   const [active, setActive] = useState(false);
@@ -48,10 +47,10 @@ export const SideBar = () => {
         </div>
         <ul className="auth-body__navigation">
           <li>
-            <a href="#">Вход для партнеров</a>
+            <Link to={"/auth"}>Вход для партнеров</Link>
           </li>
           <li>
-            <a href="#">Кабинет разработчика</a>
+            <Link to={"/auth"}>Кабинет разработчика</Link>
           </li>
           <li>
             <a href="#">Школа</a>
@@ -63,10 +62,10 @@ export const SideBar = () => {
             <a href="#">Контакты</a>
           </li>
           <li>
-            <a href="#">Блог</a>
+            <Link to={"/blog"}>Блог</Link>
           </li>
           <li>
-            <Link to={FREQUENTLY_ASKED_QUESTIONS_ROUTE}>FAQ</Link>
+            <Link to={"/frequently-asked-questions"}>FAQ</Link>
           </li>
         </ul>
         <p className="auth-body__politic">Политика конфиденциальности</p>

src/components/SideBar/sidebar.scss

@@ -20,11 +20,13 @@
 }
 
 .auth-title {
+  position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   height: 80%;
+  z-index: 9999;
 
   .text {
     display: flex;
@@ -108,8 +110,10 @@
 
 .auth-body {
   padding: 40px;
-  display: none;
-  z-index: -1;
+  visibility: hidden;
+  transition: 0.2s ease-in-out;
+  opacity: 0;
+  z-index: 99;
   position: absolute;
   top: 0;
   left: 0;
@@ -173,6 +177,9 @@
 }
 
 .auth-body.active {
+  visibility: visible;
+  transition: 0.1s ease-in-out;
+  opacity: 1;
   display: flex;
   width: 424px;
   left: 140px;
@@ -184,6 +191,6 @@
   @media (max-width: 1375px) {
     left: 0;
     width: 100%;
-    height: 535px;
+    height: 605px;
   }
 }