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:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user