version dropdown

Author: Sven Petersen

src/css/nav.css

@@ -256,3 +256,19 @@ html.is-clipped--nav {
   opacity: 0.9;
   font-weight: var(--body-font-weight-bold);
 }
+
+.nav-menu .title-wrapper {
+  display: flex;
+}
+
+.nav-menu .title-wrapper h3 {
+  flex-grow: 2;
+}
+
+.nav-menu .title-wrapper .page-versions {
+  flex-grow: 1;
+  min-width: 85px;
+  margin-right: 0;
+  margin-left: 5px;
+  text-align: end;
+}

src/partials/nav-menu.hbs

@@ -1,10 +1,24 @@
 {{#with page.navigation}}
 <div class="nav-panel-menu is-active" data-panel="menu">
   <nav class="nav-menu">
-    {{#with @root.page.componentVersion}}
-    <h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>
-    {{/with}}
-{{> nav-tree navigation=this}}
+    <div class="title-wrapper">
+      {{#with @root.page.componentVersion}}
+      <h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>
+      {{/with}}
+      {{#with @root.page.versions}}
+      <div class="page-versions">
+        <button class="version-menu-toggle" title="Show other versions of page">{{@root.page.componentVersion.displayVersion}}</button>
+        <div class="version-menu">
+          {{#each this}}
+          <a class="version
+            {{~#if (eq ./version @root.page.version)}} is-current{{/if~}}
+            {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
+          {{/each}}
+        </div>
+      </div>
+      {{/with}}
+    </div>
+    {{> nav-tree navigation=this}}
   </nav>
 </div>
 {{/with}}