tecitheme 0.9.0 → 0.9.1
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/dist/components/PageNav.svelte +111 -99
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import Icon from "./Icon.svelte";
|
|
6
6
|
|
|
7
7
|
export let data = {};
|
|
8
|
-
let {logo, logo_mobile, logo_link_url, logo_alt_text,
|
|
8
|
+
let {logo, logo_mobile, logo_link_url, logo_alt_text, ctas, dropdowns, links} = data;
|
|
9
9
|
|
|
10
10
|
let id;
|
|
11
11
|
if (data.name) {
|
|
@@ -92,83 +92,89 @@
|
|
|
92
92
|
<nav class="hidden md:flex md:space-x-4 lg:space-x-10 md:items-center w-full">
|
|
93
93
|
|
|
94
94
|
<!-- Left Links -->
|
|
95
|
-
{#
|
|
96
|
-
|
|
97
|
-
|
|
95
|
+
{#if links}
|
|
96
|
+
{#each links as link}
|
|
97
|
+
<a href={link.url} class="text-base font-medium hover:text-gray-900">{link.text}</a>
|
|
98
|
+
{/each}
|
|
99
|
+
{/if}
|
|
98
100
|
|
|
99
101
|
<!-- Spacer -->
|
|
100
102
|
<div class="flex-1" />
|
|
101
103
|
|
|
102
104
|
<!-- Right Dropdowns -->
|
|
103
|
-
{#
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
<span class:text-gray-900={openDropdown == drop.key}>{drop.text}</span>
|
|
117
|
-
<svg
|
|
118
|
-
class="ml-2 h-5 w-5 group-hover:text-gray-900 {openDropdown == drop.key
|
|
119
|
-
? 'rotate-180 text-gray-900'
|
|
120
|
-
: 'text-gray-400'}"
|
|
121
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
122
|
-
viewBox="0 0 20 20"
|
|
123
|
-
fill="currentColor"
|
|
124
|
-
aria-hidden="true"
|
|
125
|
-
>
|
|
126
|
-
<path
|
|
127
|
-
fill-rule="evenodd"
|
|
128
|
-
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
129
|
-
clip-rule="evenodd"
|
|
130
|
-
/>
|
|
131
|
-
</svg>
|
|
132
|
-
</button>
|
|
133
|
-
|
|
134
|
-
<!-- Flyout menus -->
|
|
135
|
-
{#if openDropdown == drop.key}
|
|
136
|
-
<div
|
|
137
|
-
class="absolute left-1/2 z-50 mt-3 w-48 max-w-xs -translate-x-1/2 transform overflow-hidden px-2 shadow-lg ring-1 ring-black ring-opacity-5 sm:px-0 bg-white"
|
|
138
|
-
use:clickOutside
|
|
139
|
-
on:outclick={() => (openDropdown = "")}
|
|
140
|
-
in:slide={{ duration: 250, easing: cubicOut }}
|
|
141
|
-
out:slide={{ duration: 150, easing: cubicIn }}
|
|
105
|
+
{#if dropdowns}
|
|
106
|
+
{#each dropdowns as drop}
|
|
107
|
+
<div id={drop.key} class="relative">
|
|
108
|
+
|
|
109
|
+
<!-- Rail Buttons-->
|
|
110
|
+
<button
|
|
111
|
+
type="button"
|
|
112
|
+
on:click={() =>
|
|
113
|
+
openDropdown == drop.key
|
|
114
|
+
? (openDropdown = "")
|
|
115
|
+
: (openDropdown = drop.key)}
|
|
116
|
+
class="group inline-flex items-center bg-white text-left text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
|
|
117
|
+
aria-expanded={openDropdown == drop.key}
|
|
142
118
|
>
|
|
143
|
-
|
|
144
|
-
<
|
|
145
|
-
|
|
146
|
-
|
|
119
|
+
<span class:text-gray-900={openDropdown == drop.key}>{drop.text}</span>
|
|
120
|
+
<svg
|
|
121
|
+
class="ml-2 h-5 w-5 group-hover:text-gray-900 {openDropdown == drop.key
|
|
122
|
+
? 'rotate-180 text-gray-900'
|
|
123
|
+
: 'text-gray-400'}"
|
|
124
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
125
|
+
viewBox="0 0 20 20"
|
|
126
|
+
fill="currentColor"
|
|
127
|
+
aria-hidden="true"
|
|
128
|
+
>
|
|
129
|
+
<path
|
|
130
|
+
fill-rule="evenodd"
|
|
131
|
+
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
132
|
+
clip-rule="evenodd"
|
|
133
|
+
/>
|
|
134
|
+
</svg>
|
|
135
|
+
</button>
|
|
136
|
+
|
|
137
|
+
<!-- Flyout menus -->
|
|
138
|
+
{#if openDropdown == drop.key}
|
|
139
|
+
<div
|
|
140
|
+
class="absolute left-1/2 z-50 mt-3 w-48 max-w-xs -translate-x-1/2 transform overflow-hidden px-2 shadow-lg ring-1 ring-black ring-opacity-5 sm:px-0 bg-white"
|
|
141
|
+
use:clickOutside
|
|
142
|
+
on:outclick={() => (openDropdown = "")}
|
|
143
|
+
in:slide={{ duration: 250, easing: cubicOut }}
|
|
144
|
+
out:slide={{ duration: 150, easing: cubicIn }}
|
|
147
145
|
>
|
|
148
|
-
{#each drop.links as link}
|
|
149
|
-
<a
|
|
150
|
-
href={link.url}
|
|
151
|
-
class="-m-3 flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
|
|
152
|
-
>
|
|
153
|
-
<div class="ml-4">
|
|
154
|
-
<p class="text-base font-medium text-gray-900">{link.text}</p>
|
|
155
|
-
</div>
|
|
156
|
-
</a>
|
|
157
|
-
{/each}
|
|
158
|
-
</button>
|
|
159
146
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
147
|
+
<button
|
|
148
|
+
on:click={() => (openDropdown = "")}
|
|
149
|
+
class="relative grid w-full gap-6 bg-white px-2 py-6 text-left"
|
|
150
|
+
>
|
|
151
|
+
{#each drop.links as link}
|
|
152
|
+
<a
|
|
153
|
+
href={link.url}
|
|
154
|
+
class="-m-3 flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
|
|
155
|
+
>
|
|
156
|
+
<div class="ml-4">
|
|
157
|
+
<p class="text-base font-medium text-gray-900">{link.text}</p>
|
|
158
|
+
</div>
|
|
159
|
+
</a>
|
|
160
|
+
{/each}
|
|
161
|
+
</button>
|
|
162
|
+
|
|
163
|
+
</div>
|
|
164
|
+
{/if}
|
|
165
|
+
</div>
|
|
166
|
+
{/each}
|
|
167
|
+
{/if}
|
|
164
168
|
|
|
165
169
|
<!-- CTA Buttons -->
|
|
166
|
-
{#
|
|
167
|
-
|
|
168
|
-
{cta.
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
170
|
+
{#if ctas}
|
|
171
|
+
{#each ctas as cta}
|
|
172
|
+
<a href={cta.url} class="inline-block btn {getColorStyles('button', cta.color)}">
|
|
173
|
+
{cta.text}
|
|
174
|
+
<span class="hidden sm:inline" aria-hidden="true">→</span>
|
|
175
|
+
</a>
|
|
176
|
+
{/each}
|
|
177
|
+
{/if}
|
|
172
178
|
</nav>
|
|
173
179
|
|
|
174
180
|
</div>
|
|
@@ -197,45 +203,51 @@
|
|
|
197
203
|
</a>
|
|
198
204
|
|
|
199
205
|
<!-- Links -->
|
|
200
|
-
{#
|
|
201
|
-
|
|
202
|
-
href={link.url}
|
|
203
|
-
class="-m-3 flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
|
|
204
|
-
>
|
|
205
|
-
<div class="ml-4">
|
|
206
|
-
<p class="text-base font-medium text-gray-900">{link.text}</p>
|
|
207
|
-
</div>
|
|
208
|
-
</a>
|
|
209
|
-
{/each}
|
|
210
|
-
|
|
211
|
-
<!-- Dropdowns -->
|
|
212
|
-
{#each dropdowns as drop}
|
|
213
|
-
<div id={drop.key} class="-m-3 py-3 px-4">
|
|
214
|
-
<p class="text-base font-medium text-gray-400 px-4">{drop.text}</p>
|
|
215
|
-
{#each drop.links as link}
|
|
206
|
+
{#if links }
|
|
207
|
+
{#each links as link}
|
|
216
208
|
<a
|
|
217
|
-
href={
|
|
218
|
-
class="flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
|
|
209
|
+
href={link.url}
|
|
210
|
+
class="-m-3 flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
|
|
219
211
|
>
|
|
220
212
|
<div class="ml-4">
|
|
221
213
|
<p class="text-base font-medium text-gray-900">{link.text}</p>
|
|
222
214
|
</div>
|
|
223
215
|
</a>
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
216
|
+
{/each}
|
|
217
|
+
{/if}
|
|
218
|
+
|
|
219
|
+
<!-- Dropdowns -->
|
|
220
|
+
{#if dropdowns}
|
|
221
|
+
{#each dropdowns as drop}
|
|
222
|
+
<div id={drop.key} class="-m-3 py-3 px-4">
|
|
223
|
+
<p class="text-base font-medium text-gray-400 px-4">{drop.text}</p>
|
|
224
|
+
{#each drop.links as link}
|
|
225
|
+
<a
|
|
226
|
+
href={drop.url}
|
|
227
|
+
class="flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
|
|
228
|
+
>
|
|
229
|
+
<div class="ml-4">
|
|
230
|
+
<p class="text-base font-medium text-gray-900">{link.text}</p>
|
|
231
|
+
</div>
|
|
232
|
+
</a>
|
|
233
|
+
{/each}
|
|
234
|
+
</div>
|
|
235
|
+
{/each}
|
|
236
|
+
{/if}
|
|
227
237
|
|
|
228
238
|
<!-- CTAs -->
|
|
229
|
-
{#
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
<
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
+
{#if ctas}
|
|
240
|
+
{#each ctas as cta}
|
|
241
|
+
<a
|
|
242
|
+
href={cta.url}
|
|
243
|
+
class="-m-3 flex items-start py-3 px-4 transition duration-150 ease-in-out hover:bg-gray-50"
|
|
244
|
+
>
|
|
245
|
+
<div class="ml-4">
|
|
246
|
+
<p class="text-base font-medium text-gray-900">{cta.text}</p>
|
|
247
|
+
</div>
|
|
248
|
+
</a>
|
|
249
|
+
{/each}
|
|
250
|
+
{/if}
|
|
239
251
|
</button>
|
|
240
252
|
</div>
|
|
241
253
|
{/if}
|