[cleanup] Simplifies the API doc navigation

[pzuraq]

• Simplifies the API doc navigation. It now only shows the modules
  themselves, and none of their items (that is left to the API docs page).

• Brings back nested subnavigation menus

• Adds the break-on helper which allows us to specify when a string
  should break by inserting zero-width spaces

• Random cleanup

• Upgrades Tailwind

The one disadvantage to going this route is it hurts power users who are familiar with the library already and just want to be able to lookup an import really quickly. I think this could be better solved by having a dedicated reference page. I didn't add it in this PR, but plan on trying to figure it out soon:

[samselikoff]

Nice – I agree we should fix this up!

Initial thoughts are nav is getting a little cluttered. Thinking about ways we can clean it up...

• With the package names now clickable we have gray text that is both clickable and non-clickable, I think it's a little confusing. I think if something's clickable it should be black (possibly lower opacity as in the index). But reserve the gray color for headings
• Do we need to include package namespace in nav, i.e. @ember-decorators?
• Trying to think what grouping by namespace versus type would look like (for example, sandbox/​utils/​esdoc-module being the heading and having both the function and variable under there)
• There's always the option of pulling API reference out into its own page...

[samselikoff]

I think this needs to be x-nav-item

[pzuraq]

Ah yeah, definitely

[pzuraq]

Generally agree with everything you’re saying design-wise, feel free to change it! I can get to it on Monday most likely.

As for pulling API docs out, I think that’d be a good idea actually! Basically give them their own tab. It may be a little tricky with the Sandbox, but we can make it work!

[pzuraq]

So coming back to this, I actually really agree, it does feel like the nav has gotten pretty cluttered and is trying to do too much:

Comparing it to the Ember API docs:

They just link to the individual modules. For really simple addons/libraries, it may make sense to have the individual addon members listed in the nav, but in @ember-decorators it doesn't really make sense, and I think with the new index on the right, and the search functionality we have, in general it makes less sense. I'm going to update this PR to drop the nav index for modules in general and just list the individual modules.

Also, regarding the other question you had:

Do we need to include package namespace in nav, i.e. @ember-decorators?

I think this depends on the addon. For ember-decorators it makes sense, because you ember install ember-decorators, but you import from @ember-decorators, so we want to always show the fully qualified module name whenever we refer to it (also because the site is technically documenting more than one addon). I do think we should try to make this optional, maybe we can strip the namespace if it is the package that is being worked on? Or turn it into a flag? Or maybe expose a hook so people can customize the navigation index?

[samselikoff]

Just ran it locally and it looks great!

👍 from me