Added Article pages and fixed SideBar

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;

src/components/UI/CardArticle/CardArticle.jsx

@@ -1,17 +1,20 @@
 import React from "react";
 import cardCalendar from "../../../images/cardCalendar.svg";
+import { Link } from "react-router-dom";
 
 import "./cardArticle.scss";
 
 export const CardArticle = ({ images, title, data, id }) => {
   return (
     <div className="card-article">
-      <img src={images} />
-      <h5>{title}</h5>
-      <div className="card-article__data">
-        <img src={cardCalendar} />
-        <p>{data}</p>
-      </div>
+      <Link to={`/blog/article/${id}`}>
+        <img src={images} />
+        <h5>{title}</h5>
+        <div className="card-article__data">
+          <img src={cardCalendar} />
+          <p>{data}</p>
+        </div>
+      </Link>
     </div>
   );
 };

src/components/UI/CardArticle/cardArticle.scss

@@ -3,6 +3,19 @@
   border-radius: 12px;
   width: 344px;
   margin-bottom: 24px;
+  transition: 0.4s;
+  a {
+    color: #000000;
+  }
+
+  &:hover {
+    cursor: pointer;
+    transform: scale(1.05);
+    transition: 0.4s;
+    a {
+      color: #000000;
+    }
+  }
 
   h5 {
     font-style: normal;