Merge pull request #245 from ankitaniket/main

[BUG] Chapter page issues #188
gita · Mar 3, 2024 · 84fd142 · 84fd142
2 parents b8f4211 + 0b42284
commit 84fd142
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx b/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx
@@ -51,7 +51,7 @@ export default function ChapterPage({
     : filteredVerses?.slice(0).reverse();
 
   return (
-    <div>
+    <div onClick={() => viewNavigation && setViewNavigation(false)}>
       <div className="absolute inset-x-0 mx-auto max-w-5xl text-center font-inter">
         <SvgChapterBackground className="relative inset-x-0 bottom-0 m-auto w-full rounded-full text-gray-300 text-opacity-25 dark:text-black dark:text-opacity-25 lg:top-12 lg:w-min" />
       </div>
@@ -86,7 +86,7 @@ export default function ChapterPage({
         </p>
       </section>
 
-      <div className="mx-auto max-w-5xl px-4 text-center  font-inter sm:px-6">
+      <div className="mx-auto max-w-5xl px-4 text-center font-inter sm:px-6">
         <div className="flex items-center justify-between border-y border-gray-200 py-6">
           <div
             className={classNames(
@@ -116,13 +116,14 @@ export default function ChapterPage({
             <VerseNavigator
               verseCount={verses_count}
               currentVerse={verseId}
+              chapterNumber={chapter_number}
               viewNavigation={viewNavigation}
               setViewNavigation={setViewNavigation}
               setVerseId={setVerseId}
             />
             <button
               type="button"
-              className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange dark:bg-dark-100 dark:text-gray-50 dark:hover:bg-dark-bg"
+              className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 p-1 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange dark:bg-dark-100 dark:text-gray-50 dark:hover:bg-dark-bg"
               onClick={() => setIsAscSorted(!isAscSorted)}
             >
               {isAscSorted ? (

diff --git a/src/components/Chapter/VerseNavigator.tsx b/src/components/Chapter/VerseNavigator.tsx
@@ -1,13 +1,15 @@
 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;
   currentVerse: number;
+  chapterNumber: number;
   viewNavigation: boolean;
   setViewNavigation: Dispatch<SetStateAction<boolean>>;
   setVerseId: Dispatch<SetStateAction<number>>;
@@ -16,6 +18,7 @@ interface Props {
 function VerseNavigator({
   verseCount,
   currentVerse,
+  chapterNumber,
   viewNavigation,
   setViewNavigation,
   setVerseId,
@@ -27,9 +30,10 @@ 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 ${
-          !viewNavigation && "hidden"
-        }`,
+        `absolute mt-2 flex flex-wrap rounded border border-gray-200 bg-white p-2 shadow dark:border-dark-100 dark:bg-dark-bg 
+        ${!viewNavigation && "hidden"}
+         ${verseCount > 50 ? "-right-1 w-[360px] md:w-[550px]" : "-right-1 w-[360px]"}
+        `,
       )}
     >
       <div
@@ -49,21 +53,25 @@ function VerseNavigator({
       {Array(verseCount)
         .fill(verseCount)
         .map((_verse, index) => (
-          <div
-            onClick={() => {
-              setViewNavigation(false);
-              setVerseId(index + 1);
-            }}
+          <LinkWithLocale
             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 ${
-                index + 1 === currentVerse && "bg-my-orange text-white"
-              }`,
-              styles.fontSize.para,
-            )}
+            href={`/chapter/${chapterNumber}/verse/${index + 1}`}
+            prefetch={false}
           >
-            {index + 1}
-          </div>
+            <div
+              onClick={() => {
+                setViewNavigation(false);
+              }}
+              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 ${
+                  index + 1 === currentVerse && "bg-my-orange text-white"
+                }`,
+                styles.fontSize.para,
+              )}
+            >
+              {index + 1}
+            </div>
+          </LinkWithLocale>
         ))}
     </div>
   );