Update nav, add about menu

src/App.tsx

@@ -4,11 +4,13 @@ import Nav from "./components/Nav/Nav";
 import ChapterMenu from "./components/ChapterMenu/ChapterMenu";
 import TranslationMenu from "./components/TranslationMenu/TranslationMenu";
 import ThemeMenu from "./components/ThemeMenu/ThemeMenu";
+import MainMenu from "./components/MainMenu/MainMenu";
 import { Translations } from "./components/Translations/Translations";
 
 function App() {
   const [chapter, setChapter] = useState(1);
   const [translation, setTranslation] = useState(0);
+  const [showMainMenu, setShowMainMenu] = useState(false);
   const [showChapterMenu, setShowChapterMenu] = useState(false);
   const [showTranslationMenu, setShowTranslationMenu] = useState(false);
   const [themeColor, setThemeColor] = useState("light");
@@ -47,12 +49,27 @@ function App() {
     }
   }
 
+  function handleBodyScroll() {
+    if (showChapterMenu || showTranslationMenu || showMainMenu) {
+      document.body.style.overflow = "unset";
+    } else {
+      document.body.style.overflow = "hidden";
+    }
+  }
+
   function showChapters() {
     setShowChapterMenu(!showChapterMenu);
+    handleBodyScroll();
   }
 
   function showTranslations() {
-    setShowTranslationMenu(!showChapterMenu);
+    setShowTranslationMenu(!showTranslationMenu);
+    handleBodyScroll();
+  }
+
+  function showMain() {
+    setShowMainMenu(!showMainMenu);
+    handleBodyScroll();
   }
 
   function selectThemeColor(newTheme: string) {
@@ -72,24 +89,14 @@ function App() {
     setShowTranslationMenu(false);
   }
 
-  function handleSpacebar() {
-    if (showTranslationMenu) {
-      setShowTranslationMenu(false);
-    } else if (showChapterMenu) {
-      setShowChapterMenu(false);
-      setShowTranslationMenu(true);
-    } else {
-      setShowChapterMenu(true);
-    }
-  }
-
   useEffect(() => {
     function handleKeyPress(event: any) {
-      if (event.key === "ArrowLeft") chapterPrev();
-      if (event.key === "ArrowRight") chapterNext();
-      if (event.key === "ArrowDown") translationPrev();
-      if (event.key === "ArrowUp") translationNext();
-      if (event.key === " ") handleSpacebar();
+      if (event.key === "a") chapterPrev();
+      if (event.key === "d") chapterNext();
+      if (event.key === "s") translationPrev();
+      if (event.key === "w") translationNext();
+      if (event.key === "c") showChapters();
+      if (event.key === "t") showTranslations();
     }
 
     document.addEventListener("keydown", handleKeyPress);
@@ -101,7 +108,7 @@ function App() {
 
   return (
     <div className={`main theme--${themeColor} theme--${themeFont}`}>
-      {(showChapterMenu || showTranslationMenu) && (
+      {(showChapterMenu || showTranslationMenu || showMainMenu) && (
         <div
           className="overlay"
           onClick={() => {
@@ -110,6 +117,7 @@ function App() {
           }}
         />
       )}
+      {showMainMenu && <MainMenu showMainMenu={showMain} />}
       {showChapterMenu && (
         <ChapterMenu selectChapter={selectChapter} currentChapter={chapter} />
       )}
@@ -138,6 +146,7 @@ function App() {
         translationNext={translationNext}
         showChapters={showChapters}
         showTranslations={showTranslations}
+        showMain={showMain}
       />
     </div>
   );

src/components/ChapterMenu/ChapterMenu.scss

@@ -1,6 +1,6 @@
 .grid {
   position: fixed;
-  z-index: 2;
+  z-index: 10;
   top: 50%;
   left: 50%;
   width: 800px;

src/components/Icons/Chapters.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-function Apps(props: React.SVGProps<SVGSVGElement>) {
+function Chapters(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       width={24}
@@ -13,11 +13,11 @@ function Apps(props: React.SVGProps<SVGSVGElement>) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M4 8H8V4H4V8ZM10 20H14V16H10V20ZM8 20H4V16H8V20ZM4 14H8V10H4V14ZM14 14H10V10H14V14ZM16 4V8H20V4H16ZM14 8H10V4H14V8ZM16 14H20V10H16V14ZM20 20H16V16H20V20Z"
+        d="M21 19L19 18V5C19 3.9 18.1 3 17 3H7C7 1.9 7.89 1 8.99 1H19C20.1 1 21 1.9 21 3V19ZM5 5H15C16.1 5 17 5.9 17 7V23L10 20L3 23V7C3 5.9 3.9 5 5 5Z"
         fill="inherit"
       />
     </svg>
   );
 }
 
-export default Apps;
+export default Chapters;

src/components/Icons/Close.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+function Close(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="#000000"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M18.3 5.70999C18.1131 5.52273 17.8595 5.4175 17.595 5.4175C17.3305 5.4175 17.0768 5.52273 16.89 5.70999L12 10.59L7.10997 5.69999C6.92314 5.51273 6.66949 5.4075 6.40497 5.4075C6.14045 5.4075 5.8868 5.51273 5.69997 5.69999C5.30997 6.08999 5.30997 6.71999 5.69997 7.10999L10.59 12L5.69997 16.89C5.30997 17.28 5.30997 17.91 5.69997 18.3C6.08997 18.69 6.71997 18.69 7.10997 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.10999C18.68 6.72999 18.68 6.08999 18.3 5.70999Z"
+        fill="inherit"
+      />
+    </svg>
+  );
+}
+
+export default Close;

src/components/Icons/Translation.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+function Translation(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="#000000"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.855 15.67C12.995 15.31 12.905 14.9 12.625 14.62L10.535 12.56L10.565 12.53C12.305 10.59 13.545 8.36 14.275 6H16.215C16.755 6 17.205 5.55 17.205 5.01V4.99C17.205 4.45 16.755 4 16.215 4H10.205V3C10.205 2.45 9.75496 2 9.20496 2C8.65496 2 8.20496 2.45 8.20496 3V4H2.19496C1.65496 4 1.20496 4.45 1.20496 4.99C1.20496 5.54 1.65496 5.98 2.19496 5.98H12.375C11.705 7.92 10.645 9.75 9.20496 11.35C8.39496 10.46 7.71496 9.49 7.14496 8.47C6.98496 8.18 6.69496 8 6.36496 8C5.67496 8 5.23496 8.75 5.57496 9.35C6.20496 10.48 6.97496 11.56 7.87496 12.56L3.50496 16.87C3.10496 17.26 3.10496 17.9 3.50496 18.29C3.89496 18.68 4.52496 18.68 4.92496 18.29L9.20496 14L11.225 16.02C11.735 16.53 12.605 16.34 12.855 15.67ZM17.705 10C17.105 10 16.565 10.37 16.355 10.94L12.685 20.74C12.445 21.35 12.905 22 13.555 22C13.945 22 14.295 21.76 14.435 21.39L15.325 19H20.075L20.975 21.39C21.115 21.75 21.465 22 21.855 22C22.505 22 22.965 21.35 22.735 20.74L19.065 10.94C18.845 10.37 18.305 10 17.705 10ZM17.705 12.67L16.085 17H19.325L17.705 12.67Z"
+        fill="inherit"
+      />
+    </svg>
+  );
+}
+
+export default Translation;

src/components/MainMenu/MainMenu.scss

@@ -0,0 +1,92 @@
+.main-menu {
+  position: relative;
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+
+  .close-btn {
+    cursor: pointer;
+    position: fixed;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 14px;
+
+    border-bottom-left-radius: 50%;
+    border: unset;
+    background: var(--theme-background);
+    box-shadow: 0 0 10px 10px var(--theme-background);
+
+    svg {
+      width: 28px;
+      height: 28px;
+
+      path {
+        fill: var(--K400);
+      }
+    }
+
+    &:hover svg path {
+      fill: var(--accent);
+    }
+  }
+
+  &__content {
+    display: flex;
+    justify-content: center;
+
+    background: var(--theme-background);
+
+    &__center {
+      max-width: 800px;
+      padding: 60px 30px;
+    }
+
+    p + h3 {
+      margin-top: 50px;
+    }
+
+    h3 {
+      margin-bottom: 20px;
+
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--theme-text-color);
+    }
+
+    p {
+      margin-bottom: 20px;
+      font-size: 16px;
+      line-height: 1.6;
+      color: var(--theme-text-color);
+    }
+
+    a {
+      color: var(--accent);
+      font-weight: 600;
+      text-decoration: none;
+
+      &:hover {
+        color: var(--accent-hover);
+      }
+    }
+
+    hr {
+      margin: 50px 0;
+      border: unset;
+
+      .theme--light & {
+        border-top: 1px solid var(--K150);
+      }
+      .theme--dark & {
+        border-top: 1px solid var(--K800);
+      }
+    }
+  }
+}

src/components/MainMenu/MainMenu.tsx

@@ -0,0 +1,102 @@
+import clsx from "clsx";
+import React from "react";
+import Close from "../Icons/Close";
+import "./MainMenu.scss";
+
+interface Props {
+  showMainMenu: () => void;
+}
+
+const MainMenu = ({ showMainMenu }: Props) => {
+  return (
+    <div className="main-menu">
+      <button className="close-btn" onClick={showMainMenu}>
+        <Close />
+      </button>
+
+      <div className="main-menu__content">
+        <div className="main-menu__content__center">
+          <h3>Navigation</h3>
+          <p>
+            <b>Change chapter:</b> Click the bookmark icon [C] to select a
+            chapter, and use the left/right arrow icons [A/D] to jump between
+            translations.
+          </p>
+          <p>
+            <b>Change translation:</b> Click the translate icon [T] to select a
+            translation, and use the up/down arrow icons [W/S] to jump between
+            translations.
+          </p>
+          <hr />
+          <h3>Tao Te Ching</h3>
+          <p>
+            The Tao Te Ching is a Chinese classic text traditionally credited to
+            the 6th-century BC sage Laozi. The text's authorship, date of
+            composition and date of compilation are debated. The oldest
+            excavated portion dates back to the late 4th century BC, but modern
+            scholarship dates other parts of the text as having been written—or
+            at least compiled—later than the earliest portions of the Zhuangzi.
+          </p>
+          <p>
+            The Tao Te Ching, along with the Zhuangzi, is a fundamental text for
+            both philosophical and religious Taoism. It also strongly influenced
+            other schools of Chinese philosophy and religion, including
+            Legalism, Confucianism, and Chinese Buddhism, which was largely
+            interpreted through the use of Taoist words and concepts when it was
+            originally introduced to China. Many artists, including poets,
+            painters, calligraphers, and gardeners, have used the Tao Te Ching
+            as a source of inspiration. Its influence has spread widely outside
+            East Asia and it is among the most translated works in world
+            literature.
+          </p>
+          <p>
+            The Tao Te Ching has been translated into Western languages over 250
+            times, mostly to English, German, and French.
+          </p>
+          <p>
+            The Tao Te Ching is written in Classical Chinese, which poses a
+            number of challenges to complete comprehension. As Holmes Welch
+            notes, the written language "has no active or passive, no singular
+            or plural, no case, no person, no tense, no mood." Moreover, the
+            received text lacks many grammatical particles which are preserved
+            in the older Mawangdui and Beida texts, which permit the text to be
+            more precise. Lastly, many passages of the Tao Te Ching are
+            deliberately vague and ambiguous.
+          </p>
+          <p>
+            Since there are no punctuation marks in Classical Chinese, it can be
+            difficult to conclusively determine where one sentence ends and the
+            next begins. Moving a full-stop a few words forward or back or
+            inserting a comma can profoundly alter the meaning of many passages,
+            and such divisions and meanings must be determined by the
+            translator. Some editors and translators argue that the received
+            text is so corrupted (from originally being written on one-line
+            bamboo strips linked with silk threads) that it is impossible to
+            understand some chapters without moving sequences of characters from
+            one place to another.
+          </p>
+          <p>
+            More info on{" "}
+            <a
+              href="https://en.wikipedia.org/wiki/Tao_Te_Ching"
+              target="_blank"
+            >
+              Wikipedia
+            </a>
+          </p>
+          <hr />
+          <h3>About</h3>
+          <p>
+            This is a project by James Carmichael.
+            <br />
+            <a href="https://github.com/updownupdown/tao" target="_blank">
+              See on GitHub.
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MainMenu;

src/components/Nav/Nav.scss

@@ -1,15 +1,14 @@
 @import "../../css/media.scss";
 
 .nav {
-  pointer-events: none;
+  $border-radius: 8px;
   position: fixed;
   display: flex;
   justify-content: center;
-  gap: 30px;
+  gap: 20px;
   width: 100%;
   bottom: 0;
   left: 0;
-  padding-top: 80px;
 
   background: linear-gradient(
     to top,
@@ -19,82 +18,93 @@
   );
 
   @media #{$query-min-md} {
-    padding-bottom: 30px;
+    padding: 30px 0;
   }
   @media #{$query-max-md} {
-    padding-bottom: 12px;
+    padding: 12px 0;
   }
 
   &__group {
-    pointer-events: all;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    gap: 12px;
+    gap: 1px;
 
-    &__buttons {
-      display: flex;
-      gap: 12px;
+    border-radius: $border-radius;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.05), 2px 4px 8px rgba(0, 0, 0, 0.05);
+
+    .theme--light & {
+      background: var(--K150);
     }
-
-    &__label {
-      font-size: 15px;
-      font-weight: 400;
-      color: var(--K600);
-    }
-  }
-}
-
-.nav-btn {
-  transition: 0.25s ease background;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 42px;
-  height: 42px;
-
-  border: unset;
-
-  border-radius: 50%;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05), 2px 4px 8px rgba(0, 0, 0, 0.05);
-
-  svg {
-    width: 24px;
-    height: 24px;
-
-    path {
-      transition: 0.25s ease fill;
+    .theme--dark & {
+      background: var(--black);
     }
   }
 
-  .theme--light & {
-    background: var(--white);
+  .nav-btn {
+    transition: 0.25s ease background;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border: unset;
 
-    svg path {
-      fill: var(--K700);
+    @media (max-width: 420px) {
+      width: 36px;
+      height: 36px;
     }
 
-    &:hover {
-      background: var(--K100);
+    &:focus {
+      outline: none;
+    }
 
-      svg path {
-        fill: var(--accent);
+    &:first-child {
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+    &:last-child {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+
+      path {
+        transition: 0.25s ease fill;
       }
     }
-  }
-  .theme--dark & {
-    background: var(--K900);
 
-    svg path {
-      fill: var(--K100);
-    }
-
-    &:hover {
-      background: var(--K800);
+    .theme--light & {
+      background: var(--white);
 
       svg path {
-        fill: var(--accent);
+        fill: var(--K700);
+      }
+
+      &:hover {
+        background: var(--K100);
+
+        svg path {
+          fill: var(--accent);
+        }
+      }
+    }
+    .theme--dark & {
+      background: var(--K900);
+
+      svg path {
+        fill: var(--K100);
+      }
+
+      &:hover {
+        background: var(--K800);
+
+        svg path {
+          fill: var(--accent);
+        }
       }
     }
   }

src/components/Nav/Nav.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import ArrowDown from "./icons/ArrowDown";
-import ArrowLeft from "./icons/ArrowLeft";
-import ArrowRight from "./icons/ArrowRight";
-import ArrowUp from "./icons/ArrowUp";
-import Apps from "./icons/Apps";
-import Menu from "./icons/Menu";
+import ArrowDown from "../Icons/ArrowDown";
+import ArrowLeft from "../Icons/ArrowLeft";
+import ArrowRight from "../Icons/ArrowRight";
+import ArrowUp from "../Icons/ArrowUp";
+import Chapters from "../Icons/Chapters";
+import Translation from "../Icons/Translation";
+import Menu from "../Icons/Menu";
 import "./Nav.scss";
 
 interface Props {
@@ -14,6 +15,7 @@ interface Props {
   translationNext: () => void;
   showChapters: () => void;
   showTranslations: () => void;
+  showMain: () => void;
 }
 
 const Nav = ({
@@ -23,37 +25,38 @@ const Nav = ({
   translationNext,
   showChapters,
   showTranslations,
+  showMain,
 }: Props) => {
   return (
     <div className="nav">
       <div className="nav__group">
-        <span className="nav__group__label">Chapters</span>
-        <div className="nav__group__buttons">
-          <button className="nav-btn" onClick={chapterPrev}>
-            <ArrowLeft />
-          </button>
-          <button className="nav-btn" onClick={showChapters}>
-            <Apps />
-          </button>
-          <button className="nav-btn" onClick={chapterNext}>
-            <ArrowRight />
-          </button>
-        </div>
+        <button className="nav-btn" onClick={showMain}>
+          <Menu />
+        </button>
       </div>
 
       <div className="nav__group">
-        <span className="nav__group__label">Translations</span>
-        <div className="nav__group__buttons">
-          <button className="nav-btn" onClick={translationPrev}>
-            <ArrowDown />
-          </button>
-          <button className="nav-btn" onClick={showTranslations}>
-            <Menu />
-          </button>
-          <button className="nav-btn" onClick={translationNext}>
-            <ArrowUp />
-          </button>
-        </div>
+        <button className="nav-btn" onClick={chapterPrev}>
+          <ArrowLeft />
+        </button>
+        <button className="nav-btn" onClick={showChapters}>
+          <Chapters />
+        </button>
+        <button className="nav-btn" onClick={chapterNext}>
+          <ArrowRight />
+        </button>
+      </div>
+
+      <div className="nav__group">
+        <button className="nav-btn" onClick={translationPrev}>
+          <ArrowDown />
+        </button>
+        <button className="nav-btn" onClick={showTranslations}>
+          <Translation />
+        </button>
+        <button className="nav-btn" onClick={translationNext}>
+          <ArrowUp />
+        </button>
       </div>
     </div>
   );

src/components/ThemeMenu/ThemeMenu.scss

@@ -1,18 +1,17 @@
 .theme-nav {
   position: absolute;
+  z-index: 1;
   top: 20px;
-  left: 50%;
+  right: 20px;
   display: flex;
   gap: 12px;
-
-  transform: translateX(-50%);
 }
 
 .theme-toggle {
   $height: 28px;
   $width: 58px;
   $spacing: 10px;
-  $icon: 16px;
+  $icon: 14px;
   $toggle: $height - $spacing;
   $toggle-spacing: (($height - $toggle) / 2);
 

src/components/ThemeMenu/ThemeMenu.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import Day from "./icons/Day";
-import Night from "./icons/Night";
-import Sans from "./icons/Sans";
-import Serif from "./icons/Serif";
+import Day from "../Icons/Day";
+import Night from "../Icons/Night";
+import Sans from "../Icons/Sans";
+import Serif from "../Icons/Serif";
 import "./ThemeMenu.scss";
 
 interface Props {

src/components/TranslationMenu/TranslationMenu.scss

@@ -1,6 +1,6 @@
 .names {
   position: fixed;
-  z-index: 2;
+  z-index: 10;
   top: 50%;
   left: 50%;
   width: 800px;
@@ -23,7 +23,7 @@
     border-radius: 4px;
     background: transparent;
 
-    font-size: 16px;
+    font-size: 18px;
     font-weight: 600;
     color: var(--theme-text-color);
     line-height: 1.1;

src/css/styles.scss

@@ -90,7 +90,7 @@ body {
   cursor: pointer;
   transition: 0.75s ease all;
   position: fixed;
-  z-index: 1;
+  z-index: 2;
   top: 0;
   left: 0;
   right: 0;