Skip to content

Commit f9a5225

Browse files
committed
Collapse sidebar navigation list on smaller screens
- CSS only solution using "check-box hack" - Add new UI text label `menu_label` in _data/ui-text.yml - Close mmistakes#607
1 parent 71ddbf1 commit f9a5225

File tree

5 files changed

+87
-15
lines changed

5 files changed

+87
-15
lines changed

_data/ui-text.yml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ en: &DEFAULT_EN
88
pagination_next : "Next"
99
breadcrumb_home_label : "Home"
1010
breadcrumb_separator : "/"
11+
menu_label : "Toggle Menu"
1112
toc_label : "On This Page"
1213
ext_link_label : "Direct Link"
1314
less_than : "less than"
@@ -56,6 +57,7 @@ es: &DEFAULT_ES
5657
pagination_next : "Siguiente"
5758
breadcrumb_home_label : "Inicio"
5859
breadcrumb_separator : "/"
60+
menu_label :
5961
toc_label : "Contenidos"
6062
ext_link_label : "Enlace"
6163
less_than : "menos de"
@@ -100,6 +102,7 @@ fr: &DEFAULT_FR
100102
pagination_next : "Suivant"
101103
breadcrumb_home_label : "Accueil"
102104
breadcrumb_separator : "/"
105+
menu_label :
103106
toc_label : "Sur cette page"
104107
ext_link_label : "Lien direct"
105108
less_than : "plus petit que"
@@ -147,6 +150,7 @@ tr: &DEFAULT_TR
147150
pagination_next : "Sonraki"
148151
breadcrumb_home_label : "Ana Sayfa"
149152
breadcrumb_separator : "/"
153+
menu_label :
150154
toc_label : "İçindekiler"
151155
ext_link_label : "Doğrudan Bağlantı"
152156
less_than : "Şu süreden az: "
@@ -189,6 +193,7 @@ pt: &DEFAULT_PT
189193
pagination_next : "Seguinte"
190194
breadcrumb_home_label : "Início"
191195
breadcrumb_separator : "/"
196+
menu_label :
192197
toc_label : "Nesta Página"
193198
ext_link_label : "Link Direto"
194199
less_than : "menos de"
@@ -227,6 +232,7 @@ pt-BR:
227232
pagination_next : "Próxima"
228233
breadcrumb_home_label : "Home"
229234
breadcrumb_separator : "/"
235+
menu_label :
230236
toc_label : "Nesta página"
231237
ext_link_label : "Link direto"
232238
less_than : "meno que"
@@ -269,6 +275,7 @@ it: &DEFAULT_IT
269275
pagination_next : "Prossima"
270276
breadcrumb_home_label : "Home"
271277
breadcrumb_separator : "/"
278+
menu_label :
272279
toc_label : "Indice della pagina"
273280
ext_link_label : "Link"
274281
less_than : "meno di"
@@ -311,6 +318,7 @@ zh: &DEFAULT_ZH
311318
pagination_next : "向后"
312319
breadcrumb_home_label : "首页"
313320
breadcrumb_separator : "/"
321+
menu_label :
314322
toc_label : "在本页上"
315323
ext_link_label : "直接链接"
316324
less_than : "少于"
@@ -359,6 +367,7 @@ de: &DEFAULT_DE
359367
pagination_next : "Nächste"
360368
breadcrumb_home_label : "Home"
361369
breadcrumb_separator : "/"
370+
menu_label :
362371
toc_label : "Auf dieser Seite"
363372
ext_link_label : "Direkter Link"
364373
less_than : "weniger als"

_includes/nav_list

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
{% assign navigation = site.data.navigation[include.nav] %}
22

33
<nav class="nav__list">
4-
{% if page.sidebar.title %}<header><h4 class="nav__title" style="padding: 0;">{{ page.sidebar.title }}</h4></header>{% endif %}
5-
<ul>
4+
{% if page.sidebar.title %}<h3 class="nav__title" style="padding-left: 0;">{{ page.sidebar.title }}</h3>{% endif %}
5+
<input id="ac-toc" name="accordion-toc" type="checkbox" />
6+
<label for="ac-toc">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle Menu" }}</label>
7+
<ul class="nav__items">
68
{% for nav in navigation %}
79
<li>
810
{% if nav.url %}

_sass/_base.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,8 @@ nav {
290290
}
291291

292292
a {
293+
display: block;
294+
padding-bottom: 0.25em;
293295
text-decoration: none;
294296
}
295297

_sass/_navigation.scss

Lines changed: 72 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -314,19 +314,51 @@
314314
========================================================================== */
315315

316316
.nav__list {
317-
font-size: 1.25rem;
317+
margin: 2em 0 1.5em 0;
318318

319-
ul {
320-
margin-bottom: 1em;
319+
input[type="checkbox"],
320+
label {
321+
display: none;
321322
}
322323

323-
a {
324-
display: block;
325-
padding: 0.125em 0;
326-
color: inherit;
324+
@include breakpoint(max-width $large) {
327325

328-
&:hover {
329-
text-decoration: underline;
326+
label {
327+
position: relative;
328+
display: inline-block;
329+
padding: 0.5em 1em;
330+
font-size: $type-size-6;
331+
border: 1px solid $light-gray;
332+
border-radius: $border-radius;
333+
z-index: 20;
334+
-webkit-transition: 0.2s ease-out;
335+
transition: 0.2s ease-out;
336+
cursor: pointer;
337+
338+
&:hover {
339+
color: #fff;
340+
border-color: $gray;
341+
background-color: mix(white, #000, 20%);
342+
}
343+
}
344+
345+
/* selected*/
346+
input:checked + label {
347+
color: white;
348+
background-color: mix(white, #000, 20%);
349+
}
350+
351+
ul {
352+
margin-bottom: 1em;
353+
}
354+
355+
a {
356+
display: block;
357+
padding: 0.125em 0;
358+
359+
&:hover {
360+
text-decoration: underline;
361+
}
330362
}
331363
}
332364

@@ -345,6 +377,37 @@
345377
}
346378
}
347379

380+
.nav__list .nav__items {
381+
margin: 0;
382+
font-size: 1.25rem;
383+
384+
@include breakpoint(max-width $large) {
385+
position: relative;
386+
max-height: 0;
387+
opacity: 0;
388+
overflow: hidden;
389+
z-index: 10;
390+
-webkit-transition: 0.3s ease-in-out;
391+
transition: 0.3s ease-in-out;
392+
-webkit-transform: translate(0, 10%);
393+
-ms-transform: translate(0, 10%);
394+
transform: translate(0, 10%);
395+
}
396+
}
397+
398+
@include breakpoint(max-width $large) {
399+
.nav__list input:checked ~ .nav__items {
400+
-webkit-transition: 0.5s ease-in-out;
401+
transition: 0.5s ease-in-out;
402+
max-height: 100vh;
403+
opacity: 1;
404+
margin-top: 1em;
405+
-webkit-transform: translate(0, 0);
406+
-ms-transform: translate(0, 0);
407+
transform: translate(0, 0);
408+
}
409+
}
410+
348411
.nav__title {
349412
margin: 0;
350413
padding: 0.5rem 1rem;

_sass/_sidebar.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,6 @@
3333
font-family: $sans-serif-narrow;
3434
}
3535

36-
h3, h4 {
37-
font-size: $type-size-5;
38-
}
39-
4036
p, li {
4137
font-family: $sans-serif;
4238
font-size: $type-size-6;

0 commit comments

Comments
 (0)