5 лаба

Lab/src/components/Navbar.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export default function Navbar() {
+  return (
+    <nav className="navbar navbar-expand-lg navbar-dark bg-custom-dark px-3">
+      <Link className="navbar-brand" to="/">
+        <img src="/img/manga.png" alt="ЛОГО" height="50" />
+      </Link>
+      <button
+        className="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarNavDropdown"
+        aria-controls="navbarNavDropdown"
+        aria-expanded="false"
+        aria-label="Переключить навигацию"
+      >
+        <span className="navbar-toggler-icon"></span>
+      </button>
+
+      <div className="collapse navbar-collapse ms-3" id="navbarNavDropdown">
+        <ul className="navbar-nav me-auto">
+          <li className="nav-item dropdown">
+            <a className="nav-link dropdown-toggle" href="#" id="catalogDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Каталог
+            </a>
+            <ul className="dropdown-menu dropdown-menu-dark" aria-labelledby="catalogDropdown">
+              <li>
+                <a className="dropdown-item" href="#">
+                  Жанр 1
+                </a>
+              </li>
+              <li>
+                <a className="dropdown-item" href="#">
+                  Жанр 2
+                </a>
+              </li>
+              <li>
+                <a className="dropdown-item" href="#">
+                  Жанр 3
+                </a>
+              </li>
+              <li>
+                <a className="dropdown-item" href="#">
+                  Жанр 4
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+        <Link to="/account" className="btn btn-outline-warning">
+          Вход
+        </Link>
+      </div>
+    </nav>
+  );
+}