Polished version selector dropdown behavior

- **Removed 'Choose version' text** on root version selector page (redundant)
- **Smart version switching** preserves current location when changing versions
- **Context-aware navigation** replaces version in URL to keep same chapter/book
- **Improved UX** users can switch ESV↔NKJV without losing their place

Version dropdown now intelligently keeps users where they are when switching translations!
This commit is contained in:
Ryderjj89
2025-09-28 17:04:18 -04:00
parent 9009a75d24
commit 9d64577ca5

View File

@@ -415,7 +415,13 @@ function App() {
{selectedVersion ? ( {selectedVersion ? (
<select <select
value={selectedVersion} value={selectedVersion}
onChange={(e) => navigate(`/version/${e.target.value}`)} onChange={(e) => {
const currentPath = location.pathname;
const newVersion = e.target.value;
// Replace current version in path with new version to keep same page
const newPath = currentPath.replace(`/version/${selectedVersion}`, `/version/${newVersion}`);
navigate(newPath);
}}
className="text-xs text-gray-600 dark:text-gray-400 bg-transparent border-none focus:outline-none cursor-pointer hover:text-blue-600 dark:hover:text-blue-400" className="text-xs text-gray-600 dark:text-gray-400 bg-transparent border-none focus:outline-none cursor-pointer hover:text-blue-600 dark:hover:text-blue-400"
> >
{availableVersions.map((version) => ( {availableVersions.map((version) => (
@@ -424,11 +430,7 @@ function App() {
</option> </option>
))} ))}
</select> </select>
) : ( ) : null}
<span className="text-xs text-gray-500 dark:text-gray-500 italic">
Choose version
</span>
)}
</div> </div>
</div> </div>