@iroco/ui 0.11.1 → 0.13.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/lib/containers.scss +2 -2
- package/lib/index.js +324 -119
- package/lib/index.min.js +3 -3
- package/lib/index.mjs +324 -120
- package/lib/index.mjs.css +83 -80
- package/package.json +1 -1
- package/src/IconMastodon.svelte +13 -0
- package/src/NavBar.svelte +154 -0
- package/src/Navigation.svelte +17 -13
- package/src/index.ts +2 -1
- package/src/SideBar.svelte +0 -103
package/lib/index.mjs.css
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
svg.svelte-1cuxg7m {
|
|
2
|
-
overflow: visible; }
|
|
3
|
-
|
|
4
1
|
.rotate.svelte-1dns1yx {
|
|
5
2
|
animation: svelte-1dns1yx-rotation 2s; }
|
|
6
3
|
|
|
@@ -16,6 +13,9 @@ svg.svelte-1cuxg7m {
|
|
|
16
13
|
to {
|
|
17
14
|
transform: rotate(359deg); } }
|
|
18
15
|
|
|
16
|
+
svg.svelte-1cuxg7m {
|
|
17
|
+
overflow: visible; }
|
|
18
|
+
|
|
19
19
|
.data-table.svelte-1ju5y8t {
|
|
20
20
|
border: 1px solid #464452;
|
|
21
21
|
width: 100%; }
|
|
@@ -31,25 +31,6 @@ svg.svelte-1cuxg7m {
|
|
|
31
31
|
text-align: center;
|
|
32
32
|
vertical-align: middle; }
|
|
33
33
|
|
|
34
|
-
.alert.svelte-1oun6o6 {
|
|
35
|
-
min-height: 2em;
|
|
36
|
-
display: inline-flex;
|
|
37
|
-
align-items: center;
|
|
38
|
-
border-radius: 0.5em;
|
|
39
|
-
padding: 0 1em 0 1em;
|
|
40
|
-
font-size: 1.2em;
|
|
41
|
-
justify-content: center;
|
|
42
|
-
margin-bottom: 1em;
|
|
43
|
-
cursor: pointer; }
|
|
44
|
-
|
|
45
|
-
.alert--danger.svelte-1oun6o6 {
|
|
46
|
-
background-color: rgba(255, 80, 77, 0.5);
|
|
47
|
-
border: 1px solid #ff504d; }
|
|
48
|
-
|
|
49
|
-
.alert--success.svelte-1oun6o6 {
|
|
50
|
-
background-color: rgba(0, 214, 146, 0.5);
|
|
51
|
-
border: 1px solid #00D692; }
|
|
52
|
-
|
|
53
34
|
.iroco-ui-radio.svelte-156c82q.svelte-156c82q.svelte-156c82q {
|
|
54
35
|
color: #f2ebe3;
|
|
55
36
|
position: relative;
|
|
@@ -123,7 +104,7 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
123
104
|
padding-bottom: 10px;
|
|
124
105
|
display: inline-block; }
|
|
125
106
|
|
|
126
|
-
.container-wide.svelte-
|
|
107
|
+
.container-wide.svelte-a1s5q9 {
|
|
127
108
|
width: calc(100% - 20px);
|
|
128
109
|
max-width: 2360px;
|
|
129
110
|
margin-left: auto;
|
|
@@ -131,42 +112,42 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
131
112
|
transition: max-width ease-out 200ms; }
|
|
132
113
|
|
|
133
114
|
@media all and (max-width: 2560px) {
|
|
134
|
-
.container-wide.svelte-
|
|
115
|
+
.container-wide.svelte-a1s5q9 {
|
|
135
116
|
max-width: 1620px; } }
|
|
136
117
|
|
|
137
118
|
@media all and (max-width: 1800px) {
|
|
138
|
-
.container-wide.svelte-
|
|
119
|
+
.container-wide.svelte-a1s5q9 {
|
|
139
120
|
max-width: 1280px; } }
|
|
140
121
|
|
|
141
122
|
@media all and (max-width: 1440px) {
|
|
142
|
-
.container-wide.svelte-
|
|
123
|
+
.container-wide.svelte-a1s5q9 {
|
|
143
124
|
max-width: 884px; } }
|
|
144
125
|
|
|
145
126
|
@media all and (max-width: 1024px) {
|
|
146
|
-
.container-wide.svelte-
|
|
127
|
+
.container-wide.svelte-a1s5q9 {
|
|
147
128
|
max-width: 648px; } }
|
|
148
129
|
|
|
149
130
|
@media all and (max-width: 768px) {
|
|
150
|
-
.container-wide.svelte-
|
|
131
|
+
.container-wide.svelte-a1s5q9 {
|
|
151
132
|
max-width: 496px; } }
|
|
152
133
|
|
|
153
134
|
@media all and (max-width: 596px) {
|
|
154
|
-
.container-wide.svelte-
|
|
135
|
+
.container-wide.svelte-a1s5q9 {
|
|
155
136
|
max-width: 365px; } }
|
|
156
137
|
|
|
157
138
|
@media all and (max-width: 425px) {
|
|
158
|
-
.container-wide.svelte-
|
|
139
|
+
.container-wide.svelte-a1s5q9 {
|
|
159
140
|
max-width: calc(100% - 60px); } }
|
|
160
141
|
|
|
161
142
|
@media all and (max-width: 375px) {
|
|
162
|
-
.container-wide.svelte-
|
|
143
|
+
.container-wide.svelte-a1s5q9 {
|
|
163
144
|
max-width: calc(100% - 40px); } }
|
|
164
145
|
|
|
165
146
|
@media all and (max-width: 320px) {
|
|
166
|
-
.container-wide.svelte-
|
|
147
|
+
.container-wide.svelte-a1s5q9 {
|
|
167
148
|
max-width: calc(100% - 20px); } }
|
|
168
149
|
|
|
169
|
-
.container-large.svelte-
|
|
150
|
+
.container-large.svelte-a1s5q9 {
|
|
170
151
|
width: calc(100% - 20px);
|
|
171
152
|
max-width: 1280px;
|
|
172
153
|
margin-left: auto;
|
|
@@ -174,34 +155,34 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
174
155
|
transition: max-width ease-out 200ms; }
|
|
175
156
|
|
|
176
157
|
@media all and (max-width: 1440px) {
|
|
177
|
-
.container-large.svelte-
|
|
158
|
+
.container-large.svelte-a1s5q9 {
|
|
178
159
|
max-width: 884px; } }
|
|
179
160
|
|
|
180
161
|
@media all and (max-width: 1024px) {
|
|
181
|
-
.container-large.svelte-
|
|
162
|
+
.container-large.svelte-a1s5q9 {
|
|
182
163
|
max-width: 648px; } }
|
|
183
164
|
|
|
184
165
|
@media all and (max-width: 768px) {
|
|
185
|
-
.container-large.svelte-
|
|
166
|
+
.container-large.svelte-a1s5q9 {
|
|
186
167
|
max-width: 496px; } }
|
|
187
168
|
|
|
188
169
|
@media all and (max-width: 596px) {
|
|
189
|
-
.container-large.svelte-
|
|
170
|
+
.container-large.svelte-a1s5q9 {
|
|
190
171
|
max-width: 365px; } }
|
|
191
172
|
|
|
192
173
|
@media all and (max-width: 425px) {
|
|
193
|
-
.container-large.svelte-
|
|
174
|
+
.container-large.svelte-a1s5q9 {
|
|
194
175
|
max-width: calc(100% - 60px); } }
|
|
195
176
|
|
|
196
177
|
@media all and (max-width: 375px) {
|
|
197
|
-
.container-large.svelte-
|
|
178
|
+
.container-large.svelte-a1s5q9 {
|
|
198
179
|
max-width: calc(100% - 40px); } }
|
|
199
180
|
|
|
200
181
|
@media all and (max-width: 320px) {
|
|
201
|
-
.container-large.svelte-
|
|
182
|
+
.container-large.svelte-a1s5q9 {
|
|
202
183
|
max-width: calc(100% - 20px); } }
|
|
203
184
|
|
|
204
|
-
.container-medium.svelte-
|
|
185
|
+
.container-medium.svelte-a1s5q9 {
|
|
205
186
|
width: calc(100% - 20px);
|
|
206
187
|
max-width: 884px;
|
|
207
188
|
margin-left: auto;
|
|
@@ -209,30 +190,30 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
209
190
|
transition: max-width ease-out 200ms; }
|
|
210
191
|
|
|
211
192
|
@media all and (max-width: 1024px) {
|
|
212
|
-
.container-medium.svelte-
|
|
193
|
+
.container-medium.svelte-a1s5q9 {
|
|
213
194
|
max-width: 648px; } }
|
|
214
195
|
|
|
215
196
|
@media all and (max-width: 768px) {
|
|
216
|
-
.container-medium.svelte-
|
|
197
|
+
.container-medium.svelte-a1s5q9 {
|
|
217
198
|
max-width: 496px; } }
|
|
218
199
|
|
|
219
200
|
@media all and (max-width: 596px) {
|
|
220
|
-
.container-medium.svelte-
|
|
201
|
+
.container-medium.svelte-a1s5q9 {
|
|
221
202
|
max-width: 365px; } }
|
|
222
203
|
|
|
223
204
|
@media all and (max-width: 425px) {
|
|
224
|
-
.container-medium.svelte-
|
|
205
|
+
.container-medium.svelte-a1s5q9 {
|
|
225
206
|
max-width: calc(100% - 60px); } }
|
|
226
207
|
|
|
227
208
|
@media all and (max-width: 375px) {
|
|
228
|
-
.container-medium.svelte-
|
|
209
|
+
.container-medium.svelte-a1s5q9 {
|
|
229
210
|
max-width: calc(100% - 40px); } }
|
|
230
211
|
|
|
231
212
|
@media all and (max-width: 320px) {
|
|
232
|
-
.container-medium.svelte-
|
|
213
|
+
.container-medium.svelte-a1s5q9 {
|
|
233
214
|
max-width: calc(100% - 20px); } }
|
|
234
215
|
|
|
235
|
-
.container-small.svelte-
|
|
216
|
+
.container-small.svelte-a1s5q9 {
|
|
236
217
|
width: calc(100% - 20px);
|
|
237
218
|
max-width: 496px;
|
|
238
219
|
margin-left: auto;
|
|
@@ -240,18 +221,18 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
240
221
|
transition: max-width ease-out 200ms; }
|
|
241
222
|
|
|
242
223
|
@media all and (max-width: 425px) {
|
|
243
|
-
.container-small.svelte-
|
|
224
|
+
.container-small.svelte-a1s5q9 {
|
|
244
225
|
max-width: calc(100% - 60px); } }
|
|
245
226
|
|
|
246
227
|
@media all and (max-width: 375px) {
|
|
247
|
-
.container-small.svelte-
|
|
228
|
+
.container-small.svelte-a1s5q9 {
|
|
248
229
|
max-width: calc(100% - 40px); } }
|
|
249
230
|
|
|
250
231
|
@media all and (max-width: 320px) {
|
|
251
|
-
.container-small.svelte-
|
|
232
|
+
.container-small.svelte-a1s5q9 {
|
|
252
233
|
max-width: calc(100% - 20px); } }
|
|
253
234
|
|
|
254
|
-
.iroco-ui-button.svelte-
|
|
235
|
+
.iroco-ui-button.svelte-a1s5q9 {
|
|
255
236
|
cursor: pointer;
|
|
256
237
|
-webkit-touch-callout: none;
|
|
257
238
|
-webkit-user-select: none;
|
|
@@ -265,86 +246,90 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
265
246
|
margin: 1em 0em;
|
|
266
247
|
position: relative; }
|
|
267
248
|
|
|
268
|
-
.iroco-ui-button--basic.svelte-
|
|
249
|
+
.iroco-ui-button--basic.svelte-a1s5q9 {
|
|
250
|
+
background: #f2ebe3;
|
|
251
|
+
color: #a9a29e;
|
|
252
|
+
border: 1px solid #18151E; }
|
|
253
|
+
|
|
254
|
+
.iroco-ui-button--success.svelte-a1s5q9 {
|
|
269
255
|
background: #00D692; }
|
|
270
256
|
|
|
271
|
-
.iroco-ui-button--danger.svelte-
|
|
257
|
+
.iroco-ui-button--danger.svelte-a1s5q9 {
|
|
272
258
|
background: #ff504d;
|
|
273
259
|
color: #f2ebe3; }
|
|
274
260
|
|
|
275
|
-
.iroco-ui-button--regular.svelte-
|
|
261
|
+
.iroco-ui-button--regular.svelte-a1s5q9 {
|
|
276
262
|
padding: 1em; }
|
|
277
263
|
|
|
278
|
-
.iroco-ui-button--small.svelte-
|
|
264
|
+
.iroco-ui-button--small.svelte-a1s5q9 {
|
|
279
265
|
padding: 0.5em; }
|
|
280
266
|
|
|
281
|
-
.iroco-ui-button.svelte-
|
|
267
|
+
.iroco-ui-button.svelte-a1s5q9:active {
|
|
282
268
|
background: #f5f5f5; }
|
|
283
269
|
|
|
284
|
-
.iroco-ui-button.disabled.svelte-
|
|
270
|
+
.iroco-ui-button.disabled.svelte-a1s5q9 {
|
|
285
271
|
background-color: #f5f5f5;
|
|
286
272
|
cursor: default; }
|
|
287
273
|
|
|
288
|
-
.iroco-ui-button.rounded.svelte-
|
|
274
|
+
.iroco-ui-button.rounded.svelte-a1s5q9 {
|
|
289
275
|
border-radius: 10px; }
|
|
290
276
|
|
|
291
|
-
.account__navigation.svelte-
|
|
277
|
+
.account__navigation.svelte-1uu9ytm.svelte-1uu9ytm {
|
|
292
278
|
display: block;
|
|
293
279
|
width: 100%;
|
|
294
280
|
border-bottom: 1px solid #464452; }
|
|
295
281
|
|
|
296
|
-
.account__navigation--mobile.svelte-
|
|
282
|
+
.account__navigation--mobile.svelte-1uu9ytm.svelte-1uu9ytm {
|
|
297
283
|
display: none; }
|
|
298
284
|
|
|
299
|
-
.account__navigation__title-container.svelte-
|
|
285
|
+
.account__navigation__title-container.svelte-1uu9ytm.svelte-1uu9ytm {
|
|
300
286
|
display: flex;
|
|
301
287
|
align-items: center;
|
|
302
288
|
padding-left: 1em; }
|
|
303
289
|
|
|
304
|
-
.account__navigation__title-container.svelte-
|
|
290
|
+
.account__navigation__title-container.svelte-1uu9ytm h1.svelte-1uu9ytm {
|
|
305
291
|
padding-left: 1em; }
|
|
306
292
|
|
|
307
293
|
@media all and (max-width: 768px) {
|
|
308
|
-
.account__navigation.svelte-
|
|
294
|
+
.account__navigation.svelte-1uu9ytm.svelte-1uu9ytm {
|
|
309
295
|
display: none;
|
|
310
296
|
color: #f2ebe3; }
|
|
311
|
-
.account__navigation--mobile.svelte-
|
|
297
|
+
.account__navigation--mobile.svelte-1uu9ytm.svelte-1uu9ytm {
|
|
312
298
|
display: flex;
|
|
313
299
|
padding: 0 1em;
|
|
314
300
|
justify-content: space-between;
|
|
315
301
|
position: fixed;
|
|
316
302
|
top: 0;
|
|
303
|
+
z-index: 1;
|
|
317
304
|
width: 100%;
|
|
318
305
|
border-bottom: 1px solid #464452; }
|
|
319
|
-
.account__navigation--mobile.svelte-
|
|
306
|
+
.account__navigation--mobile.svelte-1uu9ytm h1.svelte-1uu9ytm {
|
|
320
307
|
font: bold;
|
|
321
308
|
font-size: 2em; }
|
|
322
|
-
.account__navigation--mobile__button.svelte-
|
|
309
|
+
.account__navigation--mobile__button.svelte-1uu9ytm.svelte-1uu9ytm {
|
|
323
310
|
background-color: transparent;
|
|
324
311
|
border: none;
|
|
325
312
|
color: #464452; }
|
|
326
|
-
.account__navigation--mobile__title-container.svelte-
|
|
313
|
+
.account__navigation--mobile__title-container.svelte-1uu9ytm.svelte-1uu9ytm {
|
|
327
314
|
display: flex;
|
|
328
315
|
align-items: center; }
|
|
329
|
-
.account__navigation--mobile__title-container.svelte-
|
|
316
|
+
.account__navigation--mobile__title-container.svelte-1uu9ytm h1.svelte-1uu9ytm {
|
|
330
317
|
padding-left: 0.5em; } }
|
|
331
318
|
|
|
332
|
-
.account__sidebar.svelte-
|
|
319
|
+
.account__sidebar.svelte-12quws1.svelte-12quws1 {
|
|
333
320
|
height: 100%;
|
|
334
321
|
width: 300px;
|
|
335
322
|
position: absolute;
|
|
336
|
-
top: 70px;
|
|
337
|
-
z-index: 1;
|
|
338
323
|
overflow-x: hidden;
|
|
339
324
|
border-right: 1px solid #464452; }
|
|
340
325
|
|
|
341
|
-
.account__sidebar__item_container.svelte-
|
|
326
|
+
.account__sidebar__item_container.svelte-12quws1.svelte-12quws1 {
|
|
342
327
|
margin: 0;
|
|
343
328
|
padding: 0;
|
|
344
329
|
width: 100%;
|
|
345
330
|
height: 100%; }
|
|
346
331
|
|
|
347
|
-
.account__sidebar__item.svelte-
|
|
332
|
+
.account__sidebar__item.svelte-12quws1.svelte-12quws1 {
|
|
348
333
|
padding: 2em 2em;
|
|
349
334
|
text-decoration: none;
|
|
350
335
|
font-size: 0.75em;
|
|
@@ -353,19 +338,19 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
353
338
|
border-bottom: 1px solid #464452 a;
|
|
354
339
|
border-bottom-padding-left: 1em; }
|
|
355
340
|
|
|
356
|
-
.account__sidebar__item.svelte-
|
|
341
|
+
.account__sidebar__item.svelte-12quws1 a.svelte-12quws1 {
|
|
357
342
|
color: #f2ebe3;
|
|
358
343
|
font-size: 2em; }
|
|
359
344
|
|
|
360
|
-
.account__sidebar__close.svelte-
|
|
345
|
+
.account__sidebar__close.svelte-12quws1.svelte-12quws1 {
|
|
361
346
|
display: none; }
|
|
362
347
|
|
|
363
|
-
.account__sidebar.svelte-
|
|
348
|
+
.account__sidebar.svelte-12quws1 .active.svelte-12quws1 {
|
|
364
349
|
border-top: 1px solid #00D692;
|
|
365
350
|
border-bottom: 1px solid #00D692; }
|
|
366
351
|
|
|
367
352
|
@media all and (max-width: 768px) {
|
|
368
|
-
.account__sidebar.svelte-
|
|
353
|
+
.account__sidebar.svelte-12quws1.svelte-12quws1 {
|
|
369
354
|
position: fixed;
|
|
370
355
|
background-color: #211D28;
|
|
371
356
|
top: 0;
|
|
@@ -375,10 +360,10 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
375
360
|
padding-top: 2em;
|
|
376
361
|
margin: 0;
|
|
377
362
|
border-right: none; }
|
|
378
|
-
.account__sidebar__item_container.svelte-
|
|
363
|
+
.account__sidebar__item_container.svelte-12quws1.svelte-12quws1 {
|
|
379
364
|
padding: 0em;
|
|
380
365
|
margin-top: 2rem; }
|
|
381
|
-
.account__sidebar__close.svelte-
|
|
366
|
+
.account__sidebar__close.svelte-12quws1.svelte-12quws1 {
|
|
382
367
|
display: block;
|
|
383
368
|
position: absolute;
|
|
384
369
|
right: 0;
|
|
@@ -392,3 +377,21 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
392
377
|
@use "fonts";
|
|
393
378
|
@use "forms";
|
|
394
379
|
@use "layouts";
|
|
380
|
+
.alert.svelte-1oun6o6 {
|
|
381
|
+
min-height: 2em;
|
|
382
|
+
display: inline-flex;
|
|
383
|
+
align-items: center;
|
|
384
|
+
border-radius: 0.5em;
|
|
385
|
+
padding: 0 1em 0 1em;
|
|
386
|
+
font-size: 1.2em;
|
|
387
|
+
justify-content: center;
|
|
388
|
+
margin-bottom: 1em;
|
|
389
|
+
cursor: pointer; }
|
|
390
|
+
|
|
391
|
+
.alert--danger.svelte-1oun6o6 {
|
|
392
|
+
background-color: rgba(255, 80, 77, 0.5);
|
|
393
|
+
border: 1px solid #ff504d; }
|
|
394
|
+
|
|
395
|
+
.alert--success.svelte-1oun6o6 {
|
|
396
|
+
background-color: rgba(0, 214, 146, 0.5);
|
|
397
|
+
border: 1px solid #00D692; }
|
package/package.json
CHANGED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
export let width = '5em'
|
|
3
|
+
export let height = '5em'
|
|
4
|
+
export let fill = 'currentColor'
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<svg {width} {height} role="img" viewBox="0 0 24 24" class="icon-mastodon" xmlns="http://www.w3.org/2000/svg">
|
|
8
|
+
<title>Mastodon</title>
|
|
9
|
+
<path
|
|
10
|
+
d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z"
|
|
11
|
+
{ fill }
|
|
12
|
+
/>
|
|
13
|
+
</svg>
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import IconClose from './IconClose.svelte';
|
|
3
|
+
import type { NavigationItem } from 'definition';
|
|
4
|
+
import { createEventDispatcher } from 'svelte';
|
|
5
|
+
|
|
6
|
+
export let navigationItems: Array<NavigationItem>;
|
|
7
|
+
export let type: 'sidebar' | 'topbar';
|
|
8
|
+
|
|
9
|
+
let active: string;
|
|
10
|
+
const dispatch = createEventDispatcher();
|
|
11
|
+
|
|
12
|
+
const handleClickLink = (menuItem: NavigationItem) => {
|
|
13
|
+
active = menuItem.name;
|
|
14
|
+
if (typeof menuItem.hrefOrCallback === 'function') {
|
|
15
|
+
menuItem.hrefOrCallback();
|
|
16
|
+
return false; // to avoid calling href
|
|
17
|
+
}
|
|
18
|
+
dispatch('click_link');
|
|
19
|
+
};
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<nav data-testid={type} class="nav__{type}">
|
|
23
|
+
<button on:click class="nav__{type}__close">
|
|
24
|
+
<IconClose width="3em" height="3em" />
|
|
25
|
+
</button>
|
|
26
|
+
|
|
27
|
+
<ul class="nav__{type}__item-container">
|
|
28
|
+
{#each navigationItems as item}
|
|
29
|
+
<li class="nav__{type}__item" class:active={active === item.name}>
|
|
30
|
+
<a
|
|
31
|
+
on:click={() => handleClickLink(item)}
|
|
32
|
+
href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback : '#'}
|
|
33
|
+
>
|
|
34
|
+
{item.name}</a
|
|
35
|
+
>
|
|
36
|
+
</li>
|
|
37
|
+
{/each}
|
|
38
|
+
</ul>
|
|
39
|
+
</nav>
|
|
40
|
+
|
|
41
|
+
<style lang="scss">
|
|
42
|
+
@use '../scss/colors';
|
|
43
|
+
@import '../scss/containers';
|
|
44
|
+
|
|
45
|
+
.nav {
|
|
46
|
+
&__sidebar,
|
|
47
|
+
&__topbar {
|
|
48
|
+
&__item {
|
|
49
|
+
text-decoration: none;
|
|
50
|
+
font-size: 0.75em;
|
|
51
|
+
display: block;
|
|
52
|
+
}
|
|
53
|
+
&__item a {
|
|
54
|
+
color: colors.$beige;
|
|
55
|
+
font-size: 2em;
|
|
56
|
+
}
|
|
57
|
+
&__close {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&__sidebar {
|
|
63
|
+
height: 100%;
|
|
64
|
+
width: 300px;
|
|
65
|
+
position: absolute;
|
|
66
|
+
top: 4.45em;
|
|
67
|
+
left: 0;
|
|
68
|
+
overflow-x: hidden;
|
|
69
|
+
border-right: 1px solid colors.$mediumGrey;
|
|
70
|
+
&__item-container {
|
|
71
|
+
margin: 0;
|
|
72
|
+
padding: 0;
|
|
73
|
+
width: 100%;
|
|
74
|
+
height: 100%;
|
|
75
|
+
}
|
|
76
|
+
&__item {
|
|
77
|
+
padding: 2em;
|
|
78
|
+
border-top: 1px solid colors.$mediumGrey;
|
|
79
|
+
}
|
|
80
|
+
&__item:first-child {
|
|
81
|
+
border-top: none;
|
|
82
|
+
}
|
|
83
|
+
.active {
|
|
84
|
+
border-top: 1px solid colors.$green;
|
|
85
|
+
border-bottom: 1px solid colors.$green;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&__topbar {
|
|
90
|
+
flex-grow: 1;
|
|
91
|
+
display: flex;
|
|
92
|
+
justify-content: flex-end;
|
|
93
|
+
ul,
|
|
94
|
+
li {
|
|
95
|
+
display: inline;
|
|
96
|
+
}
|
|
97
|
+
ul {
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-grow: 1;
|
|
100
|
+
justify-content: space-around;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@include screen-tablet {
|
|
106
|
+
.nav {
|
|
107
|
+
&__sidebar,
|
|
108
|
+
&__topbar {
|
|
109
|
+
position: fixed;
|
|
110
|
+
background-color: colors.$darkBlue;
|
|
111
|
+
top: 0;
|
|
112
|
+
right: 0;
|
|
113
|
+
width: 100%;
|
|
114
|
+
padding: 0;
|
|
115
|
+
padding-top: 2em;
|
|
116
|
+
margin: 0;
|
|
117
|
+
border-right: none;
|
|
118
|
+
&__item-container {
|
|
119
|
+
padding: 0em;
|
|
120
|
+
margin-top: 2rem;
|
|
121
|
+
}
|
|
122
|
+
ul,
|
|
123
|
+
li {
|
|
124
|
+
display: block;
|
|
125
|
+
}
|
|
126
|
+
&__close {
|
|
127
|
+
display: block;
|
|
128
|
+
position: absolute;
|
|
129
|
+
right: 0;
|
|
130
|
+
top: 0;
|
|
131
|
+
background-color: transparent;
|
|
132
|
+
border: none;
|
|
133
|
+
color: colors.$darkBeige;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
&__sidebar {
|
|
138
|
+
top: 0;
|
|
139
|
+
left: 0;
|
|
140
|
+
&__item:first-child {
|
|
141
|
+
border-top: 1px solid colors.$mediumGrey;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
&__topbar {
|
|
146
|
+
height: 100%;
|
|
147
|
+
&__item {
|
|
148
|
+
padding: 2em;
|
|
149
|
+
border-top: 1px solid colors.$mediumGrey;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
</style>
|
package/src/Navigation.svelte
CHANGED
|
@@ -2,46 +2,51 @@
|
|
|
2
2
|
import type { NavigationItem } from './definition';
|
|
3
3
|
import IconBurger from './IconBurger.svelte';
|
|
4
4
|
import IconIrocoLogo from './IconIrocoLogo.svelte';
|
|
5
|
-
import
|
|
5
|
+
import NavBar from './NavBar.svelte';
|
|
6
6
|
|
|
7
7
|
export let navigationItems: Array<NavigationItem>;
|
|
8
|
+
export let type: 'sidebar' | 'topbar' = "topbar";
|
|
8
9
|
export let title: string;
|
|
9
10
|
|
|
10
11
|
let showMenu = false;
|
|
11
12
|
</script>
|
|
12
13
|
|
|
13
|
-
<div class="
|
|
14
|
-
<div class="
|
|
14
|
+
<div class="navigation--mobile">
|
|
15
|
+
<div class="navigation--mobile__title-container">
|
|
15
16
|
<IconIrocoLogo width="3em" height="3em" />
|
|
16
17
|
<h1>{title}</h1>
|
|
17
18
|
</div>
|
|
18
19
|
|
|
19
|
-
<button on:click={() => (showMenu = true)} class="
|
|
20
|
+
<button on:click={() => (showMenu = true)} class="navigation--mobile__button">
|
|
20
21
|
<IconBurger width="3em" height="3em" />
|
|
21
22
|
</button>
|
|
22
23
|
|
|
23
24
|
{#if showMenu}
|
|
24
|
-
<
|
|
25
|
+
<NavBar
|
|
25
26
|
on:click_link={() => (showMenu = false)}
|
|
26
27
|
on:click={() => (showMenu = false)}
|
|
27
|
-
{
|
|
28
|
+
{ type }
|
|
29
|
+
{ navigationItems }
|
|
28
30
|
/>
|
|
29
31
|
{/if}
|
|
30
32
|
</div>
|
|
31
33
|
|
|
32
|
-
<div class="
|
|
33
|
-
<div class="
|
|
34
|
+
<div class="navigation">
|
|
35
|
+
<div class="navigation__title-container">
|
|
34
36
|
<IconIrocoLogo width="3em" height="3em" />
|
|
35
37
|
<h1>{title}</h1>
|
|
36
38
|
</div>
|
|
37
|
-
<
|
|
39
|
+
<NavBar {navigationItems} { type } />
|
|
38
40
|
</div>
|
|
39
41
|
|
|
40
42
|
<style lang="scss">
|
|
41
43
|
@use '../scss/colors';
|
|
42
44
|
@import '../scss/containers';
|
|
43
|
-
.
|
|
44
|
-
display:
|
|
45
|
+
.navigation {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
justify-content: space-between;
|
|
49
|
+
align-items: center;
|
|
45
50
|
width: 100%;
|
|
46
51
|
border-bottom: 1px solid colors.$mediumGrey;
|
|
47
52
|
&--mobile {
|
|
@@ -59,7 +64,7 @@
|
|
|
59
64
|
}
|
|
60
65
|
|
|
61
66
|
@include screen-tablet {
|
|
62
|
-
.
|
|
67
|
+
.navigation {
|
|
63
68
|
display: none;
|
|
64
69
|
color: colors.$beige;
|
|
65
70
|
&--mobile {
|
|
@@ -73,7 +78,6 @@
|
|
|
73
78
|
border-bottom: 1px solid colors.$mediumGrey;
|
|
74
79
|
|
|
75
80
|
h1 {
|
|
76
|
-
font: bold;
|
|
77
81
|
font-size: 2em;
|
|
78
82
|
}
|
|
79
83
|
&__button {
|
package/src/index.ts
CHANGED
|
@@ -6,7 +6,8 @@ export { default as NumberInput } from './NumberInput.svelte'
|
|
|
6
6
|
export { default as Icon } from './Icon.svelte'
|
|
7
7
|
export { default as Loader } from './Loader.svelte'
|
|
8
8
|
export { default as IconInfo } from './IconInfo.svelte'
|
|
9
|
-
export { default as
|
|
9
|
+
export { default as IconMastodon } from './IconMastodon.svelte'
|
|
10
|
+
export { default as NavBar } from './NavBar.svelte'
|
|
10
11
|
export { default as Navigation } from './Navigation.svelte'
|
|
11
12
|
export { default as DataTable } from './DataTable.svelte'
|
|
12
13
|
export { default as IconMore } from './IconMoreSign.svelte'
|