Skip to content

Commit b8e1b63

Browse files
psifertexpsifertex
committed
fix mobile ToC viewing
1 parent 222052b commit b8e1b63

3 files changed

Lines changed: 214 additions & 1 deletion

File tree

overrides/partials/integrations/custom.html renamed to docs/overrides/partials/integrations/custom.html

File renamed without changes.

‎docs/overrides/partials/nav-item.html‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
{#-
2+
Local override of Material's partials/nav-item.html.
3+
4+
Material does not fold a *section index page's* own table of contents into the
5+
mobile navigation drawer: section nav entries only toggle their child pages,
6+
and the page TOC lives solely in the right sidebar, which is hidden on mobile.
7+
See https://github.com/squidfunk/mkdocs-material/issues/3180
8+
9+
The only change vs. the stock template is the block marked "BN OVERRIDE" below,
10+
which injects a leaf-style integrated TOC (the same #__toc structure Material
11+
emits for ordinary pages) as the first child of a section whose index page is
12+
the current page. Existing Material CSS keyed on
13+
`.md-nav--primary .md-nav__link[for=__toc]` hides it on desktop (the right
14+
sidebar shows the TOC there) and reveals it in the drawer on mobile.
15+
16+
Keep in sync with upstream nav-item.html on Material upgrades.
17+
-#}
18+
{% macro render_status(nav_item, type) %}
19+
{% set class = "md-status md-status--" ~ type %}
20+
{% if config.extra.status and config.extra.status[type] %}
21+
<span class="{{ class }}" title="{{ config.extra.status[type] }}">
22+
</span>
23+
{% else %}
24+
<span class="{{ class }}"></span>
25+
{% endif %}
26+
{% endmacro %}
27+
{% macro render_title(nav_item) %}
28+
{% if nav_item.typeset %}
29+
<span class="md-typeset">
30+
{{ nav_item.typeset.title }}
31+
</span>
32+
{% else %}
33+
{{ nav_item.title }}
34+
{% endif %}
35+
{% endmacro %}
36+
{% macro render_content(nav_item, ref) %}
37+
{% set ref = ref or nav_item %}
38+
{% if nav_item.meta and nav_item.meta.icon %}
39+
{% include ".icons/" ~ nav_item.meta.icon ~ ".svg" %}
40+
{% endif %}
41+
<span class="md-ellipsis">
42+
{{ render_title(ref) }}
43+
{% if nav_item.meta and nav_item.meta.subtitle %}
44+
<br>
45+
<small>{{ nav_item.meta.subtitle }}</small>
46+
{% endif %}
47+
</span>
48+
{% if nav_item.meta and nav_item.encrypted %}
49+
{{ render_status(nav_item, "encrypted") }}
50+
{% endif %}
51+
{% if nav_item.meta and nav_item.meta.status %}
52+
{{ render_status(nav_item, nav_item.meta.status) }}
53+
{% endif %}
54+
{% endmacro %}
55+
{% macro render_pruned(nav_item, ref) %}
56+
{% set ref = ref or nav_item %}
57+
{% set first = nav_item.children | first %}
58+
{% if first and first.children %}
59+
{{ render_pruned(first, ref) }}
60+
{% else %}
61+
<a href="{{ first.url | url }}" class="md-nav__link">
62+
{{ render_content(ref) }}
63+
{% if nav_item.children | length > 0 %}
64+
<span class="md-nav__icon md-icon"></span>
65+
{% endif %}
66+
</a>
67+
{% endif %}
68+
{% endmacro %}
69+
{% macro render(nav_item, path, level, parent) %}
70+
{% set class = "md-nav__item" %}
71+
{% if nav_item.active %}
72+
{% set class = class ~ " md-nav__item--active" %}
73+
{% endif %}
74+
{% if nav_item.pages %}
75+
{% if page in nav_item.pages %}
76+
{% set nav_item = page %}
77+
{% endif %}
78+
{% endif %}
79+
{% if nav_item.children %}
80+
{% set _ = namespace(index = none) %}
81+
{% if "navigation.indexes" in features %}
82+
{% for item in nav_item.children %}
83+
{% if item.is_index and _.index is none %}
84+
{% set _.index = item %}
85+
{% endif %}
86+
{% endfor %}
87+
{% endif %}
88+
{% set index = _.index %}
89+
{% if "navigation.tabs" in features %}
90+
{% if level == 1 and nav_item.active %}
91+
{% set class = class ~ " md-nav__item--section" %}
92+
{% set is_section = true %}
93+
{% endif %}
94+
{% if "navigation.sections" in features %}
95+
{% if level == 2 and parent.active %}
96+
{% set class = class ~ " md-nav__item--section" %}
97+
{% set is_section = true %}
98+
{% endif %}
99+
{% endif %}
100+
{% elif "navigation.sections" in features %}
101+
{% if level == 1 %}
102+
{% set class = class ~ " md-nav__item--section" %}
103+
{% set is_section = true %}
104+
{% endif %}
105+
{% endif %}
106+
{% if "navigation.prune" in features %}
107+
{% if not is_section and not nav_item.active %}
108+
{% set class = class ~ " md-nav__item--pruned" %}
109+
{% set is_pruned = true %}
110+
{% endif %}
111+
{% endif %}
112+
<li class="{{ class }} md-nav__item--nested">
113+
{% if not is_pruned %}
114+
{% set checked = "checked" if nav_item.active %}
115+
{% if "navigation.expand" in features and not checked %}
116+
{% set indeterminate = "md-toggle--indeterminate" %}
117+
{% endif %}
118+
<input class="md-nav__toggle md-toggle {{ indeterminate }}" type="checkbox" id="{{ path }}" {{ checked }}>
119+
{% if not index %}
120+
{% set tabindex = "0" if not is_section %}
121+
<label class="md-nav__link" for="{{ path }}" id="{{ path }}_label" tabindex="{{ tabindex }}">
122+
{{ render_content(nav_item) }}
123+
<span class="md-nav__icon md-icon"></span>
124+
</label>
125+
{% else %}
126+
{% set class = "md-nav__link--active" if index == page %}
127+
<div class="md-nav__link md-nav__container">
128+
<a href="{{ index.url | url }}" class="md-nav__link {{ class }}">
129+
{{ render_content(index, nav_item) }}
130+
</a>
131+
{% if nav_item.children | length > 1 %}
132+
{% set tabindex = "0" if not is_section %}
133+
<label class="md-nav__link {{ class }}" for="{{ path }}" id="{{ path }}_label" tabindex="{{ tabindex }}">
134+
<span class="md-nav__icon md-icon"></span>
135+
</label>
136+
{% endif %}
137+
</div>
138+
{% endif %}
139+
<nav class="md-nav" data-md-level="{{ level }}" aria-labelledby="{{ path }}_label" aria-expanded="{{ nav_item.active | tojson }}">
140+
<label class="md-nav__title" for="{{ path }}">
141+
<span class="md-nav__icon md-icon"></span>
142+
{{ render_title(nav_item) }}
143+
</label>
144+
<ul class="md-nav__list" data-md-scrollfix>
145+
{#- BN OVERRIDE: integrate the index page's own TOC into the mobile
146+
drawer. Stock Material never folds a section index page's TOC into
147+
the nav; this mirrors its leaf-page #__toc structure so the same
148+
CSS hides it on desktop and shows it on mobile. -#}
149+
{% if index and index == page %}
150+
{% set bn_toc = page.toc %}
151+
{% set bn_first = bn_toc | first %}
152+
{% if bn_first and bn_first.level == 1 %}
153+
{% set bn_toc = bn_first.children %}
154+
{% endif %}
155+
{% if bn_toc %}
156+
{% set bn_toc_title = lang.t("toc") %}
157+
{% if config.mdx_configs.toc and config.mdx_configs.toc.title %}
158+
{% set bn_toc_title = config.mdx_configs.toc.title %}
159+
{% endif %}
160+
<li class="md-nav__item md-nav__item--active">
161+
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
162+
<label class="md-nav__link" for="__toc">
163+
<span class="md-ellipsis">
164+
{{ bn_toc_title }}
165+
</span>
166+
<span class="md-nav__icon md-icon"></span>
167+
</label>
168+
{% include "partials/toc.html" %}
169+
</li>
170+
{% endif %}
171+
{% endif %}
172+
{% for item in nav_item.children %}
173+
{% if not index or item != index %}
174+
{{ render(item, path ~ "_" ~ loop.index, level + 1, nav_item) }}
175+
{% endif %}
176+
{% endfor %}
177+
</ul>
178+
</nav>
179+
{% else %}
180+
{{ render_pruned(nav_item) }}
181+
{% endif %}
182+
</li>
183+
{% elif nav_item == page %}
184+
<li class="{{ class }}">
185+
{% set toc = page.toc %}
186+
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
187+
{% set first = toc | first %}
188+
{% if first and first.level == 1 %}
189+
{% set toc = first.children %}
190+
{% endif %}
191+
{% if toc %}
192+
<label class="md-nav__link md-nav__link--active" for="__toc">
193+
{{ render_content(nav_item) }}
194+
<span class="md-nav__icon md-icon"></span>
195+
</label>
196+
{% endif %}
197+
<a href="{{ nav_item.url | url }}" class="md-nav__link md-nav__link--active">
198+
{{ render_content(nav_item) }}
199+
</a>
200+
{% if toc %}
201+
{% include "partials/toc.html" %}
202+
{% endif %}
203+
</li>
204+
{% else %}
205+
<li class="{{ class }}">
206+
<a href="{{ nav_item.url | url }}" class="md-nav__link">
207+
{{ render_content(nav_item) }}
208+
</a>
209+
</li>
210+
{% endif %}
211+
{% endmacro %}

‎mkdocs.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@ site_url: 'https://docs.binary.ninja/'
77
repo_url: 'https://binary.ninja/'
88
repo_name: 'binary.ninja'
99
use_directory_urls: false
10+
exclude_docs: |
11+
overrides/
1012
extra_css: ['docs.css', 'github.min.css', 'juxtapose.min.css']
1113
extra_javascript: ['highlight.min.js', 'cpp.min.js', 'python.min.js', 'juxtapose.min.js', 'tabsync.js']
1214

1315
theme:
1416
name: material
15-
custom_dir: overrides
17+
custom_dir: docs/overrides
1618
favicon: 'img/favicon.ico'
1719
font: false
1820
highlightjs: false

0 commit comments

Comments
 (0)