created hover links

package-lock.json

@@ -10,6 +10,7 @@
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.2.6",
         "@testing-library/user-event": "^12.8.3",
+        "font-awesome": "^4.7.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",
@@ -8552,6 +8553,14 @@
         }
       }
     },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
     "node_modules/for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -28140,6 +28149,11 @@
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.0.tgz",
       "integrity": "sha512-0vRwd7RKQBTt+mgu87mtYeofLFZpTas2S9zY+jIeuLJMNvudIgF52nr19q40HOwH5RrhWIPuj9puybzSJiRrVg=="
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "font-awesome": "^4.7.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

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>