@energysage/es-ds-components 3.0.6 → 3.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/es-collapse.vue +1 -1
- package/package.json +1 -1
- package/components/es-footer.vue +0 -192
- package/components/es-nav-bar-account-menu.vue +0 -70
- package/components/es-nav-bar-featured-article.vue +0 -60
- package/components/es-nav-bar-link.vue +0 -27
- package/components/es-nav-bar-product-menu.vue +0 -219
- package/components/es-nav-bar-top-level-menu.vue +0 -197
- package/components/es-nav-bar-topic-menu.vue +0 -197
- package/components/es-nav-bar.vue +0 -408
- package/utils/get-es-footer-content.ts +0 -91
- package/utils/get-es-nav-bar-account-content.ts +0 -55
- package/utils/get-es-nav-bar-global-content.ts +0 -481
|
@@ -54,7 +54,7 @@ const onClick = ({ value }: { value: boolean }) => {
|
|
|
54
54
|
:collapsed="!expanded"
|
|
55
55
|
:header="expanded ? 'click to collapse content' : 'click to expand content'"
|
|
56
56
|
:pt="{
|
|
57
|
-
header: '
|
|
57
|
+
header: 'd-flex flex-column justify-content-center position-relative py-100',
|
|
58
58
|
icons: 'h-100 position-absolute w-100',
|
|
59
59
|
root: border ? 'border-bottom border-top' : '',
|
|
60
60
|
toggler: {
|
package/package.json
CHANGED
package/components/es-footer.vue
DELETED
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import IconFacebook from './icon/facebook.vue';
|
|
3
|
-
import IconInstagram from './icon/instagram.vue';
|
|
4
|
-
import IconLinkedin from './icon/linkedin.vue';
|
|
5
|
-
import IconTwitter from './icon/twitter.vue';
|
|
6
|
-
import IconYoutube from './icon/youtube.vue';
|
|
7
|
-
|
|
8
|
-
export default {
|
|
9
|
-
name: 'EsFooter',
|
|
10
|
-
components: {
|
|
11
|
-
IconFacebook,
|
|
12
|
-
IconInstagram,
|
|
13
|
-
IconLinkedin,
|
|
14
|
-
IconTwitter,
|
|
15
|
-
IconYoutube,
|
|
16
|
-
},
|
|
17
|
-
props: {
|
|
18
|
-
content: {
|
|
19
|
-
type: Object,
|
|
20
|
-
required: true,
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
computed: {
|
|
24
|
-
copyrightText() {
|
|
25
|
-
return this.content.copyrightText.replace('{currentYear}', new Date().getFullYear());
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
mounted() {
|
|
29
|
-
// https://energysage.atlassian.net/wiki/spaces/FG/pages/1427865649/One-trust+Consent+Initialization+and+GTM
|
|
30
|
-
window.addEventListener('OneTrustLoadedCb', () => {
|
|
31
|
-
(window as any).OneTrust.OnConsentChanged(() => {
|
|
32
|
-
// OneTrust modal should modify cookie values, a hard-refresh will
|
|
33
|
-
// trigger re-loading GTM with updated cookie values, which in turn
|
|
34
|
-
// will only fire tags aligned with new preferences
|
|
35
|
-
window.location.reload();
|
|
36
|
-
return false;
|
|
37
|
-
});
|
|
38
|
-
document.querySelectorAll('.toggle-info-display').forEach((elem) => {
|
|
39
|
-
// Function closure to ensure event only fires on one elem
|
|
40
|
-
elem.addEventListener('click', (e) => {
|
|
41
|
-
e.stopImmediatePropagation();
|
|
42
|
-
(window as any).OneTrust.ToggleInfoDisplay();
|
|
43
|
-
});
|
|
44
|
-
});
|
|
45
|
-
});
|
|
46
|
-
},
|
|
47
|
-
};
|
|
48
|
-
</script>
|
|
49
|
-
|
|
50
|
-
<template>
|
|
51
|
-
<div class="es-footer clearfix">
|
|
52
|
-
<!-- Make an impact -->
|
|
53
|
-
<div class="bg-blue-900 text-white py-200 py-lg-300 px-200">
|
|
54
|
-
<div class="container px-0">
|
|
55
|
-
<div class="row">
|
|
56
|
-
<div
|
|
57
|
-
class="col col-12 col-md-5 col-lg-4 font-size-200 font-size-md-400 font-weight-bold mb-150 mb-md-0">
|
|
58
|
-
{{ content.banner.headline }}
|
|
59
|
-
<br />
|
|
60
|
-
{{ content.banner.subHeadline }}
|
|
61
|
-
</div>
|
|
62
|
-
<div class="col col-12 col-md-7 col-lg-8">
|
|
63
|
-
{{ content.banner.body }}
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
68
|
-
<!-- Make an impact -->
|
|
69
|
-
<div class="bg-blue-800 py-200 pt-lg-200 pb-lg-150 px-200">
|
|
70
|
-
<div class="container px-0">
|
|
71
|
-
<div class="row">
|
|
72
|
-
<!-- Link columns -->
|
|
73
|
-
<div class="col col-12 col-lg-8 order-lg-1 text-white">
|
|
74
|
-
<div class="row">
|
|
75
|
-
<div
|
|
76
|
-
v-for="column in content.columns"
|
|
77
|
-
:key="column.title"
|
|
78
|
-
class="col col-6 col-md-3 mb-100 mb-lg-0">
|
|
79
|
-
<ul class="list-unstyled mb-lg-0">
|
|
80
|
-
<li class="font-weight-bold font-size-75 font-size-md-100 mb-100 mb-lg-50">
|
|
81
|
-
{{ column.title }}
|
|
82
|
-
</li>
|
|
83
|
-
<li
|
|
84
|
-
v-for="link in column.links"
|
|
85
|
-
:key="link.text"
|
|
86
|
-
class="mt-0 mt-lg-25 mb-100 mb-lg-50 font-size-75">
|
|
87
|
-
<es-nav-bar-link
|
|
88
|
-
:href="link.url"
|
|
89
|
-
:target="link.newTab ? '_blank' : null"
|
|
90
|
-
class="text-reset">
|
|
91
|
-
{{ link.text }}
|
|
92
|
-
</es-nav-bar-link>
|
|
93
|
-
</li>
|
|
94
|
-
</ul>
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
98
|
-
<!-- Link columns -->
|
|
99
|
-
<!-- Logo and Social-->
|
|
100
|
-
<div class="col col-12 col-lg-4 order-lg-0">
|
|
101
|
-
<es-nav-bar-link
|
|
102
|
-
class="d-block mb-150 d-flex justify-content-center justify-content-lg-start"
|
|
103
|
-
:href="content.home.link">
|
|
104
|
-
<span class="sr-only">
|
|
105
|
-
{{ content.home.name }}
|
|
106
|
-
</span>
|
|
107
|
-
<div class="es-footer-logo">
|
|
108
|
-
<slot name="logo" />
|
|
109
|
-
</div>
|
|
110
|
-
</es-nav-bar-link>
|
|
111
|
-
<!-- Social icons -->
|
|
112
|
-
<div class="d-flex text-white justify-content-center justify-content-lg-start">
|
|
113
|
-
<es-nav-bar-link
|
|
114
|
-
v-for="(iconLink, index) in content.socialLinks"
|
|
115
|
-
:key="iconLink.text"
|
|
116
|
-
class="text-reset"
|
|
117
|
-
:class="{ 'mr-150': index < content.socialLinks.length - 1 }"
|
|
118
|
-
:href="iconLink.url"
|
|
119
|
-
target="_blank">
|
|
120
|
-
<span class="sr-only">{{ iconLink.text }}</span>
|
|
121
|
-
<component :is="iconLink.icon" />
|
|
122
|
-
</es-nav-bar-link>
|
|
123
|
-
</div>
|
|
124
|
-
<!-- Social icons -->
|
|
125
|
-
</div>
|
|
126
|
-
<!-- Logo and Social -->
|
|
127
|
-
</div>
|
|
128
|
-
</div>
|
|
129
|
-
</div>
|
|
130
|
-
<div class="bg-blue-700 text-blue-50 px-200 py-100">
|
|
131
|
-
<div class="container px-0">
|
|
132
|
-
<!-- Trademark Info -->
|
|
133
|
-
<p class="font-size-75">
|
|
134
|
-
{{ content.trademarkText }}
|
|
135
|
-
</p>
|
|
136
|
-
<p class="mb-200 font-size-75">
|
|
137
|
-
{{ copyrightText }}
|
|
138
|
-
</p>
|
|
139
|
-
<!-- Trademark Info -->
|
|
140
|
-
<!-- Legal -->
|
|
141
|
-
<hr class="border-top border-blue-500 m-0" />
|
|
142
|
-
<div class="row pt-100">
|
|
143
|
-
<div
|
|
144
|
-
v-for="link in content.legalLinks"
|
|
145
|
-
:key="link.text"
|
|
146
|
-
class="col col-6 col-lg-auto mt-25 mb-50 pr-lg-300">
|
|
147
|
-
<es-nav-bar-link
|
|
148
|
-
v-if="link.url"
|
|
149
|
-
:href="link.url"
|
|
150
|
-
class="text-reset font-weight-normal font-size-75 font-size-md-50 font-weight-md-normal">
|
|
151
|
-
{{ link.text }}
|
|
152
|
-
</es-nav-bar-link>
|
|
153
|
-
<div v-else>
|
|
154
|
-
<icon-ccpa-opt-out />
|
|
155
|
-
<es-button
|
|
156
|
-
inline
|
|
157
|
-
class="toggle-info-display text-reset font-weight-normal font-size-75 font-size-md-50 font-weight-md-normal ml-1"
|
|
158
|
-
variant="link">
|
|
159
|
-
{{ link.text }}
|
|
160
|
-
</es-button>
|
|
161
|
-
</div>
|
|
162
|
-
</div>
|
|
163
|
-
</div>
|
|
164
|
-
<!-- Legal -->
|
|
165
|
-
</div>
|
|
166
|
-
</div>
|
|
167
|
-
<div class="bg-blue-50 px-200 py-100">
|
|
168
|
-
<div class="container px-0">
|
|
169
|
-
<!-- DOE -->
|
|
170
|
-
<div class="d-lg-flex align-items-end">
|
|
171
|
-
<!-- eslint-disable-next-line -->
|
|
172
|
-
<img
|
|
173
|
-
:src="content.departmentOfEnergy.logoUrl"
|
|
174
|
-
alt="department of energy logo"
|
|
175
|
-
aria-hidden="true"
|
|
176
|
-
class="mr-100 mb-100 mb-lg-0"
|
|
177
|
-
width="99"
|
|
178
|
-
height="24" />
|
|
179
|
-
<p class="mb-0 font-size-75 font-weight-normal font-weight-lg-semibold">
|
|
180
|
-
<es-nav-bar-link
|
|
181
|
-
:href="content.departmentOfEnergy.learnMore.link"
|
|
182
|
-
target="_blank"
|
|
183
|
-
class="text-blue-900">
|
|
184
|
-
{{ content.departmentOfEnergy.learnMore.text }}
|
|
185
|
-
</es-nav-bar-link>
|
|
186
|
-
</p>
|
|
187
|
-
</div>
|
|
188
|
-
<!-- DOE -->
|
|
189
|
-
</div>
|
|
190
|
-
</div>
|
|
191
|
-
</div>
|
|
192
|
-
</template>
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
export default {
|
|
3
|
-
name: 'EsNavBarAccountMenu',
|
|
4
|
-
props: {
|
|
5
|
-
authItems: {
|
|
6
|
-
type: Array,
|
|
7
|
-
default: () => [],
|
|
8
|
-
},
|
|
9
|
-
loggedOut: {
|
|
10
|
-
type: Object,
|
|
11
|
-
required: true,
|
|
12
|
-
},
|
|
13
|
-
},
|
|
14
|
-
};
|
|
15
|
-
</script>
|
|
16
|
-
|
|
17
|
-
<template>
|
|
18
|
-
<div class="icon-dropdown">
|
|
19
|
-
<div class="nav-item">
|
|
20
|
-
<div class="nav-link dropdown-toggle d-none d-lg-flex flex-nowrap py-100">
|
|
21
|
-
<icon-person
|
|
22
|
-
class="align-self-center account-icon"
|
|
23
|
-
width="20px"
|
|
24
|
-
height="20px" />
|
|
25
|
-
<span class="sr-only">
|
|
26
|
-
{{ loggedOut.menuButtonText }}
|
|
27
|
-
</span>
|
|
28
|
-
</div>
|
|
29
|
-
<div class="menu">
|
|
30
|
-
<ul
|
|
31
|
-
class="loggedIn dropdown-menu account-menu rounded mt-0 py-100 list-unstyled"
|
|
32
|
-
style="display: none">
|
|
33
|
-
<!-- @vue-expect-error -->
|
|
34
|
-
<li
|
|
35
|
-
v-for="item in authItems"
|
|
36
|
-
:key="item.name">
|
|
37
|
-
<!-- @vue-expect-error -->
|
|
38
|
-
<es-nav-bar-link
|
|
39
|
-
class="dropdown-item nav-link"
|
|
40
|
-
:href="item.link">
|
|
41
|
-
<span class="mx-50">
|
|
42
|
-
<!-- @vue-expect-error -->
|
|
43
|
-
{{ item.name }}
|
|
44
|
-
</span>
|
|
45
|
-
</es-nav-bar-link>
|
|
46
|
-
</li>
|
|
47
|
-
</ul>
|
|
48
|
-
<ul
|
|
49
|
-
class="loggedOut dropdown-menu account-menu rounded mt-0"
|
|
50
|
-
style="display: none">
|
|
51
|
-
<li class="d-flex justify-content-center">
|
|
52
|
-
<es-button
|
|
53
|
-
:href="loggedOut.signIn.link"
|
|
54
|
-
class="m-100 w-100 text-white font-weight-bold">
|
|
55
|
-
{{ loggedOut.signIn.name }}
|
|
56
|
-
</es-button>
|
|
57
|
-
</li>
|
|
58
|
-
<li class="d-flex justify-content-center">
|
|
59
|
-
<es-button
|
|
60
|
-
:href="loggedOut.createAccount.link"
|
|
61
|
-
:outline="true"
|
|
62
|
-
class="mx-100 w-100 font-weight-bold">
|
|
63
|
-
{{ loggedOut.createAccount.name }}
|
|
64
|
-
</es-button>
|
|
65
|
-
</li>
|
|
66
|
-
</ul>
|
|
67
|
-
</div>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
</template>
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
export default {
|
|
3
|
-
name: 'EsNavBarFeaturedArticle',
|
|
4
|
-
props: {
|
|
5
|
-
eyebrow: {
|
|
6
|
-
type: String,
|
|
7
|
-
required: true,
|
|
8
|
-
},
|
|
9
|
-
link: {
|
|
10
|
-
type: String,
|
|
11
|
-
required: true,
|
|
12
|
-
},
|
|
13
|
-
newTab: {
|
|
14
|
-
type: Boolean,
|
|
15
|
-
default: false,
|
|
16
|
-
},
|
|
17
|
-
name: {
|
|
18
|
-
type: String,
|
|
19
|
-
required: true,
|
|
20
|
-
},
|
|
21
|
-
image500: {
|
|
22
|
-
type: String,
|
|
23
|
-
required: true,
|
|
24
|
-
},
|
|
25
|
-
imageAlt: {
|
|
26
|
-
type: String,
|
|
27
|
-
default: '',
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
computed: {
|
|
31
|
-
graphicId() {
|
|
32
|
-
return this.name.replace(/\s/g, '-').replace(/[^a-zA-Z]/g, '');
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
};
|
|
36
|
-
</script>
|
|
37
|
-
|
|
38
|
-
<template>
|
|
39
|
-
<div class="dropdown-cta-right">
|
|
40
|
-
<es-nav-bar-link
|
|
41
|
-
class="d-block cta-link text-gray-900 text-decoration-none"
|
|
42
|
-
:href="link"
|
|
43
|
-
:target="newTab ? '_blank' : null"
|
|
44
|
-
:title="name">
|
|
45
|
-
<nuxt-img
|
|
46
|
-
:id="graphicId"
|
|
47
|
-
class="featured-article-image mb-100 w-100 rounded"
|
|
48
|
-
:alt="imageAlt"
|
|
49
|
-
loading="lazy"
|
|
50
|
-
:src="image500" />
|
|
51
|
-
<div class="eyebrow mb-50 link-name">
|
|
52
|
-
{{ eyebrow }}
|
|
53
|
-
</div>
|
|
54
|
-
|
|
55
|
-
<p class="font-weight-bold link-subheading">
|
|
56
|
-
{{ name }}
|
|
57
|
-
</p>
|
|
58
|
-
</es-nav-bar-link>
|
|
59
|
-
</div>
|
|
60
|
-
</template>
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
// specific workaround for getting a reference to an auto-imported but not globally registered
|
|
3
|
-
// component like NuxtLink, so that it can be used in a <component :is=""> context.
|
|
4
|
-
// this resolves to an import statement, according to:
|
|
5
|
-
// https://github.com/nuxt/nuxt/issues/13659#issuecomment-1573568006
|
|
6
|
-
const NuxtLink = resolveComponent('NuxtLink');
|
|
7
|
-
|
|
8
|
-
const props = defineProps({
|
|
9
|
-
href: {
|
|
10
|
-
type: String,
|
|
11
|
-
default: '',
|
|
12
|
-
},
|
|
13
|
-
tag: {
|
|
14
|
-
type: String,
|
|
15
|
-
default: 'nuxt-link',
|
|
16
|
-
},
|
|
17
|
-
});
|
|
18
|
-
</script>
|
|
19
|
-
|
|
20
|
-
<template>
|
|
21
|
-
<component
|
|
22
|
-
:is="props.tag === 'nuxt-link' ? NuxtLink : props.tag"
|
|
23
|
-
:href="props.href"
|
|
24
|
-
v-bind="$attrs">
|
|
25
|
-
<slot />
|
|
26
|
-
</component>
|
|
27
|
-
</template>
|
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
export default {
|
|
3
|
-
name: 'EsNavBarProductMenu',
|
|
4
|
-
props: {
|
|
5
|
-
homeName: {
|
|
6
|
-
type: String,
|
|
7
|
-
required: true,
|
|
8
|
-
},
|
|
9
|
-
homeLink: {
|
|
10
|
-
type: String,
|
|
11
|
-
required: true,
|
|
12
|
-
},
|
|
13
|
-
closeButtonText: {
|
|
14
|
-
type: String,
|
|
15
|
-
required: true,
|
|
16
|
-
},
|
|
17
|
-
featuredArticle: {
|
|
18
|
-
type: Object,
|
|
19
|
-
default: () => ({}),
|
|
20
|
-
},
|
|
21
|
-
items: {
|
|
22
|
-
type: Array,
|
|
23
|
-
default: () => [],
|
|
24
|
-
},
|
|
25
|
-
link: {
|
|
26
|
-
type: String,
|
|
27
|
-
required: true,
|
|
28
|
-
},
|
|
29
|
-
mainMenuText: {
|
|
30
|
-
type: String,
|
|
31
|
-
required: true,
|
|
32
|
-
},
|
|
33
|
-
newTab: {
|
|
34
|
-
type: Boolean,
|
|
35
|
-
default: false,
|
|
36
|
-
},
|
|
37
|
-
name: {
|
|
38
|
-
type: String,
|
|
39
|
-
required: true,
|
|
40
|
-
},
|
|
41
|
-
seeAllText: {
|
|
42
|
-
type: String,
|
|
43
|
-
required: true,
|
|
44
|
-
},
|
|
45
|
-
topics: {
|
|
46
|
-
type: Array,
|
|
47
|
-
default: () => [],
|
|
48
|
-
},
|
|
49
|
-
},
|
|
50
|
-
computed: {
|
|
51
|
-
checkboxId() {
|
|
52
|
-
return `productMenu-${this.name}`;
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
|
-
};
|
|
56
|
-
</script>
|
|
57
|
-
|
|
58
|
-
<template>
|
|
59
|
-
<div class="dropdown nav-item nav-item-border-mobile">
|
|
60
|
-
<!-- desktop product link / hover menu trigger -->
|
|
61
|
-
<es-nav-bar-link
|
|
62
|
-
class="product-menu-header-link dropdown-toggle d-none d-lg-block px-lg-100 px-xl-200 py-lg-0 text-decoration-none"
|
|
63
|
-
:href="link"
|
|
64
|
-
:target="newTab ? '_blank' : null"
|
|
65
|
-
aria-haspopup="true"
|
|
66
|
-
aria-expanded="false">
|
|
67
|
-
<span class="product-menu-header-text d-block position-relative pb-lg-50">
|
|
68
|
-
{{ name }}
|
|
69
|
-
</span>
|
|
70
|
-
</es-nav-bar-link>
|
|
71
|
-
<!-- mobile flyout menu trigger -->
|
|
72
|
-
<!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
|
|
73
|
-
<label
|
|
74
|
-
:for="checkboxId"
|
|
75
|
-
class="dropdown-label nav-link d-flex d-lg-none align-items-center justify-content-between w-100 h-100 px-100 font-weight-bold">
|
|
76
|
-
{{ name }}
|
|
77
|
-
<icon-chevron-right
|
|
78
|
-
class="expand-icon"
|
|
79
|
-
style="height: 24px" />
|
|
80
|
-
</label>
|
|
81
|
-
<input
|
|
82
|
-
:id="checkboxId"
|
|
83
|
-
:name="checkboxId"
|
|
84
|
-
type="checkbox"
|
|
85
|
-
class="menu-checkbox" />
|
|
86
|
-
<div class="menu">
|
|
87
|
-
<div class="menu-header d-flex d-lg-none">
|
|
88
|
-
<div class="col-3" />
|
|
89
|
-
<div class="col-6 align-self-center text-center py-100">
|
|
90
|
-
<div class="nav-es-logo-mobile align-items-center d-flex">
|
|
91
|
-
<slot name="logo" />
|
|
92
|
-
</div>
|
|
93
|
-
<span class="sr-only">
|
|
94
|
-
{{ homeName }}
|
|
95
|
-
</span>
|
|
96
|
-
</div>
|
|
97
|
-
<!-- closes the entire mobile nav menu -->
|
|
98
|
-
<div class="d-flex col-3 justify-content-end">
|
|
99
|
-
<!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
|
|
100
|
-
<label
|
|
101
|
-
for="data--main-menu"
|
|
102
|
-
class="mb-0">
|
|
103
|
-
<icon-x class="menu-toggle align-self-center" />
|
|
104
|
-
<span class="sr-only">
|
|
105
|
-
{{ closeButtonText }}
|
|
106
|
-
</span>
|
|
107
|
-
</label>
|
|
108
|
-
</div>
|
|
109
|
-
</div>
|
|
110
|
-
<!-- mobile+desktop flyout menu -->
|
|
111
|
-
<!-- TODO: does anything match this aria-labelledby id? -->
|
|
112
|
-
<ul
|
|
113
|
-
v-if="items && items.length"
|
|
114
|
-
class="product-menu-flyout dropdown-menu row border-0 mt-0 py-lg-100">
|
|
115
|
-
<!-- mobile subnav header -->
|
|
116
|
-
<li class="nav-link col-lg-12 d-lg-none mb-50">
|
|
117
|
-
<div class="col-2">
|
|
118
|
-
<!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
|
|
119
|
-
<label
|
|
120
|
-
:for="checkboxId"
|
|
121
|
-
class="menu-toggle nav-link align-items-center d-flex font-size-sm h-100 mb-0 px-0 text-uppercase w-100">
|
|
122
|
-
<icon-arrow-left
|
|
123
|
-
class="expand-icon"
|
|
124
|
-
style="height: 24px" />
|
|
125
|
-
</label>
|
|
126
|
-
</div>
|
|
127
|
-
<div class="col-8 align-self-center text-center py-100">
|
|
128
|
-
<!--
|
|
129
|
-
<es-nav-bar-link
|
|
130
|
-
class="font-weight-boldest text-gray-900"
|
|
131
|
-
:href="link">
|
|
132
|
-
{{ name }}
|
|
133
|
-
</es-nav-bar-link>
|
|
134
|
-
<span class="font-weight-boldest text-gray-900">{{ name }}</span>
|
|
135
|
-
-->
|
|
136
|
-
<span
|
|
137
|
-
class="nav-link justify-content-center align-items-center d-flex font-weight-boldest w-100 h-100"
|
|
138
|
-
>{{ name }}</span
|
|
139
|
-
>
|
|
140
|
-
</div>
|
|
141
|
-
<div class="col-2" />
|
|
142
|
-
</li>
|
|
143
|
-
<!-- subnav items -->
|
|
144
|
-
<!-- @vue-expect-error -->
|
|
145
|
-
<li
|
|
146
|
-
v-for="item in items"
|
|
147
|
-
:key="item.name">
|
|
148
|
-
<!-- @vue-expect-error -->
|
|
149
|
-
<es-nav-bar-link
|
|
150
|
-
class="dropdown-item nav-item nav-item-border-mobile nav-link align-items-center d-flex px-lg-100 py-lg-50 product-menu-link"
|
|
151
|
-
:class="{ 'font-weight-bold': item.emphasize }"
|
|
152
|
-
:href="item.link"
|
|
153
|
-
:target="item.newTab ? '_blank' : null">
|
|
154
|
-
<!-- @vue-expect-error -->
|
|
155
|
-
{{ item.name }}
|
|
156
|
-
</es-nav-bar-link>
|
|
157
|
-
</li>
|
|
158
|
-
</ul>
|
|
159
|
-
<div
|
|
160
|
-
v-if="topics && topics.length"
|
|
161
|
-
class="product-menu-flyout product-menu-flyout--large dropdown-menu border-0 flex-wrap mt-0 p-lg-150">
|
|
162
|
-
<div class="nav-item d-lg-none mb-50">
|
|
163
|
-
<!-- mobile subnav header -->
|
|
164
|
-
<div class="col-2">
|
|
165
|
-
<!-- closes this menu level -->
|
|
166
|
-
<!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
|
|
167
|
-
<label
|
|
168
|
-
:for="checkboxId"
|
|
169
|
-
class="menu-toggle nav-link align-items-center d-flex font-size-sm h-100 mb-0 px-0 text-uppercase w-100">
|
|
170
|
-
<icon-arrow-left
|
|
171
|
-
class="expand-icon"
|
|
172
|
-
style="height: 24px" />
|
|
173
|
-
</label>
|
|
174
|
-
</div>
|
|
175
|
-
<div class="col-8 align-self-center text-center py-100">
|
|
176
|
-
<p
|
|
177
|
-
class="align-items-center d-flex d-lg-none font-weight-bold justify-content-between mb-0 text-decoration-none w-100">
|
|
178
|
-
<span
|
|
179
|
-
class="nav-link justify-content-center align-items-center d-flex font-weight-boldest w-100 h-100"
|
|
180
|
-
>{{ name }}</span
|
|
181
|
-
>
|
|
182
|
-
</p>
|
|
183
|
-
</div>
|
|
184
|
-
<div class="col-2" />
|
|
185
|
-
</div>
|
|
186
|
-
<es-row
|
|
187
|
-
tag="ul"
|
|
188
|
-
class="d-block d-lg-flex list-unstyled">
|
|
189
|
-
<!-- @vue-expect-error -->
|
|
190
|
-
<es-nav-bar-topic-menu
|
|
191
|
-
v-for="topic in topics"
|
|
192
|
-
:key="topic.name"
|
|
193
|
-
class="col-lg-4 d-block"
|
|
194
|
-
:home-name="homeName"
|
|
195
|
-
:home-link="homeLink"
|
|
196
|
-
:close-button-text="closeButtonText"
|
|
197
|
-
:items="topic.subtopics"
|
|
198
|
-
:link="topic.link"
|
|
199
|
-
:new-tab="topic.newTab"
|
|
200
|
-
:name="topic.name"
|
|
201
|
-
:show-items-on-mobile="topic.showItemsOnMobile"
|
|
202
|
-
:sub-heading="topic.subHeading">
|
|
203
|
-
<template #logo>
|
|
204
|
-
<slot name="logo" />
|
|
205
|
-
</template>
|
|
206
|
-
</es-nav-bar-topic-menu>
|
|
207
|
-
<li class="nav-item col-lg-4 d-block h-auto my-100 my-lg-0">
|
|
208
|
-
<es-nav-bar-featured-article
|
|
209
|
-
:eyebrow="featuredArticle.eyebrow"
|
|
210
|
-
:link="featuredArticle.link"
|
|
211
|
-
:name="featuredArticle.name"
|
|
212
|
-
:image500="featuredArticle.image500"
|
|
213
|
-
:image-alt="featuredArticle.imageAlt" />
|
|
214
|
-
</li>
|
|
215
|
-
</es-row>
|
|
216
|
-
</div>
|
|
217
|
-
</div>
|
|
218
|
-
</div>
|
|
219
|
-
</template>
|