feat: Add additional layout options to modern template

[filzrev]

This PR intended to fix #8686.
By adding following additional layout options to modern template.

• _disableNavbar
• _disableBreadcrumb
• _disableToc
• _disableAffix

Test
It's manually tested on my local environment.
And confirms that the following checks have been passed.

• When setting _disable* option. The corresponding elements is not be rendered in HTML.
• No JavaScript Error occurred when features are disabled.

Background
It seems some users are requesting above options. (#8686, #9116, #9296)
It can partially resolved by using _layout: landing option. (This option disable both toc and affix)
But there are feature requests that hide individual elements separately.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 74.41%. Comparing base (fe673ec) to head (e5b5ec9).
Report is 43 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9737      +/-   ##
==========================================
+ Coverage   74.31%   74.41%   +0.09%     
==========================================
  Files         536      536              
  Lines       23189    23193       +4     
  Branches     4056     4027      -29     
==========================================
+ Hits        17234    17259      +25     
+ Misses       4853     4840      -13     
+ Partials     1102     1094       -8     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[filzrev]

Snapshot diff seems to occur for the following reasons.

_disableToc metadata variable is overriden by conceptual.html.primary.js
with following condition.

model._disableToc = model._disableToc || !model._tocPath || (model._navPath === model._tocPath);`

It seems index.md root file met above conditions.
So docfx.Snapshot.Tests\SamplesTest.SeedHtml\html\index.html.verified.html file diff occurred.

[yufeih]

Thank you @filzrev - does the manual test include mobile views as well?

[filzrev]

does the manual test include mobile views as well?

It seems works with smaller window size layout.

And I've removed min-height style from actionbar element.
Because it display blank element when using _disableBreadcrumb: true settings.
e5b5ec9

By this changes. default actionbar element height is reduced from 40px->37px.
I thought this changes is not a problem for usability (To tap hamburger menu of TOC on mobile view)

[yufeih]

Looks good, thank you @filzrev !

[filzrev]

It's need to update snapshots.

There is concerning about breaking changes.
Currently docfx implicitly set _disableToc by following condition.

model._disableToc = model._disableToc || !model._tocPath || (model._navPath === model._tocPath);`

But existing modern template render TOC elements regardless disableToc options.
By this PR. This behavior is aligned to default template.

if model._navPath === model._tocPath. Then TOC is not displayed.
And it can't be overwritten by docfx.json or file metadata.

[VaclavElias]

Hmm, it was unexpected.

I had to add this to get the toc back on the home page. Most likely, when you deploy your docs, you might have the same issue, missing toc on the home page.

    "fileMetadata": {
      "_disableToc": {
        "index.md": false
      }
    }

[filzrev]

It's breaking changes for modern template user (that is commented at #9737 (comment) and blocking problem is fixed at #9741).

From version 2.76.0.
default template compatible layout attribute supports are added.
And default behavior is aligned to default template. (TOC is not displayed at homepage by default)

So who don't use _layout: landing settings. And want to display TOC at homepage.
It' required to set _disbleToc: false setting to YAML header explicitly.

[VaclavElias]

setting to YAML header explicitly.

Do you mean a front matter of index.md?

Like so?

---
_disableToc: false
---

Probably, it needs to be added also here? https://github.com/dotnet/docfx/blob/main/docs/index.md

[filzrev]

Do you mean a front matter of index.md?
Sorry for the confusion. It means YAML Frontmatter as you indicated.

Probably, it needs to be added also here? https://github.com/dotnet/docfx/blob/main/docs/index.md

Official docs index page don't match following conditions.

model._navPath === model._tocPath

So there is no need to set _disableToc: false explicitly.

[VaclavElias]

@filzrev, thank you for clarification.