Sidebar navigation is missing outer <ul> if multipage_nav is disabled

[36degrees]

There’s no outer <ul> when multipage_nav is false – it jumps straight from the <nav> to the <li>.

<nav id="toc" class="js-toc-list toc__list" aria-labelledby="toc-heading" data-module="collapsible-navigation">
                        <li>
    <a href="#the-title" class="toc-link--in-view"><span>The title</span></a>
    <ul>
      <li>
        <a href="#a-subheader"><span>A subheader</span></a>
        <ul>
          <li>
            <a href="#a-h3-subheader"><span>A h3 subheader</span></a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#another-subheader"><span>Another subheader</span></a>
      </li>
    </ul>
  </li>
</nav>

This causes rendering issues, as seen in alphagov/gds-way#632.

Before

After

[36degrees]

The issue is visible in the spec:

tech-docs-gem/spec/table_of_contents/helpers_spec.rb

Lines 20 to 32 in 8375d93

	expected_single_page_table_of_contents = %{
	<li>
	<a href="#fruit"><span>Fruit</span></a>
	</li>
	<li>
	<a href="#apples"><span>Apples</span></a>
	<ul>
	<li>
	<a href="#apple-recipes"><span>Apple recipes</span></a>
	</li>
	</ul>
	</li>
	}

tech-docs-gem/spec/table_of_contents/helpers_spec.rb

Lines 146 to 169 in 8375d93

	expected_multi_page_table_of_contents = %{
	<ul>
	<li><a href="/index.html"><span>Index</span></a>
	<ul>
	<li>
	<a href="/a.html"><span>Heading one</span></a>
	<ul>
	<li>
	<a href="/a.html#heading-two"><span>Heading two</span></a>
	</li>
	</ul>
	</li>
	<li>
	<a href="/b.html"><span>Heading one</span></a>
	<ul>
	<li>
	<a href="/b.html#heading-two"><span>Heading two</span></a>
	</li>
	</ul>
	</li>
	</ul>
	</li>
	</ul>
	}

The render_page_tree method called by multi_page_table_of_contents manually adds the outer <ul> so possibly the single_page_table_of_contents method just needs to do the same…?

We should probably add an example of a non multipage nav to the 'example' docs, although at the minute this is configured at the site level rather than per page.