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 }} +
+ View latest + ({{latestVersion}}) + {{/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) }