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 ? (
|
||||
<select
|
||||
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"
|
||||
>
|
||||
{availableVersions.map((version) => (
|
||||
@@ -424,11 +430,7 @@ function App() {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-xs text-gray-500 dark:text-gray-500 italic">
|
||||
Choose version
|
||||
</span>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user