add header without bugs

src/components/Header/Header.scss

@@ -2,84 +2,110 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  //   padding: 18px 0;
   border-bottom: 1px solid #e2e6e9;
+  position: relative;
+
   &__menu {
     display: flex;
+    align-items: center;
   }
+
   &__logo {
-    width: 80px;
-    height: 28px;
-    margin-right: 48px;
-    margin-left: 24px;
-    @media (max-width: 1200px) {
-      width: 64px;
-      height: 20px;
+    width: 64px;
+    height: 20px;
+    margin-right: 32px;
+    margin-left: 16px;
+
+    @include onDesktop {
+      width: 80px;
+      height: 28px;
+      margin-right: 48px;
+      margin-left: 24px;
     }
   }
+
   &__icons {
     display: flex;
-    // background-color: aqua;
+
     &--like {
+      display: none;
       width: 16px;
       height: 16px;
       background-image: url(../../img/headerIcon/like.png);
-      display: block;
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
-      margin: 24px;
-      @media (max-width: 1200px) {
+      margin: 16px;
+
+      @include onTablet {
         margin: 16px;
+        display: block;
       }
-      @media (max-width: 640px) {
-        display: none;
+
+      @include onDesktop {
+        margin: 24px;
+        display: block;
       }
     }
+
     &--basket {
+      display: none;
       width: 16px;
       height: 16px;
-      display: block;
       background-image: url(../../img/headerIcon/basket.png);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
-      margin: 24px;
-      @media (max-width: 1200px) {
+      margin: 16px;
+
+      @include onTablet {
         margin: 16px;
+        display: block;
       }
-      @media (max-width: 640px) {
-        display: none;
+
+      @include onDesktop {
+        margin: 24px;
+        display: block;
       }
+
+      // @include onMobile {
+      //   display: none;
+      // }
     }
+
     &--menu {
-      display: none;
       width: 16px;
       height: 16px;
       background-image: url(../../img/headerIcon/Menu.png);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
       margin: 16px;
-      @media (max-width: 640px) {
-        display: block;
+
+      @include onTablet {
+        display: none;
       }
     }
   }
+
   &__icon--like {
     display: block;
     border-right: 1px solid #e2e6e9;
     border-left: 1px solid #e2e6e9;
-    @media (max-width: 640px) {
-      display: none;
+    display: none;
+
+    @include onTablet {
+      display: block;
     }
   }
+
   &__icon--menu {
-    display: none;
+    display: block;
     border-right: 1px solid #e2e6e9;
     border-left: 1px solid #e2e6e9;
-    @media (max-width: 640px) {
-      display: block;
+
+    @include onTablet {
+      display: none;
     }
   }
 }

src/components/Header/Header.tsx

@@ -8,9 +8,12 @@ type Props = {};
 
 export const Header: React.FC<Props> = () => {
   return (
-    <div className="header">
+    <header className="header">
       <div className="header__menu">
-        <img className="header__logo" src={logo} />
+        <a href="/">
+          <img className="header__logo" src={logo} />
+        </a>
+
         <NavHeader />
       </div>
       <div className="header__icons">
@@ -24,6 +27,6 @@ export const Header: React.FC<Props> = () => {
           <div className="header__icons--menu"></div>
         </div>
       </div>
-    </div>
+    </header>
   );
 };

src/components/Header/NavHeader/NavHeader.scss

@@ -1,49 +1,46 @@
 .nav {
-  display: flex;
+  display: none;
+
   align-items: center;
-  @media (max-width: 640px) {
-    display: none;
+  height: 100%;
+  @include onTablet {
+    display: flex;
   }
   &__icon {
+    height: 100%;
+    position: relative;
+    text-decoration: none;
     text-transform: uppercase;
     font-weight: 800;
     font-size: 12px;
     line-height: 11px;
     letter-spacing: 4%;
     color: #89939a;
-
-    &:not(:last-child) {
-      margin-right: 64px;
-    }
-    @media (max-width: 1200px) {
+    @include onTablet {
       &:not(:last-child) {
         margin-right: 36px;
       }
     }
-    &--active {
-      background-color: aqua;
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background-color: #000;
+    @include onDesktop {
+      &:not(:last-child) {
+        margin-right: 64px;
       }
     }
-  }
-}
 
-.nav__icon--active {
-  background-color: aqua;
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background-color: #000;
+    &--active:after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 3px;
+
+      @include onTablet {
+        bottom: -18px;
+      }
+      @include onDesktop {
+        bottom: -26px;
+      }
+      background-color: #000;
+    }
   }
 }

src/components/Header/NavHeader/NavHeader.tsx

@@ -1,15 +1,24 @@
 import React from 'react';
 import './NavHeader.scss';
+import { NavLink } from 'react-router-dom';
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {};
 
 export const NavHeader: React.FC<Props> = () => {
   return (
     <div className="nav">
-      <div className="nav__icon">home</div>
-      <div className="nav__icon">phones</div>
-      <div className="nav__icon">tablets</div>
-      <div className="nav__icon">accessories</div>
+      <NavLink to="/" className="nav__icon nav__icon--active">
+        home
+      </NavLink>
+      <NavLink to="#" className="nav__icon">
+        phones
+      </NavLink>
+      <NavLink to="#" className="nav__icon">
+        tablets
+      </NavLink>
+      <NavLink to="#" className="nav__icon">
+        accessories
+      </NavLink>
     </div>
   );
 };

src/components/Main/Main.scss

@@ -1,5 +1,5 @@
-@import '../../styles/mixins/mixins.scss';
-
+// @import '../../styles/mixins/mixins.scss';
+@import '../../styles/utils/mixins';
 .main {
   grid-column: 1 / -1;
 
@@ -10,10 +10,10 @@
   &__content {
     @include mainContentGrid;
   }
-
-  &__slider, &__categories, &__banner-slider {
+
+  &__slider,
+  &__categories,
+  &__banner-slider {
     display: flex;
   }
-
 }
-