Investigate ways to allows users to navigate between surahs inside of the Quran reader

[tifa2UP]

[iyunusov]

@muhajirdev Isn't the searchbox doing it now? Please describe the suggested plan. )

[naveed-ahmad]

@iyunusov Search and quick navigation are great options for switching between surahs, juz, or pages. Can use them for switching to specific ayah as well.

But these are not good options when you want to "jump" to an ayah within surah/age/juz.

Example: You're reading 2:20 and now need to see 2:255 and then came back to 2:20.

• Both search and quick navigation will need multiple actions/clicks from the user
• Both will show only one ayah( if you search for 2:255 the result will be a single ayah)
• Context will be lost
• Search is slow

Possible solutions:

Dropdown in the header just like the current site

• Surah page is showing Surah and ayah dropdown
• Juz page has juz and ayah dropdown
• Page has a "page" and ayah dropdown

Go action

Please note, "Jump to ayah" will not open a new page. When the user clicks on the ayah number:

• If ayah in already present on the page, the app will scroll to it
• If not, app will load the ayah, render it and scroll it to

For example, a user is reading Surah Baqarah and is on the second page(2:10). If he jumps to 2:5, this ayah is already there, simply scorll to it. But if he jumps to 2:50, the app will load the ayah range( from the last ayah on the page to 2:50 ), render the results, and scroll to 2:50.

If the user jumps back to 2:10, scroll to it.

Hopefully, this was helpful. JazakAllah kharain for your contribution.

[iyunusov]

@naveed-ahmad && @muhajirdev Very good brother! Now today I have decided to spend some time to show you some which I believe " is a better concept"...

CodeSandbox concept

Please check that link above 👆 and share your opinions... also please note that it is just a concept; not bug free neither the most optimal achievable solution... as it comes to the library used for this demo "semantic-ui", we don't necessarily have to use it for next.quran.com, we may instead design/re-implement a similar UI & functionality.

JazakAllahu Khayran for your participation brothers. 🤍