react-router-dom

src/components/nav-panel/nav-panel.tsx

@@ -1,30 +1,45 @@
 import React from "react";
+// import { Link as ConnectedLink } from 'react-router-dom'
 
 import { Link } from "../link";
 
 import { Nav, NavList } from "./nav-panel.style";
+import { URLs } from "../../__data__/urls";
 
 const navList = [
-  { title: "Home", href: "#01" },
-  { title: "Персонажи", href: "#02" },
+  { title: "Home", href: "/r-and-m" },
+  { title: "Персонажи", href: "/r-and-m/search" },
   { title: "Локации", href: "#03" },
   { title: "Эризоды", href: "#04" },
 ];
 
+const nav = {
+  home: { title: "Home", href: URLs.baseUrl },
+  search: { title: "Персонажи", href: URLs.ui.search },
+};
+
 export function NavPanel({ currentNavElement }) {
   return (
     <Nav>
       <NavList>
-        {navList.map((element) => (
-          <li key={element.href}>
+        <li>
+          <Link
+            contrast={currentNavElement === nav.home.title}
+            href={nav.home.href}
+          >
+            {nav.home.title}
+          </Link>
+        </li>
+        {URLs.ui.search && (
+          <li>
             <Link
-              contrast={currentNavElement === element.title}
-              href={element.href}
+              contrast={currentNavElement === nav.search.title}
+              href={nav.search.href}
             >
-              {element.title}
+              {nav.search.title}
             </Link>
           </li>
-        ))}
+        )}
       </NavList>
     </Nav>
   );