nav

src/components/header/Header.tsx

@@ -1,10 +1,12 @@
 // Components
 import SupHeader from "./SupHeader";
+import Nav from "./Nav";
 
 const Header = () => {
   return (
     <div className="header">
       <SupHeader />
+      <Nav />
     </div>
   );
 };

src/components/header/Nav.tsx

@@ -0,0 +1,37 @@
+// Modules
+import { Link } from "react-router-dom";
+const Nav = () => {
+  return (
+    <div className="nav">
+      <div className="container">
+        <div className="nav-inner">
+          <ul>
+            <li>
+              <Link to="/">Политика</Link>
+            </li>
+            <li>
+              <Link to="/">Экономика</Link>
+            </li>
+            <li>
+              <Link to="/">Общество</Link>
+            </li>
+            <li>
+              <Link to="/">Культура</Link>
+            </li>
+            <li>
+              <Link to="/">Спорт</Link>
+            </li>
+            <li>
+              <Link to="/">Технологии</Link>
+            </li>
+            <li>
+              <Link to="/">Экология</Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Nav;

src/styles/_header.scss

@@ -1,3 +1,4 @@
+// SUPHEADER
 .supheader {
   height: 11rem;
   background: $main;
@@ -29,3 +30,27 @@
     object-fit: contain;
   }
 }
+
+// NAV
+
+.nav {
+  background: $main;
+}
+
+.nav-inner {
+  ul {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    gap: 0.8rem;
+
+    li {
+      a {
+        display: block;
+        padding: 1.6rem 0;
+        font-size: 1.6rem;
+        color: $white;
+      }
+    }
+  }
+}