Skip to content

Commit 6f23076

Browse files
Tanujkanti4441Tanujkanti4441
authored
docs: toggle nav in no-JS mode (#20476)
1 parent b69cfb3 commit 6f23076

4 files changed

Lines changed: 105 additions & 2 deletions

File tree

‎docs/src/_includes/components/docs-index.html‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,30 @@
1919
<path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
2020
</svg>
2121
</button>
22-
<div class="docs__index__panel" id="js-docs-index-panel">
22+
<div class="docs__index__panel with-js" id="js-docs-index-panel">
2323
{% include 'components/search.html' %}
2424

2525
<ul class="docs-index__list" id="js-docs-list">
2626
{%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
2727
</ul>
2828
</div>
2929
</nav>
30+
31+
<details class="docs-index-no-js docs-index">
32+
<summary class="docs-index-toggle-no-js docs-index-toggle">
33+
Index
34+
<svg width="20" height="20" viewBox="20 20 60 60" aria-hidden="true" focusable="false">
35+
<path id="ham-top" d="M30,37 L70,37 Z" stroke="currentColor"></path>
36+
<path id="ham-middle" d="M30,50 L70,50 Z" stroke="currentColor"></path>
37+
<path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
38+
</svg>
39+
</summary>
40+
41+
<div class="docs__index__panel" id="js-docs-index-panel">
42+
{% include 'components/search.html' %}
43+
44+
<ul class="docs-index__list" id="js-docs-list">
45+
{%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
46+
</ul>
47+
</div>
48+
</details>

‎docs/src/_includes/components/navigation.html‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</svg>
1010
</button>
1111
</div>
12-
<div class="docs-nav-panel" id="nav-panel">
12+
<div class="docs-nav-panel with-js" id="nav-panel">
1313
<ul id="nav-list">
1414
{% for item in site.navigation %}
1515
<li>
@@ -23,4 +23,28 @@
2323
{% include 'components/nav-version-switcher.html' %}
2424
</div>
2525
</div>
26+
<details class="docs-nav-no-js">
27+
<summary class="docs-nav-toggle-no-js">
28+
<svg width="20" height="20" viewBox="20 20 60 60">
29+
<path id="ham-top" d="M30,37 L70,37 Z" stroke="currentColor"></path>
30+
<path id="ham-middle" d="M30,50 L70,50 Z" stroke="currentColor"></path>
31+
<path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
32+
</svg>
33+
</summary>
34+
35+
<div class="docs-nav-panel" id="nav-panel">
36+
<ul id="nav-list">
37+
{% for item in site.navigation %}
38+
<li>
39+
{% set itemLink = links[item.link] %}
40+
<a href="{{ itemLink }}" {% if "/docs" in itemLink %}aria-current="true"{% endif %} {% if item.target
41+
%}target="_blank" {% endif %}>{{ item.text }}</a>
42+
</li>
43+
{% endfor %}
44+
</ul>
45+
<div class="mobile-only">
46+
{% include 'components/nav-version-switcher.html' %}
47+
</div>
48+
</div>
49+
</details>
2650
</nav>

‎docs/src/assets/scss/components/docs-index.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,3 +162,26 @@
162162
flex-direction: row;
163163
}
164164
}
165+
166+
.docs-index-no-js {
167+
display: none;
168+
}
169+
170+
.docs-index-no-js ul {
171+
list-style: none;
172+
padding-inline-start: 0;
173+
}
174+
175+
.docs-index-toggle-no-js {
176+
list-style: none;
177+
}
178+
179+
@media (max-width: 1023px) {
180+
html.no-js .docs__index__panel.with-js {
181+
display: none;
182+
}
183+
184+
html.no-js .docs-index-no-js {
185+
display: block;
186+
}
187+
}

‎docs/src/assets/scss/components/docs-navigation.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,3 +145,40 @@
145145
}
146146
}
147147
}
148+
149+
.docs-nav-no-js {
150+
display: none;
151+
}
152+
153+
.docs-nav-toggle-no-js svg {
154+
width: 40px;
155+
height: 40px;
156+
color: var(--headings-color);
157+
fill: none;
158+
stroke-width: 4;
159+
stroke-linecap: round;
160+
stroke-linejoin: round;
161+
}
162+
163+
@media (max-width: 1023px) {
164+
html.no-js .docs-nav-panel.with-js {
165+
display: none;
166+
}
167+
168+
html.no-js .docs-nav-no-js {
169+
display: block;
170+
}
171+
172+
html.no-js .docs-nav-toggle-no-js {
173+
position: absolute;
174+
top: 20px;
175+
right: 15px;
176+
list-style: none;
177+
cursor: pointer;
178+
}
179+
180+
html.no-js .flexer {
181+
position: relative;
182+
right: 50px;
183+
}
184+
}

0 commit comments

Comments
 (0)