Wordwrap for SideNav/TOC when using statictoc

[sahra-marie]

I am looking for a way to do an automatic line break in the side navigation bar/toc (where the namespaces are) when opening the documentation files in a browser over the file explorer.

Everything worked fine when serving the page over docfx with docfx projectPath\docfx.json --serve or docfx serve projectPath\_site. Then I stumbled over the CORS problem of the toc when opening without a web server, and solved it with adding statictoc as template like that:

[...]
"template": [
  "default",
  "statictoc"
],
[...]

Before I added the statictoc template, too long entries automatically went over serveral lines so that the whole namespace or class was readable. Now I have the same problem as it is described in discussion #7575, that the namespaces (and classes) are too long and exceeding the available space of the side nav bar and thus are not readable anymore. Disabling CORS or running it via a web server is unfortunately no option, I need it to be locally.

Regarding the referenced discussion:
Is there any way to simply wrap the words and not changing the width of the toc when using statictoc?
Does anyone has any other idea how to solve this? 🙂
Thanks in advance!

[sahra-marie]

Solved it by making a custom template where I overwrite the file partials/li.tmpl.partial of the statictoc template.
Essentially, the only thing missing was the xref class for the items in the TOC. With adding this the linebreaks are done via the existing breakText() function which is located in the docfx.js.

My li.tmpl.partial file now looks like this:

<ul class="nav level{{level}}">
{{#items}}
  <li>
    {{^leaf}}
    <span class="expand-stub"></span>
    {{/leaf}}
    {{#href}}
    <a href="{{href}}" title="{{name}}" class="xref {{#active}}active{{/active}}">{{name}}</a>
    {{/href}}
    {{^href}}
    <a class="{{#active}}active{{/active}}></a>
    {{/href}}
    {{^leaf}}
      {{>partials/li}}
    {{/leaf}}
  </li>
{{/items}}
</ul>