diff --git a/assets/css/sidebar.css b/assets/css/sidebar.css
index 02899408f..e28fc7b03 100644
--- a/assets/css/sidebar.css
+++ b/assets/css/sidebar.css
@@ -109,6 +109,18 @@
display: none;
}
+.sidebar .sidebar-projectVersionsLatestLink {
+ border-left: var(--navTabBorderWidth) solid var(--sidebarLanguageAccentBar);
+ padding: 0 10px;
+ background-color: var(--sidebarAccentMain);
+}
+
+.sidebar .sidebar-projectVersionsLatestLink a {
+ color: var(--sidebarBackground);
+ font-weight: bold;
+ ;
+}
+
.sidebar .sidebar-listNav {
display: flex;
margin: 0;
diff --git a/assets/js/handlebars/templates/versions-dropdown.handlebars b/assets/js/handlebars/templates/versions-dropdown.handlebars
index a432e6a3e..85bbafd08 100644
--- a/assets/js/handlebars/templates/versions-dropdown.handlebars
+++ b/assets/js/handlebars/templates/versions-dropdown.handlebars
@@ -9,5 +9,10 @@
{{/each}}
+ {{#if latestUrl }}
+
+
+ {{/if}}
diff --git a/assets/js/sidebar/sidebar-version-select.js b/assets/js/sidebar/sidebar-version-select.js
index 9b3d48e88..5ac236d8d 100644
--- a/assets/js/sidebar/sidebar-version-select.js
+++ b/assets/js/sidebar/sidebar-version-select.js
@@ -14,16 +14,20 @@ export function initialize () {
const versionsContainer = qs(VERSIONS_CONTAINER_SELECTOR)
// Initially the container contains only text with the current version
const currentVersion = versionsContainer.textContent.trim()
+ const latestVersionNode = versionNodes.find(node => node.latest)
+ const latestVersion = latestVersionNode?.version !== currentVersion ? latestVersionNode?.version : null
+ const latestUrl = latestVersionNode?.version !== currentVersion ? latestVersionNode?.url : null
+
const nodes = decorateVersionNodes(versionNodes, currentVersion)
- renderVersionsDropdown({ nodes })
+ renderVersionPicker(nodes, latestVersion, latestUrl)
}
}
-function renderVersionsDropdown ({ nodes }) {
+function renderVersionPicker (nodes, latestVersion, latestUrl) {
const versionsContainer = qs(VERSIONS_CONTAINER_SELECTOR)
- const versionsDropdownHtml = Handlebars.templates['versions-dropdown']({ nodes })
- versionsContainer.innerHTML = versionsDropdownHtml
+ const versionPickerHtml = Handlebars.templates['versions-dropdown']({ nodes, latestVersion, latestUrl })
+ versionsContainer.innerHTML = versionPickerHtml
qs(VERSIONS_DROPDOWN_SELECTOR).addEventListener('change', handleVersionSelected)
}