Use component title in place of version selector

Author: recrwplay

src/css/nav.css

@@ -69,6 +69,18 @@ html.is-clipped--nav {
   }
 }
 
+.nav-product {
+  height: 2.5rem;
+  padding: 0.5rem 1.5rem;
+  box-shadow: 0 1px 0 var(--nav-panel-divider-color);
+}
+
+.nav-product .nav-product-name {
+  font-size: 1rem;
+  font-weight: 700;
+  /* color: var(--color-docs); */
+}
+
 .nav-panel-menu {
   overflow-y: scroll;
   display: flex;

src/partials/nav-selectors.hbs

@@ -24,6 +24,15 @@
     </select>
   </div>
 </div>
+{{else}}
+{{#unless (or @root.page.attributes.nav-hide-site-title (eq @root.page.attributes.theme 'cheat-sheet'))}}
+{{#with @root.page.componentVersion}}
+<div class="nav-product">
+  <span class="nav-product-name">{{{ ./title }}}</span>
+</div>
+{{/with}}
+{{/unless}}
+
 {{/if}}
 
 {{#if (eq page.attributes.theme 'cheat-sheet') }}