Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import {
Component,
Prop,
Listen,
h,
State,
Event,
EventEmitter,
Element
} from '@stencil/core';
@Component({
tag: 'hy-menu-mobile',
styleUrl: 'menu-mobile.scss',
shadow: true
})
export class MenuMobile {
@Element() el: HTMLElement;
@Prop() open = true;
@Prop() menuType: string = 'desktop';
@State() breadcrumbs: any;
@State() newBreadcrumb;
@Event() menuContainerToggled: EventEmitter;
@Listen('removeBreadcrumb')
removeBreadcrumb(data) {
let breadcrumbs = JSON.parse(JSON.stringify(this.breadcrumbs));
let currentBreadcrumb = breadcrumbs
.map(function (e) {
return e.bid;
})
.indexOf(data.detail.bid);
breadcrumbs.length = currentBreadcrumb;
for (let i = currentBreadcrumb, l = this.breadcrumbs.length; i < l; i++) {
this.menuContainerToggled.emit({triggerItem: this.breadcrumbs[i].bid, triggerType: 'remove'});
}
this.breadcrumbs = [];
this.breadcrumbs = breadcrumbs;
// Reset if home has been clicked.
if (currentBreadcrumb === 0) {
this.breadcrumbs = [];
}
}
@Listen('addBreadcrumb')
addBreadcrumb(event) {
this.breadcrumbs = [
...this.breadcrumbs,
{
label: event.detail.label,
bid: event.detail.bid,
url: event.detail.url
}
];
}
componentWillLoad() {
this.breadcrumbs = [];
}
componentWillUpdate() {
this.el.children[0].setAttribute('menu-type', this.menuType);
}
render() {
if (this.menuType === 'desktop') {
return (
<nav role={'navigation'}>
<div
aria-hidden={this.open ? 'false' : 'true'}
class={{
'hy-menu--desktop': true,
'is-open': this.open
}}
>
<slot />
</div>
</nav>
);
}
else {
return (
<nav role={'navigation'}>
<div class={'hy-menu-mobile-breadcrumb-container'}>
{this.breadcrumbs.map((breadcrumb, index) => {
return <hy-menu-mobile-breadcrumb label={breadcrumb.label} bid={breadcrumb.bid} is-first={index === 0} />;
})}
</div>
<div
aria-hidden={this.open ? 'false' : 'true'}
class={{
'hy-menu-mobile': true,
'is-open': this.open
}}
>
<slot />
</div>
</nav>
);
}
}
}