Skip to content

Commit 3c5f44d

Browse files
PeeterPaalPeeterPaal
authored
Merge pull request #11 from Voog/010-additional-menulevels
Display all menulevels in the main menu
2 parents e35d77e + 31faaa0 commit 3c5f44d

File tree

10 files changed

+122
-75
lines changed

10 files changed

+122
-75
lines changed

‎components/menu-lang.tpl

+10-7
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<div class="
33
menu-item-wrapper
44
menu-lang-wrapper
5+
top-level
56
{% if site.has_many_languages?%}has-children{% endif %}
67
">
78
{% for language in site.languages -%}
@@ -16,13 +17,15 @@
1617
<div class="menu-item-children">
1718
{% for language in site.languages -%}
1819
{% unless language.code == page.language_code %}
19-
<a
20-
class="menu-child"
21-
href="{{ language.url }}"
22-
data-lang-code="{{ language.locale }}"
23-
>
24-
{{ language.title }}
25-
</a>
20+
<div class="menu-item-wrapper menu-child">
21+
<a
22+
class="menu-item"
23+
href="{{ language.url }}"
24+
data-lang-code="{{ language.locale }}"
25+
>
26+
{{ language.title }}
27+
</a>
28+
</div>
2629
{% endunless %}
2730
{%- endfor %}
2831

‎components/menu-main-item.tpl

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{%- comment %}
2+
Expected parameters:
3+
- menuitem (MenuItem): The menuitem to display and render children for.
4+
- toplevel (Boolean): Whether the menuitem is a top-level item or not.
5+
{%- endcomment %}
6+
7+
<div class="menu-item-wrapper{% if editmode or menuitem.children? %} has-children{% endif %}{% if toplevel %} top-level{% else %} menu-child{% endif %}">
8+
{%- menulink menuitem wrapper-tag="div" wrapper-class="menu-item" %}
9+
10+
{%- if menuitem.children? or editmode and menuitem.translated? %}
11+
<div class="menu-item-children">
12+
{%- for child in menuitem.visible_children %}
13+
{% include "menu-main-item" menuitem: child, toplevel: false %}
14+
{%- endfor %}
15+
16+
{%- if editmode %}
17+
{%- if menuitem.hidden_children.size > 0 %}
18+
<div class="menu-child">
19+
{% menubtn menuitem.hidden_children %}
20+
</div>
21+
{%- endif %}
22+
23+
<div class="menu-child">
24+
{% menuadd parent=menuitem %}
25+
</div>
26+
{% endif %}
27+
</div>
28+
<svg width="24" height="24" class="menu-children-icon">
29+
<use href="#ico-arrow-left"></use>
30+
</svg>
31+
{%- endif -%}
32+
</div>

‎components/menu-main.tpl

+4-29
Original file line numberDiff line numberDiff line change
@@ -14,48 +14,23 @@
1414

1515
<div class="menu">
1616
{% unless site.root_item.hidden? -%}
17-
<div class="menu-item-wrapper">
17+
<div class="menu-item-wrapper top-level">
1818
{% menulink site.root_item wrapper-tag="div" wrapper-class="menu-item" %}
1919
</div>
2020
{%- endunless %}
2121

2222
{% for item in site.visible_menuitems %}
23-
<div class="menu-item-wrapper{% if editmode or item.children? %} has-children{% endif %}">
24-
{%- menulink item wrapper-tag="div" wrapper-class="menu-item" %}
25-
26-
{%- if item.children? or editmode and item.translated? %}
27-
<div class="menu-item-children">
28-
{%- for child in item.visible_children %}
29-
{% menulink child wrapper-tag="div" wrapper-class="menu-child" %}
30-
{%- endfor %}
31-
32-
{%- if editmode %}
33-
{%- if item.hidden_children.size > 0 %}
34-
<div class="menu-child">
35-
{% menubtn item.hidden_children %}
36-
</div>
37-
{%- endif %}
38-
39-
<div class="menu-child">
40-
{% menuadd parent=item %}
41-
</div>
42-
{% endif %}
43-
</div>
44-
<svg width="24" height="24" class="menu-children-icon">
45-
<use href="#ico-arrow-left"></use>
46-
</svg>
47-
{%- endif -%}
48-
</div>
23+
{% include "menu-main-item" menuitem: item, toplevel: true %}
4924
{%- endfor -%}
5025

5126
{% if editmode -%}
5227
{%- if site.hidden_menuitems.size > 0 -%}
53-
<div class="menu-item-wrapper">
28+
<div class="menu-item-wrapper top-level">
5429
{% menubtn site.hidden_menuitems %}
5530
</div>
5631
{%- endif %}
5732

58-
<div class="menu-item-wrapper">
33+
<div class="menu-item-wrapper top-level">
5934
{% menuadd %}
6035
</div>
6136
{% endif -%}

‎javascripts/application.js

+15-9
Original file line numberDiff line numberDiff line change
@@ -616,7 +616,7 @@
616616
const $dropdownContent = $dropdownMenu.find('.dropdown-menu-children');
617617

618618
const $menu = $mainMenu.find('.menu').append($dropdownContent.children());
619-
const $menuItems = $menu.find('.menu-item-wrapper');
619+
const $menuItems = $menu.find('.menu-item-wrapper.top-level');
620620
const items = [];
621621

622622
$dropdownMenu.removeClass('dropdown-menu-visible').addClass('dropdown-menu');
@@ -644,7 +644,7 @@
644644

645645
const handleMobileMenuContent = () => {
646646
const $menu = $('.js-menu-main .menu');
647-
const $menuItems = $menu.find('.menu-item-wrapper:not(.menu-lang-wrapper)');
647+
const $menuItems = $menu.find('.menu-item-wrapper.top-level:not(.menu-lang-wrapper)');
648648

649649
$menuItems.each((_, item) => {
650650
$menu.append($(item));
@@ -810,7 +810,8 @@
810810

811811
$(e.target)
812812
.parents('.menu-item-wrapper.has-children')
813-
.find('.menu-item-children')
813+
.find('.menu-item-children:not(.active)')
814+
.first()
814815
.addClass('active');
815816

816817
$('.js-header').addClass('menu-children-active');
@@ -824,13 +825,18 @@
824825
});
825826

826827
$('.js-header .menu-children-close-icon').click(() => {
827-
$('.menu-item-wrapper.has-children').removeClass('active');
828-
$('.menu-item-children').removeClass('active');
829-
$('.js-header').removeClass('menu-children-active');
828+
const $lastActiveMenu = $('.menu-item-wrapper.has-children.active').last();
830829

831-
setTimeout(() => {
832-
$('.header-right').removeClass('active');
833-
}, 1000);
830+
$lastActiveMenu.removeClass('active');
831+
$lastActiveMenu.find('.menu-item-children').removeClass('active');
832+
833+
if ($lastActiveMenu.hasClass('top-level')) {
834+
$('.js-header').removeClass('menu-children-active');
835+
836+
setTimeout(() => {
837+
$('.header-right').removeClass('active');
838+
}, 1000);
839+
}
834840
});
835841
};
836842

‎javascripts/application.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎manifest.json

+7
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,13 @@
117117
"layout_name": "menu-lang",
118118
"title": "menu-lang"
119119
},
120+
{
121+
"title": "menu-main-item",
122+
"layout_name": "menu-main-item",
123+
"content_type": "component",
124+
"component": true,
125+
"file": "components/menu-main-item.tpl"
126+
},
120127
{
121128
"content_type": "component",
122129
"component": true,

‎sources/javascripts/application.js

+15-9
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
const $dropdownContent = $dropdownMenu.find('.dropdown-menu-children');
7272

7373
const $menu = $mainMenu.find('.menu').append($dropdownContent.children());
74-
const $menuItems = $menu.find('.menu-item-wrapper');
74+
const $menuItems = $menu.find('.menu-item-wrapper.top-level');
7575
const items = [];
7676

7777
$dropdownMenu.removeClass('dropdown-menu-visible').addClass('dropdown-menu');
@@ -99,7 +99,7 @@
9999

100100
const handleMobileMenuContent = () => {
101101
const $menu = $('.js-menu-main .menu');
102-
const $menuItems = $menu.find('.menu-item-wrapper:not(.menu-lang-wrapper)');
102+
const $menuItems = $menu.find('.menu-item-wrapper.top-level:not(.menu-lang-wrapper)');
103103

104104
$menuItems.each((_, item) => {
105105
$menu.append($(item));
@@ -265,7 +265,8 @@
265265

266266
$(e.target)
267267
.parents('.menu-item-wrapper.has-children')
268-
.find('.menu-item-children')
268+
.find('.menu-item-children:not(.active)')
269+
.first()
269270
.addClass('active');
270271

271272
$('.js-header').addClass('menu-children-active');
@@ -279,13 +280,18 @@
279280
});
280281

281282
$('.js-header .menu-children-close-icon').click(() => {
282-
$('.menu-item-wrapper.has-children').removeClass('active');
283-
$('.menu-item-children').removeClass('active');
284-
$('.js-header').removeClass('menu-children-active');
283+
const $lastActiveMenu = $('.menu-item-wrapper.has-children.active').last();
285284

286-
setTimeout(() => {
287-
$('.header-right').removeClass('active');
288-
}, 1000);
285+
$lastActiveMenu.removeClass('active');
286+
$lastActiveMenu.find('.menu-item-children').removeClass('active');
287+
288+
if ($lastActiveMenu.hasClass('top-level')) {
289+
$('.js-header').removeClass('menu-children-active');
290+
291+
setTimeout(() => {
292+
$('.header-right').removeClass('active');
293+
}, 1000);
294+
}
289295
});
290296
};
291297

‎sources/stylesheets/menus/_menu.scss

+21-11
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
overflow: hidden;
2727
}
2828

29-
.menu-item-wrapper {
29+
.menu-item-wrapper.top-level {
3030
padding: 12px;
3131
}
3232

@@ -256,27 +256,37 @@
256256
}
257257

258258
.menu-item-children {
259+
box-shadow: none;
259260
display: block;
260-
top: 0;
261-
right: -100%;
262261
height: 100%;
263-
width: 100%;
264262
padding: 0;
265-
z-index: 2;
263+
right: -100%;
264+
top: 0;
266265
transition: right .3s ease-in-out;
266+
width: 100%;
267+
z-index: 2;
267268

268269
&.active {
269270
right: 0;
270271
height: 100vh;
271-
overflow: scroll;
272+
overflow-x: hidden;
273+
overflow-y: auto;
274+
}
275+
}
276+
277+
&.menu-child {
278+
padding: 24px;
279+
280+
&:first-child {
281+
padding-top: var(--header-height);
272282
}
283+
}
273284

274-
.menu-child {
275-
padding: 24px;
285+
.menu-child {
286+
padding: 24px;
276287

277-
&:first-child {
278-
padding-top: var(--header-height);
279-
}
288+
&:first-child {
289+
padding-top: var(--header-height);
280290
}
281291
}
282292
}

‎stylesheets/main.css

+16-8
Original file line numberDiff line numberDiff line change
@@ -1217,7 +1217,7 @@ body.edy-checkout-button-visible {
12171217
gap: 32px;
12181218
overflow: hidden;
12191219
}
1220-
.menu-main .menu-item-wrapper {
1220+
.menu-main .menu-item-wrapper.top-level {
12211221
padding: 12px;
12221222
}
12231223
.menu-main .menu-children-icon {
@@ -1409,24 +1409,32 @@ body.edy-checkout-button-visible {
14091409
fill: #000000;
14101410
}
14111411
.menu-main .menu .menu-item-wrapper .menu-item-children {
1412+
box-shadow: none;
14121413
display: block;
1413-
top: 0;
1414-
right: -100%;
14151414
height: 100%;
1416-
width: 100%;
14171415
padding: 0;
1418-
z-index: 2;
1416+
right: -100%;
1417+
top: 0;
14191418
transition: right 0.3s ease-in-out;
1419+
width: 100%;
1420+
z-index: 2;
14201421
}
14211422
.menu-main .menu .menu-item-wrapper .menu-item-children.active {
14221423
right: 0;
14231424
height: 100vh;
1424-
overflow: scroll;
1425+
overflow-x: hidden;
1426+
overflow-y: auto;
1427+
}
1428+
.menu-main .menu .menu-item-wrapper.menu-child {
1429+
padding: 24px;
1430+
}
1431+
.menu-main .menu .menu-item-wrapper.menu-child:first-child {
1432+
padding-top: var(--header-height);
14251433
}
1426-
.menu-main .menu .menu-item-wrapper .menu-item-children .menu-child {
1434+
.menu-main .menu .menu-item-wrapper .menu-child {
14271435
padding: 24px;
14281436
}
1429-
.menu-main .menu .menu-item-wrapper .menu-item-children .menu-child:first-child {
1437+
.menu-main .menu .menu-item-wrapper .menu-child:first-child {
14301438
padding-top: var(--header-height);
14311439
}
14321440
.menu-main .menu .menu-item-children,

‎stylesheets/main.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)