Sidemenu styling

app/components/table-of-contents.hbs

@@ -1,43 +1,43 @@
-<ol class='toc-level-0'>
-  <li class='toc-level-0'>
+<ul class='table-of-contents '>
+  <li class='toc-item toc-group'>
     <a {{on 'click' (fn this.toggle 'modules')}} href='#' data-test-toc-title='packages'>Packages</a>
-    <ol class='toc-level-1 modules selected'>
+    <ul class='sub-table-of-contents modules selected'>
       {{#each @moduleIDs as |moduleID|}}
 
         {{#if (not-eq moduleID '@ember/object/computed')}}
-          <li class='toc-level-1' data-test-module={{moduleID}}>
+          <li class='toc-item toc-link' data-test-module={{moduleID}}>
             <LinkTo @route='project-version.modules.module' @models={{array @version moduleID}}>{{moduleID}}</LinkTo>
           </li>
         {{/if}}
 
       {{/each}}
-    </ol>
+    </ul>
   </li>
 
   {{#if @isShowingNamespaces}}
-    <li class='toc-level-0'>
+    <li class='table-of-contents'>
       <a {{on 'click' (fn this.toggle 'namespaces')}} href='#' data-test-toc-title='namespaces'>Namespaces</a>
-      <ol class='toc-level-1 namespaces selected'>
+      <ul class='sub-table-of-contents namespaces selected'>
         {{#each @namespaceIDs as |namespaceID|}}
-          <li class='toc-level-1' data-test-namespace={{namespaceID}}>
+          <li class='toc-item toc-link' data-test-namespace={{namespaceID}}>
             <LinkTo @route='project-version.namespaces.namespace' @models={{array @version namespaceID}}>{{namespaceID}}</LinkTo>
           </li>
         {{/each}}
-      </ol>
+      </ul>
     </li>
   {{/if}}
 
-  <li class='toc-level-0'>
+  <li class='table-of-contents '>
     <a {{on 'click' (fn this.toggle 'classes')}} href='#' data-test-toc-title='classes'>Classes</a>
-    <ol class='toc-level-1 classes selected'>
+    <ul class='sub-table-of-contents classes selected'>
       {{#each @classesIDs as |classID|}}
-        <li class='toc-level-1' data-test-class={{classID}}>
+        <li class='toc-item toc-link' data-test-class={{classID}}>
           <LinkTo @route='project-version.classes.class' @models={{array @version classID}}>{{classID}}</LinkTo>
         </li>
       {{/each}}
-    </ol>
+    </ul>
   </li>
-</ol>
+</ul>
 <label class='toc-private-toggle'>
   <input type='checkbox' checked={{@showPrivateClasses}} onchange={{@togglePrivateClasses}} class='private-deprecated-toggle' />
   Show Private / Deprecated

app/components/table-of-contents.js

@@ -4,7 +4,9 @@ import Component from '@glimmer/component';
 export default class TableOfContents extends Component {
   @action
   toggle(type) {
-    const tableElement = document.querySelector(`ol.toc-level-1.${type}`);
+    const tableElement = document.querySelector(
+      `ul.sub-table-of-contents.${type}`
+    );
     tableElement.classList.toggle('selected');
   }
 }

app/components/table-of-projects.hbs

@@ -0,0 +1,11 @@
+<ul class="table-of-contents ">
+  <li class="toc-item" data-test-home>
+    <LinkTo @route="project" @model="ember">Home</LinkTo>
+  </li>
+  <li class="toc-heading">Projects</li>
+  <ul class="sub-table-of-contents">
+    <li class="toc-item"><LinkTo @route="project" @model="ember" @current-when={{eq @activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
+    <li class="toc-item"><LinkTo @route="project" @model="ember-data" @current-when={{eq @activeProject "ember-data"}} class="spec-ember-data">EmberData</LinkTo></li>
+    <li class="toc-item"><LinkTo @route="project" @model="ember-cli" @current-when={{eq @activeProject "ember-cli"}} class="spec-ember">Ember CLI</LinkTo></li>
+  </ul>
+</ul>

app/styles/app.css

@@ -25,3 +25,60 @@ main a.edit-icon {
   display: inline-block;
   background: none;
 }
+
+.table-of-contents {
+  list-style-type: none;
+  padding-left: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-3);
+}
+
+.sub-table-of-contents {
+  padding-left: var(--spacing-1);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-2);
+}
+
+.sub-table-of-contents .sub-table-of-contents {
+  padding-left: var(--spacing-3);
+  margin-bottom: 0;
+}
+
+.table-of-contents a:link {
+  background: none;
+}
+
+.sub-table-of-contents .toc-item a  {
+  display: block;
+  padding: var(--spacing-1);
+  border-radius: var(--radius);
+  line-height: var(--line-height-xs);
+  color: var(--color-gray-700);
+  border-left: 0 solid transparent;
+  transition: border-width .3s;
+}
+
+.sub-table-of-contents .toc-item a:hover {
+  border-left: 4px solid var(--color-gray-400);
+  border-radius: 0;
+}
+
+.sub-table-of-contents .toc-item.selected > a, .sub-table-of-contents .toc-item > a.active  {
+  border-left: 4px solid var(--color-brand-hc-dark);
+  border-radius: 0;
+}
+
+.table-of-contents li {
+  margin: 3px 0;
+  list-style-type: none;
+}
+
+li.toc-heading {
+  margin-top: var(--spacing-4);
+  color: var(--color-gray-600);
+}
+
+li.toc-heading:first-child {
+  margin-top: 0;
+}
+

app/templates/ember-cli.hbs

@@ -1,24 +1,10 @@
-{{! template-lint-disable no-inline-styles }}
-{{!-- Template is copied from project-version.hbs --}}
-<aside class="sidebar">
-  <ol class="toc-level-0">
-    <li class="toc-level-0" data-test-home>
-      <LinkTo @route="project" @model="ember">Home</LinkTo>
-    </li>
-    <li class="toc-level-0">
-      Projects
-      <ol class="toc-level-1 selected" style="display: block;">
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember" @current-when={{eq this.activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember-data" @current-when={{eq this.activeProject "ember-data"}} class="spec-ember-data">Ember Data</LinkTo></li>
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember-cli" @current-when={{eq this.activeProject "ember-cli"}} class="spec-ember">Ember CLI</LinkTo></li>
-      </ol>
-    </li>
-  </ol>
-</aside>
-<section class="content">
-  <article class="chapter">
-    <h1>Ember CLI API Documentation</h1>
-    <hr>
-    <p>Ember CLI API documentation is available on <a href="https://ember-cli.com/api">ember-cli.com/api</a>.</p>
-  </article>
-</section>
+<div class="sidebar-container">
+  <EsSidebar><TableOfProjects @activeProject='ember-cli' /></EsSidebar>
+  <section class="content">
+    <article class="chapter">
+      <h1>Ember CLI API Documentation</h1>
+      <hr>
+      <p>Ember CLI API documentation is available on <a href="https://ember-cli.com/api">ember-cli.com/api</a>.</p>
+    </article>
+  </section>
+</div>

app/templates/project-version.hbs

@@ -1,19 +1,6 @@
-{{! template-lint-disable no-inline-styles }}
 <div class="sidebar-container">
   <EsSidebar>
-    <ol class="toc-level-0">
-      <li class="toc-level-0" data-test-home>
-        <LinkTo @route="project" @model="ember">Home</LinkTo>
-      </li>
-      <li class="toc-level-0">
-        Projects
-        <ol class="toc-level-1 selected" style="display: block;">
-          <li class="toc-level-1"><LinkTo @route="project" @model="ember" @current-when={{eq this.activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
-          <li class="toc-level-1"><LinkTo @route="project" @model="ember-data" @current-when={{eq this.activeProject "ember-data"}} class="spec-ember-data">Ember Data</LinkTo></li>
-          <li class="toc-level-1"><LinkTo @route="project" @model="ember-cli" @current-when={{eq this.activeProject "ember-cli"}} class="spec-ember">Ember CLI</LinkTo></li>
-        </ol>
-      </li>
-    </ol>
+   <TableOfProjects @activeProject={{this.activeProject}} />
 
     <div class="select-container">
       <PowerSelect

tests/integration/components/table-of-contents-test.js

@@ -27,7 +27,7 @@ module('Integration | Component | table of contents', function (hooks) {
     const contentTitle = document.querySelector(
       '[data-test-toc-title="classes"]'
     );
-    const contentReference = '.toc-level-1';
+    const contentReference = '.sub-table-of-contents';
 
     assert.dom(contentTitle).hasText('Classes');
     assert
@@ -51,7 +51,7 @@ module('Integration | Component | table of contents', function (hooks) {
       />
     `);
 
-    const contentReference = '.toc-level-1';
+    const contentReference = '.sub-table-of-contents';
     const content = document.querySelector(contentReference);
     const contentTitle = document.querySelector(
       '[data-test-toc-title="classes"]'
@@ -84,7 +84,7 @@ module('Integration | Component | table of contents', function (hooks) {
     const contentTitle = document.querySelector(
       '[data-test-toc-title="packages"]'
     );
-    const contentReference = '.toc-level-1';
+    const contentReference = '.sub-table-of-content';
     const content = document.querySelector(contentReference);
 
     assert.dom(contentTitle).hasText('Packages');
@@ -118,7 +118,7 @@ module('Integration | Component | table of contents', function (hooks) {
     const titleButton = document.querySelector(
       '[data-test-toc-title="packages"]'
     );
-    const contentReference = '.toc-level-1';
+    const contentReference = '.sub-table-of-contents';
     const content = document.querySelector(contentReference);
 
     assert.dom(titleButton).hasText('Packages');

tests/integration/components/table-of-projects-test.js

@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | table-of-projects', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<TableOfProjects />`);
+    assert.dom(this.element).hasText('Home Projects Ember EmberData Ember CLI');
+    // The functional test for this is in acceptance/switch-project-test.js
+  });
+});