Sk/bug188 chapter page

src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import {
   ChevronDownIcon,
   SortAscendingIcon,
@@ -11,6 +11,7 @@ import PageNavigator from "components/Chapter/PageNavigator";
 import VerseList from "components/Chapter/VerseList";
 import VerseNavigator from "components/Chapter/VerseNavigator";
 import { SvgChapterBackground } from "components/svgs";
+import { useClickOutside } from "hooks/useClickOutside";
 import useMyStyles from "hooks/useMyStyles";
 import { classNames } from "shared/functions";
 import { getTranslate } from "shared/translate";
@@ -38,6 +39,8 @@ export default function ChapterPage({
   const [verseId, setVerseId] = useState(0);
   const [isAscSorted, setIsAscSorted] = useState(true);
   const styles = useMyStyles();
+  const toggleRef = useRef<HTMLDivElement>(null);
+  useClickOutside([toggleRef], () => setViewNavigation(false));
 
   const translate = getTranslate(translations, locale);
 
@@ -96,7 +99,7 @@ export default function ChapterPage({
           >
             {verses_count} {translate("Verses")}
           </div>
-          <div className="relative mt-1 flex rounded-md shadow-sm">
+          <div ref={toggleRef} className="relative mt-1 flex rounded-md shadow-sm">
             <div className="relative flex grow items-stretch focus-within:z-10">
               <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 "></div>
               <input
@@ -105,7 +108,7 @@ export default function ChapterPage({
                 id="verse-id"
                 value={verseId ? verseId : ""}
                 className={classNames(
-                  "block w-full rounded-none rounded-l-md border border-gray-300 pl-2 focus:border-my-orange focus:ring-my-orange",
+                  "block w-28 sm:w-36 rounded-none rounded-l-md border border-gray-300 pl-2 focus:border-my-orange focus:ring-my-orange",
                   styles.fontSize.para,
                 )}
                 placeholder={translate("Go To Verse")}
@@ -115,6 +118,7 @@ export default function ChapterPage({
             </div>
             <VerseNavigator
               verseCount={verses_count}
+              currentChapter={chapter_number}
               currentVerse={verseId}
               viewNavigation={viewNavigation}
               setViewNavigation={setViewNavigation}

src/components/Chapter/VerseNavigator.tsx

@@ -1,12 +1,14 @@
 import { Dispatch, SetStateAction } from "react";
 import { useSelector } from "react-redux";
 
+import LinkWithLocale from "components/LinkWithLocale";
 import useMyStyles from "hooks/useMyStyles";
 import { RootState } from "redux/reducers/rootReducer";
 import { classNames } from "shared/functions";
 
 interface Props {
   verseCount: number;
+  currentChapter: number;
   currentVerse: number;
   viewNavigation: boolean;
   setViewNavigation: Dispatch<SetStateAction<boolean>>;
@@ -15,6 +17,7 @@ interface Props {
 
 function VerseNavigator({
   verseCount,
+  currentChapter,
   currentVerse,
   viewNavigation,
   setViewNavigation,
@@ -27,7 +30,7 @@ function VerseNavigator({
     <div
       className={classNames(
         fontSize === "large" ? "top-12" : "top-10",
-        `absolute flex w-full flex-wrap rounded border border-gray-200 bg-white p-3 shadow dark:border-dark-100 dark:bg-dark-bg ${
+        `absolute flex w-full max-h-56 overflow-y-scroll flex-wrap rounded border border-gray-200 bg-white p-3 shadow dark:border-dark-100 dark:bg-dark-bg ${
           !viewNavigation && "hidden"
         }`,
       )}
@@ -38,7 +41,7 @@ function VerseNavigator({
           setVerseId(0);
         }}
         className={classNames(
-          `m-px flex min-w-[2.5rem] items-center justify-center rounded p-2 hover:cursor-pointer hover:bg-my-orange hover:text-white ${
+          `m-px flex min-w-[2.35rem] items-center justify-center rounded p-2 hover:cursor-pointer hover:bg-my-orange hover:text-white ${
             !currentVerse && "bg-my-orange text-white"
           }`,
           styles.fontSize.para,
@@ -49,21 +52,22 @@ function VerseNavigator({
       {Array(verseCount)
         .fill(verseCount)
         .map((_verse, index) => (
+          <LinkWithLocale
+          key={index}
+          href={`/chapter/${currentChapter}/verse/${index + 1}`}
+          prefetch={false}
+        >
           <div
-            onClick={() => {
-              setViewNavigation(false);
-              setVerseId(index + 1);
-            }}
-            key={index}
             className={classNames(
-              `m-px flex min-w-[2.5rem] items-center justify-center rounded p-2 hover:cursor-pointer hover:bg-my-orange hover:text-white ${
+              `m-px flex min-w-[2.35rem] items-center justify-center rounded p-2 hover:cursor-pointer hover:bg-my-orange hover:text-white ${
                 index + 1 === currentVerse && "bg-my-orange text-white"
               }`,
               styles.fontSize.para,
             )}
           >
             {index + 1}
           </div>
+          </LinkWithLocale>
         ))}
     </div>
   );