Can't hide ToC if it's integrated in navigation

[ghost]

• I've read the contribution guidelines and agree with them

I've found a bug and checked that ...

• ... the problem doesn't occur with the default MkDocs template
• ... the problem is not in any of my customizations (CSS, JS, template)
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

When using the toc.integrate feature flag, the Table of Contents can't be hidden per-file using metadata. However, it does work flawlessly without the feature.

Expected behavior

Hiding the ToC on metadata prevents it from appearing in that page, no matter if toc.integrate is being used.

Actual behavior

Hiding the ToC on metadata prevents it from appearing, only if toc.integrate is not being used.

Pictures

Here you have a couple screenshots, both showing the metadata of the test file and the state of the feature.

Steps to reproduce the bug

1. Add the navigation integration feature to mkdocs.yml.
2. Hide the ToC for a file with some headings. ToC will still be visible.
3. Delete (or comment) the feature and reload the site. ToC will disappear.

Package versions

• Python: 3.9.0
• MkDocs: 1.1.2
• Material: 6.2.3

Project configuration

theme:
  name: material
  custom_dir: theme
  logo: assets/img/logo.png
  favicon: assets/img/favicon.png
  palette:
    scheme: preference
    primary: deep purple
    accent: deep purple
  features:
    - header.autohide
    - navigation.instant
    - navigation.sections
    - navigation.tabs
    - toc.integrate

System information

• OS: Windows 10 (20H2)
• Browser: Firefox 84.0.1

[squidfunk]

Thanks for reporting. However, this is working as intended, as the hide.navigation and hide.tocmetadata flags are meant to hide the sidebars, as described in the documentation. When you integrate the table of contents into the navigation, it's part of the navigation sidebar, thus not hidden. For this reason, this would be an enhancement, but as I'd regard this as an edge case, I currently have no intent to implement it unless many users need it.

[squidfunk]

Closing for housekeeping.

If you want to replicate this behavior, you may use inline CSS to hide the table of contents in the sidebar:

<style>
  .md-nav--primary .md-nav__link[for=__toc] ~ .md-nav {
    display: none;
  }
</style>

[saibotma]

Also need this. +1

[sisp]

I think the custom style for hiding the table of contents in the drawer needs to be extended just a little to also hide the icon:

<style>
+  .md-nav--primary .md-nav__link[for=__toc] > .md-nav__icon,
   .md-nav--primary .md-nav__link[for=__toc] ~ .md-nav {
     display: none;
   }
</style>

[louwers]

Closing for housekeeping.

If you want to replicate this behavior, you may use inline CSS to hide the table of contents in the sidebar:

<style>
  .md-nav--primary .md-nav__link[for=__toc] ~ .md-nav {
    display: none;
  }
</style>

This seems to hide the TOC altogether, instead of just when

---
hide:
  - toc

is part of the file.

I would like to the integrated TOC to respect the per-file setting.

[alexvoss]

As squidfunk mentioned, this essentially works as intended and documented. That would suggest a customization. However, such a step would solve the issue only for desktop users and would leave the ToC in the mobile navigation.

Can you do me the favor and describe the use case that gives rise to this question? I am asking because I would like to understand if this should be made configurable in the future or if this should really be solved in a different manner (splitting up overly long pages, for example).

[louwers]

Oh in my case I would like to hide the TOC on pages that only have one or two headings, because it adds to much visual clutter.

[alexvoss]

It should be possible to achieve what you are looking for by overriding the nav-item.html partial but that may not be easy since there is a lot of logic involved in constructing the navigation.

Another approach would be to take the CSS discussed above and include it in the page when hide contains toc - or even when the number of ToC entries is below a threshold.

[louwers]

Thanks! I didn't know it was possible to have custom CSS based on the YAML frontmatter... I should look into that.

[alexvoss]

You would need to write a hook to implement this logic.