add navigation component

src/components/Header/Header.css

@@ -18,21 +18,6 @@
   font-size: inherit;
 }
 
-.navigation__link {
-  display: inline-block;
-  outline: none;
-  text-decoration: none;
-  opacity: 0.7;
-  padding: 0 0.5em;
-  color: black;
-  transition: opacity 0.2s ease-in-out;
-}
-
-.navigation__link:hover,
-.navigation__link:focus {
-  opacity: 1;
-}
-
 @media (min-width: 500px) {
   .header {
     text-align: left;

src/components/Header/Header.jsx

@@ -1,20 +1,11 @@
+import Navigation from '../Navigation/Navigation';
 import './Header.css';
 
 function Header() {
   return (
     <header className="header">
       <h1 className="header__title">Site Name</h1>
-      <nav className="navigation">
-        <a className="navigation__link" href="#about">
-          About
-        </a>
-        <a className="navigation__link" href="#services">
-          Services
-        </a>
-        <a className="navigation__link" href="#contact">
-          Contact
-        </a>
-      </nav>
+      <Navigation />
     </header>
   );
 }

src/components/Navigation/Navigation.css

@@ -0,0 +1,14 @@
+.navigation__link {
+  display: inline-block;
+  outline: none;
+  text-decoration: none;
+  opacity: 0.7;
+  padding: 0 0.5em;
+  color: black;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.navigation__link:hover,
+.navigation__link:focus {
+  opacity: 1;
+}

src/components/Navigation/Navigation.jsx

@@ -0,0 +1,19 @@
+import './Navigation.css';
+
+function Navigation() {
+  return (
+    <nav className="navigation">
+      <a className="navigation__link" href="#about">
+        About
+      </a>
+      <a className="navigation__link" href="#services">
+        Services
+      </a>
+      <a className="navigation__link" href="#contact">
+        Contact
+      </a>
+    </nav>
+  );
+}
+
+export default Navigation;