3 files changed, 155 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.css b/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.css
new file mode 100644
index 0000000..9f5f90c
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.css
@@ -0,0 +1,65 @@
+.nav {
+  position: relative;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  margin: 2rem auto 0;
+}
+
+.nav .list--nav {
+  list-style-type: none;
+  position: absolute;
+  bottom: 100%;
+  width: 80vw;
+  margin: 0;
+  padding: 1rem;
+  background: #fff;
+  border: 1px solid #ccc;
+}
+
+@media screen and (min-width: 1024px) {
+  .nav .list--nav {
+    width: 50%;
+  }
+}
+
+.nav__link {
+  background: #fff;
+  border: none;
+  color: hsl(212, 46%, 34%);
+  text-decoration: underline;
+  display: inline-block;
+  margin: 0 1px;
+  padding: 0.8rem 1rem;
+}
+
+.nav .list__link {
+  display: block;
+  padding: 0.2rem;
+}
+
+.nav .list__link--current {
+  background: hsl(212, 46%, 34%);
+  color: #fff;
+}
+
+.nav__link:hover,
+.nav__link:focus,
+.nav .list__link:hover,
+.nav .list__link:focus {
+  text-decoration-thickness: 4px;
+}
+
+.nav__link:focus,
+.nav .list__link:focus {
+  color: inherit;
+}
+
+.nav .list__link--current:focus {
+  color: hsl(0, 0%, 89%);
+}
+
+.nav__link:active {
+  color: hsl(212, 46%, 20%);
+  text-decoration-thickness: 2px;
+}
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.js b/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.js
new file mode 100644
index 0000000..4e2a916
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.js
@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "../../commons";
+import NavJump from "./NavJump";
+import "./Nav.css";
+
+function Nav({ pages, currentPage, addNewPage, isPageExists }) {
+  const [isJumpEnabled, setIsJumpEnabled] = useState(false);
+
+  const isCover = () => currentPage && currentPage.id === 0;
+  const isFirstPage = () => currentPage && currentPage.id === 1;
+  const is404 = () => currentPage && currentPage.id === null;
+
+  useEffect(() => {
+    setIsJumpEnabled(false);
+  }, [currentPage.id]);
+
+  return (
+    <nav
+      className="nav"
+      onBlur={(e) => !e.relatedTarget && setIsJumpEnabled(false)}
+    >
+      {!isCover() && (
+        <Link className="nav__link" to="/" onClick={(e) => e.target.blur()}>
+          Back to cover
+        </Link>
+      )}
+      {!isCover() && !isFirstPage() && isPageExists(currentPage.id - 1) && (
+        <Link
+          className="nav__link"
+          to={`/page/${currentPage.id - 1}`}
+          onFocus={() => setIsJumpEnabled(false)}
+          onClick={(e) => e.target.blur()}
+        >
+          Previous page
+        </Link>
+      )}
+      <Button
+        additionalClassnames="nav__link"
+        onClickHandler={() => setIsJumpEnabled(!isJumpEnabled)}
+      >
+        Jump to
+      </Button>
+      {isJumpEnabled && <NavJump pages={pages} />}
+      {!is404() && (
+        <Link
+          className="nav__link"
+          to={`/page/${currentPage.id + 1}`}
+          onClick={(e) => {
+            !isPageExists(currentPage.id + 1) && addNewPage();
+            e.target.blur();
+          }}
+          onFocus={() => setIsJumpEnabled(false)}
+        >
+          Next page
+        </Link>
+      )}
+    </nav>
+  );
+}
+
+export default Nav;
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/NavJump.js b/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/NavJump.js
new file mode 100644
index 0000000..9d2a049
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/NavJump.js
@@ -0,0 +1,28 @@
+import { NavLink } from "react-router-dom";
+import { List } from "../../commons";
+
+function NavJump({ pages }) {
+  const links = pages
+    .filter((page) => page.id > 0)
+    .map((page) => {
+      return {
+        id: page.id,
+        body: (
+          <NavLink
+            key={page.id}
+            className={({ isActive }) =>
+              isActive ? "list__link--current" : "list__link"
+            }
+            aria-current="page"
+            to={page.url}
+          >
+            {page.title}
+          </NavLink>
+        ),
+      };
+    });
+
+  return <List data={links} modifier="nav" />;
+}
+
+export default NavJump;