update

src/components/contacts/contacts.component.jsx

@@ -21,18 +21,18 @@ const Contacts = () => {
         <a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
       </div>
       <div>
-        <a href="https://telegram.me/vlsqzwsme" target="_blank">
+        <a href="https://telegram.me/vlsqzwsme" target="_blank" rel="noreferrer">
           <img src={Telegram} alt="telegram" />
         </a>
-        <a href="https://telegram.me/vlsqzwsme" target="_blank">
+        <a href="https://telegram.me/vlsqzwsme" target="_blank" rel="noreferrer">
           Telegram
         </a>
       </div>
       <div>
-        <a href="https://wa.me/37125704038" target="_blank">
+        <a href="https://wa.me/37125704038" target="_blank" rel="noreferrer">
           <img src={Whatsapp} alt="whatsapp" />
         </a>
-        <a href="https://wa.me/37125704038" target="_blank">
+        <a href="https://wa.me/37125704038" target="_blank" rel="noreferrer">
           WhatsApp
         </a>
       </div>

src/components/header/header.component.jsx

@@ -1,8 +1,6 @@
 import * as React from "react";
 
 import Logo from "../../assets/images/main/header/logo.svg";
-import OpenMenu from "../../assets/images/main/header/menu.svg";
-import CloseMenu from "../../assets/images/main/header/menu-close.svg";
 import Logo2 from "../../assets/images/main/footer/logo.svg";
 import Phone from "../../assets/images/main/footer/phone.png";
 import Email from "../../assets/images/main/footer/email.png";
@@ -19,8 +17,8 @@ const MidHeader = () => {
 
     if (Menu.classList.contains("open")) {
       const outsideClickListener = (event) => {
-        console.log("added");
         let MenuVisible = getComputedStyle(Menu).right;
+
         if (
           !Menu.contains(event.target) &&
           MenuVisible !== 0 &&
@@ -35,7 +33,6 @@ const MidHeader = () => {
         }
       };
       const removeClickListener = () => {
-        console.log("removed");
         document.removeEventListener("click", outsideClickListener);
       };
       document.addEventListener("click", outsideClickListener);
@@ -62,7 +59,14 @@ const MidHeader = () => {
         <a href="#contact-us">Contact Us</a>
       </nav>
 
-      <div className="mobile-menu-btn" onClick={toggleMenu}>
+      <div
+        className="mobile-menu-btn"
+        onClick={toggleMenu}
+        onKeyDown={toggleMenu}
+        aria-label="menu button"
+        role="button"
+        tabIndex={0}
+      >
         <span id="top-left"></span>
         <span id="top-right"></span>
         <span id="center-left"></span>

src/components/header/header.style.scss

@@ -36,6 +36,10 @@ header {
     display: none;
     cursor: pointer;
 
+    &:focus {
+      outline: 1px solid #fff;
+    }
+
     span {
       background-color: #fff;
       height: 5px;
@@ -62,17 +66,23 @@ header {
       width: 5px;
     }
 
-    #top-left, #top-right {
+    #top-left,
+    #top-right {
       top: 0;
     }
-    #center-left, #center-right {
+    #center-left,
+    #center-right {
       top: 9px;
     }
-    #bottom-left, #bottom-right {
+    #bottom-left,
+    #bottom-right {
       bottom: 0;
     }
 
-    #top-right, #center-right, #bottom-right, #bottom-left {
+    #top-right,
+    #center-right,
+    #bottom-right,
+    #bottom-left {
       right: 0;
     }
 
@@ -81,11 +91,13 @@ header {
     }
 
     &.open {
-      #top-right, #center-right {
+      #top-right,
+      #center-right {
         width: 5px;
       }
 
-      #center-right, #center-left {
+      #center-right,
+      #center-left {
         right: 9px;
         left: unset;
       }

src/components/intro/intro.component.jsx

@@ -2,13 +2,9 @@ import React from "react";
 
 import "./intro.styles.scss";
 
-import Astronaut from "../../assets/images/main/intro/astronaut.png";
 import Spaceship from "../../assets/images/main/intro/spaceship.svg";
 
 const Intro = () => {
-
-  const mobileWidth = 767;
-
   return (
     <section className="container intro">
       <div className="image"></div>

src/components/section/section.component.jsx

@@ -1,12 +1,12 @@
-import React, { Children } from "react";
+import React from "react";
 
-import "./section.style.scss"
+import "./section.style.scss";
 
 const MidSection = (props) => {
-   return (
+  return (
     <section className="container content" id={props.id}>
-      {props.title ? (<h2>{props.title}</h2>) : null}
+      {props.title ? <h2>{props.title}</h2> : null}
-      {props.children}      
+      {props.children}
     </section>
   );
 };