created hover links

src/SASS/pages/_home.scss

@@ -6,6 +6,28 @@
   display: flex;
   font-size: $normal-font-size;
 
+  &__hover-list {
+    display: flex;
+    flex-direction: column;
+    list-style-type: none;
+    background-color: $color-white;
+    z-index: 100;
+    visibility: hidden;
+    text-align: center;
+    position: absolute;
+    top: 100%;
+    right: 0%;
+
+    &-item {
+      height: 3rem;
+      width: 12.5rem;
+    }
+    &-item-link {
+      text-decoration: none;
+      color: $color-primary;
+    }
+  }
+
   @include media("<smallest") {
     flex-wrap: wrap;
     align-content: space-around;
@@ -88,6 +110,7 @@
     display: flex;
     align-items: center;
     align-self: stretch;
+    position: relative;
 
     & > * {
       padding: 0 2rem;
@@ -133,6 +156,10 @@
       border-radius: 50%;
       margin-right: 1rem;
     }
+
+    &--user:hover .header__hover-list {
+      visibility: visible;
+    }
   }
 }
 

src/commons/header/header.jsx

@@ -1,6 +1,7 @@
 import logo from "../img/logo.png";
 import sprite from "../img/sprite.svg";
 import user from "../img/user.jpg";
+import "font-awesome/css/font-awesome.min.css";
 
 function Header() {
   return (
@@ -35,6 +36,33 @@ function Header() {
         <div className="header__user-nav--user">
           <img src={user} alt="User" className="header__user-nav--user-photo" />
           <span className="header__user-nav--user-name">Yusuf</span>
+          <ul className="header__hover-list">
+            <li className="header__hover-list-item">
+              <a href="#" className="header__hover-list-item-link">
+                <i class="fa fa-user"></i> My Profile
+              </a>
+            </li>
+            <li className="header__hover-list-item">
+              <a
+                href="https://yusufipek.me"
+                target="_blank"
+                rel="noreferrer"
+                className="header__hover-list-item-link"
+              >
+                <i class="fa fa-globe"></i> My Website
+              </a>
+            </li>
+            <li className="header__hover-list-item">
+              <a
+                href="https://github.com/yusufipk"
+                target="_blank"
+                rel="noreferrer"
+                className="header__hover-list-item-link"
+              >
+                <i class="fa fa-github"></i> Github
+              </a>
+            </li>
+          </ul>
         </div>
       </nav>
     </header>