Fixed header auth

src/components/AuthHeader/AuthHeader.js

@@ -1,5 +1,7 @@
 import React from "react";
 
+import userIcon from "../../images/userIcon.png";
+
 import "./authHeader.scss";
 
 export const AuthHeader = ({}) => {
@@ -8,7 +10,27 @@ export const AuthHeader = ({}) => {
       <div className="auth-header__logo">
         <h3>itguild.</h3>
       </div>
-      <div className="auth-header__navigation"></div>
+      <div className="auth-header__navigation">
+        <div className="container">
+          <div className="auth-nav">
+            <ul>
+              <li>
+                <a href="#">Главная</a>
+              </li>
+              <li>
+                <a href="#">Кабинет разработчика</a>
+              </li>
+              <li>
+                <a href="#">Школа</a>
+              </li>
+            </ul>
+
+            <a href="#">
+              <img src={userIcon}></img>
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

src/components/AuthHeader/authHeader.scss

@@ -0,0 +1,53 @@
+.auth-header {
+  background-color: #f1f1f1;
+
+  &__logo {
+    padding: 0 0 0 160px;
+    height: 55px;
+    display: flex;
+    align-items: center;
+
+    h3 {
+      font-size: 20px;
+      line-height: 32px;
+      color: #000000;
+    }
+  }
+
+  &__navigation {
+    display: flex;
+    align-items: center;
+    height: 66px;
+    width: 100%;
+    background: #ffffff;
+
+    .auth-nav {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      ul {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        li {
+          margin-right: 25px;
+
+          font-size: 18px;
+          line-height: 32px;
+
+          a,
+          a:hover {
+            color: #897676;
+          }
+
+          a:focus {
+            color: #000000;
+          }
+        }
+      }
+    }
+  }
+}