4 files changed, 127 insertions, 0 deletions
diff --git a/content/frontend/default/components/versions_menu.vue b/content/frontend/default/components/versions_menu.vue
new file mode 100644
index 00000000..04d2b982
--- /dev/null
+++ b/content/frontend/default/components/versions_menu.vue
@@ -0,0 +1,80 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
+import { getVersions } from '../../services/fetch_versions';
+import { isGitLabHosted } from '../environment';
+
+export default {
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
+  },
+  data() {
+    return {
+      versions: {},
+      activeVersion: '',
+    };
+  },
+  async created() {
+    // Only build this menu if this is a GitLab-hosted copy of the site.
+    // Self-hosted Docs will only contain a single version.
+    if (isGitLabHosted()) {
+      try {
+        this.versions = await getVersions();
+        this.activeVersion = this.getActiveVersion(this.versions);
+      } catch (err) {
+        console.error(`Failed to fetch versions.json: ${err}`); // eslint-disable-line no-console
+      }
+    }
+  },
+  methods: {
+    getVersionPath(versionNumber) {
+      let path = window.location.pathname;
+      if (versionNumber) {
+        path = `/${versionNumber}${path}`;
+      }
+      return path;
+    },
+    getActiveVersion(versions) {
+      let activeVersion = versions.next;
+
+      // Check if the first item in the URL path is a valid version.
+      // If so, that should be the active menu item.
+      const versionPath = window.location.pathname.split('/')[1];
+      if (Object.values(this.versions).includes(versionPath)) {
+        activeVersion = versionPath;
+      }
+      return activeVersion;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown
+    v-if="versions.next"
+    :text="activeVersion"
+    class="gl-mb-4 gl-md-mb-0 gl-md-mr-5 gl-md-ml-3 gl-display-flex"
+    data-testid="versions-menu"
+  >
+    <gl-dropdown-item :href="getVersionPath()">
+      <span data-testid="next-version">{{ versions.next }}</span> (not yet released)
+    </gl-dropdown-item>
+    <gl-dropdown-divider />
+
+    <gl-dropdown-item :href="getVersionPath(versions.current)">
+      {{ versions.current }} (recently released)
+    </gl-dropdown-item>
+    <gl-dropdown-item v-for="v in versions.last_minor" :key="v" :href="getVersionPath(v)">
+      {{ v }}
+    </gl-dropdown-item>
+    <gl-dropdown-divider />
+
+    <gl-dropdown-item v-for="v in versions.last_major" :key="v" :href="getVersionPath(v)">
+      {{ v }}
+    </gl-dropdown-item>
+    <gl-dropdown-divider />
+
+    <gl-dropdown-item href="/archives">Archives</gl-dropdown-item>
+  </gl-dropdown>
+</template>
diff --git a/content/frontend/default/default.js b/content/frontend/default/default.js
index db3786f2..119842e8 100644
--- a/content/frontend/default/default.js
+++ b/content/frontend/default/default.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import NavigationToggle from './components/navigation_toggle.vue';
 import VersionBanner from './components/version_banner.vue';
 import { setupTableOfContents } from './setup_table_of_contents';
+import VersionsMenu from './components/versions_menu.vue';
 
 function fixScrollPosition() {
   if (!window.location.hash || !document.querySelector(window.location.hash)) return;
@@ -17,6 +18,10 @@ function fixScrollPosition() {
 
 document.addEventListener('DOMContentLoaded', () => {
   const versionBanner = document.querySelector('#js-version-banner');
+  if (!versionBanner) {
+    return;
+  }
+
   const isOutdated = versionBanner.hasAttribute('data-is-outdated');
   const { latestVersionUrl, archivesUrl } = versionBanner.dataset;
 
@@ -58,3 +63,15 @@ document.addEventListener('DOMContentLoaded', () => {
 
   setupTableOfContents();
 });
+
+document.addEventListener('DOMContentLoaded', () => {
+  return new Vue({
+    el: '.js-versions-menu',
+    components: {
+      VersionsMenu,
+    },
+    render(createElement) {
+      return createElement(VersionsMenu);
+    },
+  });
+});
diff --git a/content/frontend/default/environment.js b/content/frontend/default/environment.js
new file mode 100644
index 00000000..05e8ced5
--- /dev/null
+++ b/content/frontend/default/environment.js
@@ -0,0 +1,22 @@
+/**
+ * Utilities for determining site environment.
+ */
+
+export const GlHosts = [
+  {
+    environment: 'production',
+    host: 'docs.gitlab.com',
+  },
+  {
+    environment: 'review',
+    host: '35.193.151.162.nip.io',
+  },
+  {
+    environment: 'local',
+    host: 'localhost',
+  },
+];
+
+export function isGitLabHosted() {
+  return GlHosts.some((e) => window.location.host.includes(e.host));
+}
diff --git a/content/frontend/services/fetch_versions.js b/content/frontend/services/fetch_versions.js
new file mode 100644
index 00000000..e65f396c
--- /dev/null
+++ b/content/frontend/services/fetch_versions.js
@@ -0,0 +1,8 @@
+export function getVersions() {
+  return fetch('https://docs.gitlab.com/versions.json')
+    .then((response) => response.json())
+    .then((data) => {
+      return data[0];
+    })
+    .catch((error) => console.error(error)); // eslint-disable-line no-console
+}